Public
Edited
Apr 26, 2022
4 stars
simulation = {
const out = d3
.forceSimulation(n2j.features)
.force(
"x",
d3.forceX().x((f) => projection(f.geometry.coordinates)[0])
)
.force(
"y",
d3.forceY().y((f) => projection(f.geometry.coordinates)[1])
)
.force(
"collide",
d3
.forceCollide()
.radius((f) => toRadius(+f.properties.ar) + collisionPadding)
);
//set initial position of the circles
for (const f of n2j.features) {
f.x = projection(f.geometry.coordinates)[0];
f.y = projection(f.geometry.coordinates)[1];
}
return out;
}
toRadius = function(area) {
return circleSize * 0.00007 * Math.sqrt(area);
}
projection = d3
.geoAzimuthalEqualArea()
.rotate([-10, -52])
.scale(700)
n2j = (await fetch(
`https://raw.githubusercontent.com/eurostat/Nuts2json/master/2016/4258/nutspt_${nutsLvl}.json`
)).json()
n2jrg = (await fetch(
`https://raw.githubusercontent.com/eurostat/Nuts2json/master/2016/4258/60M/0.json`
)).json()
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
