Public
Edited
Feb 11, 2023
3 stars
Insert cell
Insert cell
{
const el = document.createElement('div');
const simulationPod = d3ForcePod()(el)
.width(width).height(500);

/*********** EDIT ME **********/

simulationPod.genNodes({
density: 0.00025, // nodes/px
radiusRange: [1, 8], // px
yRange: [0, 0], // px
velocityRange: [0, 1], // px/tick
velocityAngleRange: [90, 90] // 0=right, 90=down
});

simulationPod
.addForce(d3.forceBounce().radius(d => d.r)) // bounce
.addForce(d3.forceX().x(width/2).strength(0.002)); // vertical

/******************************/

// d3ForcePod: https://github.com/vasturiano/d3-force-pod

// Get inspired at https://github.com/vasturiano/d3-force-registry

return el;
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more