Interested in data visualisation, maps, JavasScript, and geology
Plot.plot({
width: 2000,
height: 1100,
x: {
label: "> degrees longitude",
domain: [3.4, 7.2]
},
y: {
domain: [0.01, 0.99],
ticks: 0
},
color: {
type: "categorical",
scheme: "tableau10"
},
marks: [
Plot.rectY(bigCitiesBounds, {
x1: "minLon",
x2: "maxLon",
fill: "#ccc",
fillOpacity: 0.2,
title: "city"
}),
Plot.dot(
wijkenClean,
Plot.dodgeY({
x: "lon",
r: "bevolking",
title: (d) => `Provincie ${d.provincie}
${d.gemeente} ${d.wijk}
${d.bevolking} inhabitants`,
fill: colorBy,
strokeWidth: 2,
anchor: "middle"
})
),
Plot.text(
wijkenClean,
Plot.dodgeY({
filter: (d) => d.bevolking > 25_000,
x: "lon",
r: "bevolking",
text: (d) => (d.bevolking / 1e3).toFixed() + "k",
fill: "black",
fontSize: 15,
anchor: "middle",
dy: 0.2
})
)
// Plot.text(quantiles, {
// y: "lat",
// x: 0.05,
// fontSize: 15,
// text: "text",
// fill: "grey",
// frameAnchor: "left"
// })
]
})
// this is a pretty rough, not-super-correct calculation
quantiles = {
const formatPercentage = d3.format(".0%");
const wijkenWestToEast = wijkenClean.sort((a, b) =>
d3.descending(a.lon, b.lon)
);
const cumulative = d3.cumsum(wijkenWestToEast, (d) => d.bevolking);
const quantiles = [0.1, 0.25, 0.5, 0.75, 0.9];
const indices = quantiles.map((n) => d3.quantileIndex(cumulative, n));
return indices.map((wijkIndex, i) => ({
lat: wijkenWestToEast[wijkIndex - 1].lat,
text: `${formatPercentage(1 - quantiles[i])} live east of here (aprox.)`,
wijkIndex: wijkIndex - 1
}));
}
// Don't know how to match these :(
leftOvers = centers.filter(
(d) => typeof d.bevolking === "undefined" && d.wijk !== "Groot water"
)
wijkenClean = centers.filter((d) => Boolean(d.bevolking))
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.
