mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 17:51:24 +01:00
703 lines
21 KiB
JavaScript
703 lines
21 KiB
JavaScript
import {rollups} from "../../../utils/functionUtils.js";
|
|
import {isWater} from "/src/utils/graphUtils";
|
|
import {tip} from "/src/scripts/tooltips";
|
|
import {byId} from "/src/utils/shorthands";
|
|
import {rn} from "/src/utils/numberUtils";
|
|
import {capitalize} from "@/utils/stringUtils";
|
|
import {si, convertTemperature} from "@/utils/unitUtils";
|
|
|
|
const entitiesMap = {
|
|
states: {
|
|
label: "State",
|
|
getCellsData: () => pack.cells.state,
|
|
getName: nameGetter("states"),
|
|
getColors: colorsGetter("states"),
|
|
landOnly: true
|
|
},
|
|
cultures: {
|
|
label: "Culture",
|
|
getCellsData: () => pack.cells.culture,
|
|
getName: nameGetter("cultures"),
|
|
getColors: colorsGetter("cultures"),
|
|
landOnly: true
|
|
},
|
|
religions: {
|
|
label: "Religion",
|
|
getCellsData: () => pack.cells.religion,
|
|
getName: nameGetter("religions"),
|
|
getColors: colorsGetter("religions"),
|
|
landOnly: true
|
|
},
|
|
provinces: {
|
|
label: "Province",
|
|
getCellsData: () => pack.cells.province,
|
|
getName: nameGetter("provinces"),
|
|
getColors: colorsGetter("provinces"),
|
|
landOnly: true
|
|
},
|
|
biomes: {
|
|
label: "Biome",
|
|
getCellsData: () => pack.cells.biome,
|
|
getName: biomeNameGetter,
|
|
getColors: biomeColorsGetter,
|
|
landOnly: false
|
|
}
|
|
};
|
|
|
|
const quantizationMap = {
|
|
total_population: {
|
|
label: "Total population",
|
|
quantize: cellId => getUrbanPopulation(cellId) + getRuralPopulation(cellId),
|
|
aggregate: values => rn(d3.sum(values)),
|
|
formatTicks: value => si(value),
|
|
stringify: value => value.toLocaleString(),
|
|
stackable: true,
|
|
landOnly: true
|
|
},
|
|
urban_population: {
|
|
label: "Urban population",
|
|
quantize: getUrbanPopulation,
|
|
aggregate: values => rn(d3.sum(values)),
|
|
formatTicks: value => si(value),
|
|
stringify: value => value.toLocaleString(),
|
|
stackable: true,
|
|
landOnly: true
|
|
},
|
|
rural_population: {
|
|
label: "Rural population",
|
|
quantize: getRuralPopulation,
|
|
aggregate: values => rn(d3.sum(values)),
|
|
formatTicks: value => si(value),
|
|
stringify: value => value.toLocaleString(),
|
|
stackable: true,
|
|
landOnly: true
|
|
},
|
|
area: {
|
|
label: "Land area",
|
|
quantize: cellId => getArea(pack.cells.area[cellId]),
|
|
aggregate: values => rn(d3.sum(values)),
|
|
formatTicks: value => `${si(value)} ${getAreaUnit()}`,
|
|
stringify: value => `${value.toLocaleString()} ${getAreaUnit()}`,
|
|
stackable: true,
|
|
landOnly: true
|
|
},
|
|
cells: {
|
|
label: "Number of cells",
|
|
quantize: () => 1,
|
|
aggregate: values => d3.sum(values),
|
|
formatTicks: value => value,
|
|
stringify: value => value.toLocaleString(),
|
|
stackable: true,
|
|
landOnly: true
|
|
},
|
|
burgs_number: {
|
|
label: "Number of burgs",
|
|
quantize: cellId => (pack.cells.burg[cellId] ? 1 : 0),
|
|
aggregate: values => d3.sum(values),
|
|
formatTicks: value => value,
|
|
stringify: value => value.toLocaleString(),
|
|
stackable: true,
|
|
landOnly: true
|
|
},
|
|
average_elevation: {
|
|
label: "Average elevation",
|
|
quantize: cellId => pack.cells.h[cellId],
|
|
aggregate: values => d3.mean(values),
|
|
formatTicks: value => getHeight(value),
|
|
stringify: value => getHeight(value),
|
|
stackable: false,
|
|
landOnly: false
|
|
},
|
|
max_elevation: {
|
|
label: "Maximum mean elevation",
|
|
quantize: cellId => pack.cells.h[cellId],
|
|
aggregate: values => d3.max(values),
|
|
formatTicks: value => getHeight(value),
|
|
stringify: value => getHeight(value),
|
|
stackable: false,
|
|
landOnly: false
|
|
},
|
|
min_elevation: {
|
|
label: "Minimum mean elevation",
|
|
quantize: cellId => pack.cells.h[cellId],
|
|
aggregate: values => d3.min(values),
|
|
formatTicks: value => getHeight(value),
|
|
stringify: value => getHeight(value),
|
|
stackable: false,
|
|
landOnly: false
|
|
},
|
|
average_temperature: {
|
|
label: "Annual mean temperature",
|
|
quantize: cellId => grid.cells.temp[pack.cells.g[cellId]],
|
|
aggregate: values => d3.mean(values),
|
|
formatTicks: value => convertTemperature(value),
|
|
stringify: value => convertTemperature(value),
|
|
stackable: false,
|
|
landOnly: false
|
|
},
|
|
max_temperature: {
|
|
label: "Mean annual maximum temperature",
|
|
quantize: cellId => grid.cells.temp[pack.cells.g[cellId]],
|
|
aggregate: values => d3.max(values),
|
|
formatTicks: value => convertTemperature(value),
|
|
stringify: value => convertTemperature(value),
|
|
stackable: false,
|
|
landOnly: false
|
|
},
|
|
min_temperature: {
|
|
label: "Mean annual minimum temperature",
|
|
quantize: cellId => grid.cells.temp[pack.cells.g[cellId]],
|
|
aggregate: values => d3.min(values),
|
|
formatTicks: value => convertTemperature(value),
|
|
stringify: value => convertTemperature(value),
|
|
stackable: false,
|
|
landOnly: false
|
|
},
|
|
average_precipitation: {
|
|
label: "Annual mean precipitation",
|
|
quantize: cellId => grid.cells.prec[pack.cells.g[cellId]],
|
|
aggregate: values => rn(d3.mean(values)),
|
|
formatTicks: value => getPrecipitation(rn(value)),
|
|
stringify: value => getPrecipitation(rn(value)),
|
|
stackable: false,
|
|
landOnly: true
|
|
},
|
|
max_precipitation: {
|
|
label: "Mean annual maximum precipitation",
|
|
quantize: cellId => grid.cells.prec[pack.cells.g[cellId]],
|
|
aggregate: values => rn(d3.max(values)),
|
|
formatTicks: value => getPrecipitation(rn(value)),
|
|
stringify: value => getPrecipitation(rn(value)),
|
|
stackable: false,
|
|
landOnly: true
|
|
},
|
|
min_precipitation: {
|
|
label: "Mean annual minimum precipitation",
|
|
quantize: cellId => grid.cells.prec[pack.cells.g[cellId]],
|
|
aggregate: values => rn(d3.min(values)),
|
|
formatTicks: value => getPrecipitation(rn(value)),
|
|
stringify: value => getPrecipitation(rn(value)),
|
|
stackable: false,
|
|
landOnly: true
|
|
},
|
|
coastal_cells: {
|
|
label: "Number of coastal cells",
|
|
quantize: cellId => (pack.cells.t[cellId] === 1 ? 1 : 0),
|
|
aggregate: values => d3.sum(values),
|
|
formatTicks: value => value,
|
|
stringify: value => value.toLocaleString(),
|
|
stackable: true,
|
|
landOnly: true
|
|
},
|
|
river_cells: {
|
|
label: "Number of river cells",
|
|
quantize: cellId => (pack.cells.r[cellId] ? 1 : 0),
|
|
aggregate: values => d3.sum(values),
|
|
formatTicks: value => value,
|
|
stringify: value => value.toLocaleString(),
|
|
stackable: true,
|
|
landOnly: true
|
|
}
|
|
};
|
|
|
|
const plotTypeMap = {
|
|
stackedBar: {offset: d3.stackOffsetDiverging},
|
|
normalizedStackedBar: {offset: d3.stackOffsetExpand, formatX: value => rn(value * 100) + "%"}
|
|
};
|
|
|
|
let charts = []; // store charts data
|
|
let prevMapId = mapId;
|
|
|
|
appendStyleSheet();
|
|
insertHtml();
|
|
addListeners();
|
|
changeViewColumns();
|
|
|
|
export function open() {
|
|
closeDialogs("#chartsOverview, .stable");
|
|
|
|
if (prevMapId !== mapId) {
|
|
charts = [];
|
|
prevMapId = mapId;
|
|
}
|
|
|
|
if (!charts.length) addChart();
|
|
else charts.forEach(chart => renderChart(chart));
|
|
|
|
$("#chartsOverview").dialog({
|
|
title: "Data Charts",
|
|
position: {my: "center", at: "center", of: "svg"},
|
|
close: handleClose
|
|
});
|
|
}
|
|
|
|
function appendStyleSheet() {
|
|
const style = document.createElement("style");
|
|
style.textContent = /* css */ `
|
|
#chartsOverview {
|
|
max-width: 90vw !important;
|
|
max-height: 90vh !important;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
|
|
#chartsOverview__form {
|
|
font-size: 1.1em;
|
|
margin: 0.3em 0;
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
grid-gap: 0.3em;
|
|
align-items: start;
|
|
justify-items: end;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
#chartsOverview__form {
|
|
font-size: 1em;
|
|
grid-template-columns: 1fr;
|
|
justify-items: normal;
|
|
}
|
|
}
|
|
|
|
#chartsOverview__charts {
|
|
overflow: auto;
|
|
scroll-behavior: smooth;
|
|
display: grid;
|
|
}
|
|
|
|
#chartsOverview__charts figure {
|
|
margin: 0;
|
|
}
|
|
|
|
#chartsOverview__charts figcaption {
|
|
font-size: 1.2em;
|
|
margin: 0 1% 0 4%;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
`;
|
|
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
function insertHtml() {
|
|
const entities = Object.entries(entitiesMap).map(([entity, {label}]) => [entity, label]);
|
|
const plotBy = Object.entries(quantizationMap).map(([plotBy, {label}]) => [plotBy, label]);
|
|
|
|
const createOption = ([value, label]) => `<option value="${value}">${label}</option>`;
|
|
const createOptions = values => values.map(createOption).join("");
|
|
|
|
const html = /* html */ `<div id="chartsOverview" class="dialog stable">
|
|
<form id="chartsOverview__form">
|
|
<div>
|
|
<button data-tip="Add a chart" type="submit">Plot</button>
|
|
|
|
<select data-tip="Select entity (y axis)" id="chartsOverview__entitiesSelect">
|
|
${createOptions(entities)}
|
|
</select>
|
|
|
|
<label>by
|
|
<select data-tip="Select value to plot by (x axis)" id="chartsOverview__plotBySelect">
|
|
${createOptions(plotBy)}
|
|
</select>
|
|
</label>
|
|
|
|
<label>grouped by
|
|
<select data-tip="Select entoty to group by. If you don't need grouping, set it the same as the entity" id="chartsOverview__groupBySelect">
|
|
${createOptions(entities)}
|
|
</select>
|
|
</label>
|
|
|
|
<label data-tip="Sorting type">sorted
|
|
<select id="chartsOverview__sortingSelect">
|
|
<option value="value">by value</option>
|
|
<option value="name">by name</option>
|
|
<option value="natural">naturally</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<span data-tip="Chart type">Type</span>
|
|
<select id="chartsOverview__chartType">
|
|
<option value="stackedBar" selected>Stacked Bar</option>
|
|
<option value="normalizedStackedBar">Normalized Stacked Bar</option>
|
|
</select>
|
|
|
|
<span data-tip="Columns to display">Columns</span>
|
|
<select id="chartsOverview__viewColumns">
|
|
<option value="1" selected>1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
|
|
<section id="chartsOverview__charts"></section>
|
|
</div>`;
|
|
|
|
byId("dialogs").insertAdjacentHTML("beforeend", html);
|
|
|
|
// set defaults
|
|
byId("chartsOverview__entitiesSelect").value = "states";
|
|
byId("chartsOverview__plotBySelect").value = "total_population";
|
|
byId("chartsOverview__groupBySelect").value = "cultures";
|
|
}
|
|
|
|
function addListeners() {
|
|
byId("chartsOverview__form").on("submit", addChart);
|
|
byId("chartsOverview__viewColumns").on("change", changeViewColumns);
|
|
}
|
|
|
|
function addChart(event) {
|
|
if (event) event.preventDefault();
|
|
|
|
const entity = byId("chartsOverview__entitiesSelect").value;
|
|
const plotBy = byId("chartsOverview__plotBySelect").value;
|
|
let groupBy = byId("chartsOverview__groupBySelect").value;
|
|
const sorting = byId("chartsOverview__sortingSelect").value;
|
|
const type = byId("chartsOverview__chartType").value;
|
|
|
|
const {stackable} = quantizationMap[plotBy];
|
|
|
|
if (!stackable && groupBy !== entity) {
|
|
tip(`Grouping is not supported for ${plotByLabel}`, false, "warn", 4000);
|
|
groupBy = entity;
|
|
}
|
|
|
|
const chartOptions = {id: Date.now(), entity, plotBy, groupBy, sorting, type};
|
|
charts.push(chartOptions);
|
|
renderChart(chartOptions);
|
|
updateDialogPosition();
|
|
}
|
|
|
|
function renderChart({id, entity, plotBy, groupBy, sorting, type}) {
|
|
const {
|
|
label: plotByLabel,
|
|
stringify,
|
|
quantize,
|
|
aggregate,
|
|
formatTicks,
|
|
landOnly: plotByLandOnly
|
|
} = quantizationMap[plotBy];
|
|
|
|
const noGrouping = groupBy === entity;
|
|
|
|
const {
|
|
label: entityLabel,
|
|
getName: getEntityName,
|
|
getCellsData: getEntityCellsData,
|
|
landOnly: entityLandOnly
|
|
} = entitiesMap[entity];
|
|
const {label: groupLabel, getName: getGroupName, getCellsData: getGroupCellsData, getColors} = entitiesMap[groupBy];
|
|
|
|
const entityCells = getEntityCellsData();
|
|
const groupCells = getGroupCellsData();
|
|
|
|
const title = `${capitalize(entity)} by ${plotByLabel}${noGrouping ? "" : " grouped by " + groupLabel}`;
|
|
|
|
const tooltip = (entity, group, value, percentage) => {
|
|
const entityTip = `${entityLabel}: ${entity}`;
|
|
const groupTip = noGrouping ? "" : `${groupLabel}: ${group}`;
|
|
let valueTip = `${plotByLabel}: ${stringify(value)}`;
|
|
if (!noGrouping) valueTip += ` (${rn(percentage * 100)}%)`;
|
|
return [entityTip, groupTip, valueTip].filter(Boolean);
|
|
};
|
|
|
|
const dataCollection = {};
|
|
const groups = new Set();
|
|
|
|
for (const cellId of pack.cells.i) {
|
|
if ((entityLandOnly || plotByLandOnly) && isWater(cellId)) continue;
|
|
const entityId = entityCells[cellId];
|
|
const groupId = groupCells[cellId];
|
|
const value = quantize(cellId);
|
|
|
|
if (!dataCollection[entityId]) dataCollection[entityId] = {[groupId]: [value]};
|
|
else if (!dataCollection[entityId][groupId]) dataCollection[entityId][groupId] = [value];
|
|
else dataCollection[entityId][groupId].push(value);
|
|
|
|
groups.add(groupId);
|
|
}
|
|
|
|
const chartData = Object.entries(dataCollection)
|
|
.map(([entityId, groupData]) => {
|
|
const name = getEntityName(entityId);
|
|
return Object.entries(groupData).map(([groupId, values]) => {
|
|
const group = getGroupName(groupId);
|
|
const value = aggregate(values);
|
|
return {name, group, value};
|
|
});
|
|
})
|
|
.flat();
|
|
|
|
const colors = getColors();
|
|
const {offset, formatX = formatTicks} = plotTypeMap[type];
|
|
|
|
const $chart = createStackedBarChart(chartData, {sorting, colors, tooltip, offset, formatX});
|
|
insertChart(id, $chart, title);
|
|
|
|
byId("chartsOverview__charts").lastChild.scrollIntoView();
|
|
}
|
|
|
|
// based on observablehq.com/@d3/stacked-horizontal-bar-chart
|
|
function createStackedBarChart(data, {sorting, colors, tooltip, offset, formatX}) {
|
|
const sortedData = sortData(data, sorting);
|
|
|
|
const X = sortedData.map(d => d.value);
|
|
const Y = sortedData.map(d => d.name);
|
|
const Z = sortedData.map(d => d.group);
|
|
|
|
const yDomain = new Set(Y);
|
|
const zDomain = new Set(Z);
|
|
const I = d3.range(X.length).filter(i => yDomain.has(Y[i]) && zDomain.has(Z[i]));
|
|
|
|
const entities = Array.from(yDomain);
|
|
const groups = Array.from(zDomain);
|
|
|
|
const yScaleMinWidth = getTextMinWidth(entities);
|
|
const legendRows = calculateLegendRows(groups, WIDTH - yScaleMinWidth - 15);
|
|
|
|
const margin = {top: 30, right: 15, bottom: legendRows * 20 + 10, left: yScaleMinWidth};
|
|
const xRange = [margin.left, WIDTH - margin.right];
|
|
const height = yDomain.size * 25 + margin.top + margin.bottom;
|
|
const yRange = [height - margin.bottom, margin.top];
|
|
|
|
const rolled = rollups(...[I, ([i]) => i, i => Y[i], i => Z[i]]);
|
|
|
|
const series = d3
|
|
.stack()
|
|
.keys(groups)
|
|
.value(([, I], z) => X[new Map(I).get(z)])
|
|
.order(d3.stackOrderNone)
|
|
.offset(offset)(rolled)
|
|
.map(s => {
|
|
const defined = s.filter(d => !isNaN(d[1]));
|
|
const data = defined.map(d => Object.assign(d, {i: new Map(d.data[1]).get(s.key)}));
|
|
return {key: s.key, data};
|
|
});
|
|
|
|
const xDomain = d3.extent(series.map(d => d.data).flat(2));
|
|
|
|
const xScale = d3.scaleLinear(xDomain, xRange);
|
|
const yScale = d3.scaleBand(entities, yRange).paddingInner(Y_PADDING);
|
|
|
|
const xAxis = d3.axisTop(xScale).ticks(WIDTH / 80, null);
|
|
const yAxis = d3.axisLeft(yScale).tickSizeOuter(0);
|
|
|
|
const svg = d3
|
|
.create("svg")
|
|
.attr("version", "1.1")
|
|
.attr("xmlns", "http://www.w3.org/2000/svg")
|
|
.attr("viewBox", [0, 0, WIDTH, height])
|
|
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
|
|
|
|
svg
|
|
.append("g")
|
|
.attr("transform", `translate(0,${margin.top})`)
|
|
.call(xAxis)
|
|
.call(g => g.select(".domain").remove())
|
|
.call(g => g.selectAll("text").text(d => formatX(d)))
|
|
.call(g =>
|
|
g
|
|
.selectAll(".tick line")
|
|
.clone()
|
|
.attr("y2", height - margin.top - margin.bottom)
|
|
.attr("stroke-opacity", 0.1)
|
|
);
|
|
|
|
const bar = svg
|
|
.append("g")
|
|
.attr("stroke", "#666")
|
|
.attr("stroke-width", 0.5)
|
|
.selectAll("g")
|
|
.data(series)
|
|
.join("g")
|
|
.attr("fill", d => colors[d.key])
|
|
.selectAll("rect")
|
|
.data(d => d.data.filter(([x1, x2]) => x1 !== x2))
|
|
.join("rect")
|
|
.attr("x", ([x1, x2]) => Math.min(xScale(x1), xScale(x2)))
|
|
.attr("y", ({i}) => yScale(Y[i]))
|
|
.attr("width", ([x1, x2]) => Math.abs(xScale(x1) - xScale(x2)))
|
|
.attr("height", yScale.bandwidth());
|
|
|
|
const totalZ = Object.fromEntries(
|
|
rollups(...[I, ([i]) => i, i => Y[i], i => X[i]]).map(([y, yz]) => [y, d3.sum(yz, yz => yz[0])])
|
|
);
|
|
const getTooltip = ({i}) => tooltip(Y[i], Z[i], X[i], X[i] / totalZ[Y[i]]);
|
|
|
|
bar.append("title").text(d => getTooltip(d).join("\r\n"));
|
|
bar.on("mouseover", d => tip(getTooltip(d).join(". ")));
|
|
|
|
svg
|
|
.append("g")
|
|
.attr("transform", `translate(${xScale(0)},0)`)
|
|
.call(yAxis);
|
|
|
|
const rowElements = Math.ceil(groups.length / legendRows);
|
|
const columnWidth = WIDTH / (rowElements + 0.5);
|
|
|
|
const ROW_HEIGHT = 20;
|
|
|
|
const getLegendX = (d, i) => (i % rowElements) * columnWidth;
|
|
const getLegendLabelX = (d, i) => getLegendX(d, i) + LABEL_GAP;
|
|
const getLegendY = (d, i) => Math.floor(i / rowElements) * ROW_HEIGHT;
|
|
|
|
const legend = svg
|
|
.append("g")
|
|
.attr("stroke", "#666")
|
|
.attr("stroke-width", 0.5)
|
|
.attr("dominant-baseline", "central")
|
|
.attr("transform", `translate(${margin.left},${height - margin.bottom + 15})`);
|
|
|
|
legend
|
|
.selectAll("circle")
|
|
.data(groups)
|
|
.join("rect")
|
|
.attr("x", getLegendX)
|
|
.attr("y", getLegendY)
|
|
.attr("width", 10)
|
|
.attr("height", 10)
|
|
.attr("transform", "translate(-5, -5)")
|
|
.attr("fill", d => colors[d]);
|
|
|
|
legend
|
|
.selectAll("text")
|
|
.data(groups)
|
|
.join("text")
|
|
.attr("x", getLegendLabelX)
|
|
.attr("y", getLegendY)
|
|
.text(d => d);
|
|
|
|
return svg.node();
|
|
}
|
|
|
|
function insertChart(id, $chart, title) {
|
|
const $chartContainer = byId("chartsOverview__charts");
|
|
|
|
const $figure = document.createElement("figure");
|
|
const $caption = document.createElement("figcaption");
|
|
|
|
const figureNo = $chartContainer.childElementCount + 1;
|
|
$caption.innerHTML = /* html */ `
|
|
<div>
|
|
<strong>Figure ${figureNo}</strong>. ${title}
|
|
</div>
|
|
<div>
|
|
<button data-tip="Download the chart in svg format (can open in browser or Inkscape)" class="icon-download"></button>
|
|
<button data-tip="Remove the chart" class="icon-trash"></button>
|
|
</div>
|
|
`;
|
|
|
|
$figure.appendChild($chart);
|
|
$figure.appendChild($caption);
|
|
$chartContainer.appendChild($figure);
|
|
|
|
const downloadChart = () => {
|
|
const name = `${getFileName(title)}.svg`;
|
|
downloadFile($chart.outerHTML, name);
|
|
};
|
|
|
|
const removeChart = () => {
|
|
$figure.remove();
|
|
charts = charts.filter(chart => chart.id !== id);
|
|
updateDialogPosition();
|
|
};
|
|
|
|
$figure.querySelector("button.icon-download").on("click", downloadChart);
|
|
$figure.querySelector("button.icon-trash").on("click", removeChart);
|
|
}
|
|
|
|
function changeViewColumns() {
|
|
const columns = byId("chartsOverview__viewColumns").value;
|
|
const $charts = byId("chartsOverview__charts");
|
|
$charts.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
|
|
updateDialogPosition();
|
|
}
|
|
|
|
function updateDialogPosition() {
|
|
$("#chartsOverview").dialog({position: {my: "center", at: "center", of: "svg"}});
|
|
}
|
|
|
|
function handleClose() {
|
|
const $chartContainer = byId("chartsOverview__charts");
|
|
$chartContainer.innerHTML = "";
|
|
$("#chartsOverview").dialog("destroy");
|
|
}
|
|
|
|
// config
|
|
const NEUTRAL_COLOR = "#ccc";
|
|
const EMPTY_NAME = "no";
|
|
|
|
const WIDTH = 800;
|
|
const Y_PADDING = 0.2;
|
|
|
|
const RESERVED_PX_PER_CHAR = 7;
|
|
const LABEL_GAP = 10;
|
|
|
|
function getTextMinWidth(entities) {
|
|
return d3.max(entities.map(name => name.length)) * RESERVED_PX_PER_CHAR;
|
|
}
|
|
|
|
function calculateLegendRows(groups, availableWidth) {
|
|
const minWidth = LABEL_GAP + getTextMinWidth(groups);
|
|
const maxInRow = Math.floor(availableWidth / minWidth);
|
|
const legendRows = Math.ceil(groups.length / maxInRow);
|
|
return legendRows;
|
|
}
|
|
|
|
function nameGetter(entity) {
|
|
return i => pack[entity][i].name || EMPTY_NAME;
|
|
}
|
|
|
|
function colorsGetter(entity) {
|
|
return () => Object.fromEntries(pack[entity].map(({name, color}) => [name || EMPTY_NAME, color || NEUTRAL_COLOR]));
|
|
}
|
|
|
|
function biomeNameGetter(i) {
|
|
return biomesData.name[i] || EMPTY_NAME;
|
|
}
|
|
|
|
function biomeColorsGetter() {
|
|
return Object.fromEntries(biomesData.i.map(i => [biomesData.name[i], biomesData.color[i]]));
|
|
}
|
|
|
|
function getUrbanPopulation(cellId) {
|
|
const burgId = pack.cells.burg[cellId];
|
|
if (!burgId) return 0;
|
|
const populationPoints = pack.burgs[burgId].population;
|
|
return populationPoints * populationRate * urbanization;
|
|
}
|
|
|
|
function getRuralPopulation(cellId) {
|
|
return pack.cells.pop[cellId] * populationRate;
|
|
}
|
|
|
|
function sortData(data, sorting) {
|
|
if (sorting === "natural") return data;
|
|
|
|
if (sorting === "name") {
|
|
return data.sort((a, b) => {
|
|
if (a.name !== b.name) return b.name.localeCompare(a.name); // reversed as 1st element is the bottom
|
|
return a.group.localeCompare(b.group);
|
|
});
|
|
}
|
|
|
|
if (sorting === "value") {
|
|
const entitySum = {};
|
|
const groupSum = {};
|
|
for (const {name, group, value} of data) {
|
|
entitySum[name] = (entitySum[name] || 0) + value;
|
|
groupSum[group] = (groupSum[group] || 0) + value;
|
|
}
|
|
|
|
return data.sort((a, b) => {
|
|
if (a.name !== b.name) return entitySum[a.name] - entitySum[b.name]; // reversed as 1st element is the bottom
|
|
return groupSum[b.group] - groupSum[a.group];
|
|
});
|
|
}
|
|
|
|
return data;
|
|
}
|