Maps and Chartjunk for @nprapps
chart = {
replay;
const context = DOM.context2d(width, height);
const nodes = radii.map(r => ({r}));
const simulation = d3.forceSimulation(nodes)
.velocityDecay(0.37)
.force("x", d3.forceX().strength(0.02))
.force("y", d3.forceY().strength(0.02))
.force("collide", d3.forceCollide().radius(d => d.r + 0.5).iterations(2))
.on("tick", ticked);
invalidation.then(() => simulation.stop());
function ticked() {
context.clearRect(0, 0, width, height);
context.save();
context.translate(width / 2, height / 2);
context.beginPath();
for (const d of nodes) {
context.moveTo(d.x + d.r, d.y);
context.arc(d.x, d.y, d.r, 0, 2 * Math.PI);
}
context.fillStyle = "#000";
context.fill();
context.restore();
}
return context.canvas;
}
radii = Array.from({length: 6000}, d3.randomUniform(0.5, 3))
height = width
d3 = require("d3@6")
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.
