chart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
cancelAnimationFrame(config.animReqId);
const centers = [width / 2.4, width / 2, width / 1.6]
const duration = 4
const foci = 1
nodes.forEach(d=>{
d.targetX = centers[d.band-1]
d.targetY = height/2
})
simulation
.nodes(nodes)
.stop()
for (let i = 0; i < 100; i++) {
simulation.tick();
}
update(svg, nodes)
let nodesToAdd = []
for (let i = 0; i < 100; i++) {
nodesToAdd.push({
id: nodes.length + i,
x: centers[foci-1] + (width * Math.sin(Math.random() * (2 * Math.PI))),
y: height/2 + (height * Math.cos(Math.random() * (2 * Math.PI))),
delay: Math.random() * (duration * 1000),
targetX: centers[foci-1],
targetY : height/2,
band: foci,
radius: defaults.RADIUS
});
}
config.animReqId = requestAnimationFrame((t) => animate(t, nodesToAdd, svg));
return svg.node();
}
function animate(time, nodesToAdd, svg) {
if (!config.startTime) {
config.startTime = time;
}
const progress = time - config.startTime;
const nodes = simulation.nodes()
update(svg, nodes, 'transition_by_default', {DURATION: 350})
const newNodes = [];
for (let i = 0; i < nodesToAdd.length; i++) {
const node = nodesToAdd[i];
if (node.delay < progress) {
newNodes.push(node)
nodesToAdd.splice(i, 1);
i--;
}
}
simulation.nodes(nodes.concat(newNodes))
.alpha(defaults.ALPHA)
.tick();
config.ticks++;
if (config.ticks < 500 || nodesToAdd.length > 0) {
config.animReqId = requestAnimationFrame((t) => animate(t, nodesToAdd, svg));
}
}
simulation = d3.forceSimulation()
.nodes([])
.force('charge', d3.forceManyBody().strength(defaults.FORCEMANYBODY_STRENGTH))
.force('collision', d3.forceCollide().radius(defaults.COLLISION_RADIUS).strength(defaults.COLLISION_STRENGTH))
.force('x', d3.forceX().strength(1).x(d => d.targetX))
.force('y', d3.forceY().strength(1).y(d => d.targetY))
.stop()
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.
