Static force-directed graphForce-directed web workerForce-directed graph, canvasDisjoint force-directed graphForce-directed graphCollision detectionforceCenter.strengthsimulation.tickForce-directed latticeTemporal force-directed graphSticky Force LayoutForce layout phyllotaxis arrangementMobile patent suitsClustered BubblesBuild Your Own Graph!Modifying a Force-Directed GraphForce-directed treeForce-directed graph component
Collision Detection
chart = {
replay;
const context = DOM.context2d(width, height);
const nodes = radii.map(r => ({r}));
const simulation = d3.forceSimulation(nodes)
.velocityDecay(0.2)
.force("x", d3.forceX().strength(0.002))
.force("y", d3.forceY().strength(0.002))
.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 = "#ddd";
context.fill();
context.strokeStyle = "#333";
context.stroke();
context.restore();
}
return context.canvas;
}
radii = Array.from({length: 1000}, d3.randomUniform(4, 18))
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.
