Public
Edited
Jun 22, 2023
1 fork
15 stars
import { grid5000 as db, getPosition } from "@jgaffuri/eurpopgrid"
cells = db.query(
"SELECT GRD_ID, TOT_P_2006, TOT_P_2011, TOT_P_2018, TOT_P_2021 FROM data WHERE " +
(geo == "EU" ? euWhere : "CNTR_ID='" + geo + "'")
)
center = {
const center = { p2006: [0, 0], p2011: [0, 0], p2018: [0, 0], p2021: [0, 0] };
let tot2006 = 0;
let tot2011 = 0;
let tot2018 = 0;
let tot2021 = 0;
for (let c of cells) {
tot2006 += c.TOT_P_2006;
tot2011 += c.TOT_P_2011;
tot2018 += c.TOT_P_2018;
tot2021 += c.TOT_P_2021;
const pos = getPosition(c.GRD_ID);
center.p2006[0] += c.TOT_P_2006 * pos.x;
center.p2006[1] += c.TOT_P_2006 * pos.y;
center.p2011[0] += c.TOT_P_2011 * pos.x;
center.p2011[1] += c.TOT_P_2011 * pos.y;
center.p2018[0] += c.TOT_P_2018 * pos.x;
center.p2018[1] += c.TOT_P_2018 * pos.y;
center.p2021[0] += c.TOT_P_2021 * pos.x;
center.p2021[1] += c.TOT_P_2021 * pos.y;
}
center.p2006[0] /= tot2006;
center.p2006[1] /= tot2006;
center.p2011[0] /= tot2011;
center.p2011[1] /= tot2011;
center.p2018[0] /= tot2018;
center.p2018[1] /= tot2018;
center.p2021[0] /= tot2021;
center.p2021[1] /= tot2021;
//handle case when no 2006 data
//if (isNaN(center.p2006[0]) || isNaN(center.p2006[1])) {
//center.p2006[0] = -1000000;
//center.p2006[1] = -1000000;
//}
return center;
}
/*totals = db.query(
"SELECT sum(pop2006),sum(pop2011),sum(pop2018) FROM data WHERE " +
(geo == "EU" ? euWhere : "CNTR_ID='" + geo + "'")
)*/
w = width * 0.3
h = 300
projection = d3
.geoIdentity()
.reflectY(true)
.fitExtent(
[
[30, 30],
[w - 60, h - 60]
],
geomsMap
)
path = d3.geoPath(projection)
circleRadius = 4
colors = {
return { p2006: "salmon", p2011: "salmon", p2018: "salmon", p2021: "salmon" };
}
wI = w * 0.8
hI = h * 0.8
line = {
const cs = [];
if (center.p2006[0]) cs.push(center.p2006);
if (center.p2011[0]) cs.push(center.p2011);
if (center.p2018[0]) cs.push(center.p2018);
if (center.p2021[0]) cs.push(center.p2021);
return {
type: "LineString",
coordinates: cs
};
}
projectionI = d3
.geoIdentity()
.reflectY(true)
.fitExtent(
[
[40, 40],
[wI - 80, hI - 80]
],
line
)
pathI = d3.geoPath(projectionI)
circleRadiusI = 8
scaleBar = {
//const bn = d3.geoBounds(line);
const p0 = projectionI.invert([0, 0]);
const p1 = projectionI.invert([wI / 2, 0]);
const d = p1[0] - p0[0];
const d10 = Math.pow(10, Math.floor(Math.log10(d)));
const d_ =
d10 * 8 <= d
? d10 * 8
: d10 * 6 <= d
? d10 * 6
: d10 * 5 <= d
? d10 * 5
: d10 * 3 <= d
? d10 * 3
: d10 * 2 <= d
? d10 * 2
: d10;
return {
size: ((wI / 2) * d_) / d,
label: d_ >= 1000 ? d_ / 1000 + " km" : d_ + " m"
};
}
geomsTJ = await d3.json(
//"https://raw.githubusercontent.com/eurostat/Nuts2json/master/pub/v2/2021/3035/03M/0.json"
"https://gisco-services.ec.europa.eu/distribution/v2/nuts/topojson/NUTS_RG_03M_2021_3035.json"
)
geomsGJ = {
let g = topojson.feature(geomsTJ, geomsTJ.objects["nutsrg"]);
g.features = g.features.filter((r) => r.properties.LEVL_CODE == 0);
g.features = g.features.filter(
(r) =>
r.id != "AL" &&
r.id != "IS" &&
r.id != "UK" &&
r.id != "TR" &&
r.id != "RS" &&
r.id != "CH" &&
r.id != "LI" &&
r.id != "NO" &&
r.id != "ME" &&
r.id != "MK"
);
return g;
}
geomsMap = {
return {
type: "FeatureCollection",
features: geomsGJ.features.filter((r) => (geo == "EU" ? true : r.id == geo))
};
}
cc = {
const o = geomsGJ.features.map((r) => r.id);
o.sort();
o.push("EU");
return o;
}
euWhere = {
const o = geomsGJ.features.map((r) => "CNTR_ID='" + r.id + "'");
return o.join(" OR ");
}
cn = {
const d = new Intl.DisplayNames(["en"], { type: "region" });
const out = {};
for (let c of cc) {
out[c] = d.of(c);
}
out.EL = "Greece";
return out; //d.of("FR");
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
