chart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const centers = [width / 2.4, width / 2, width / 1.6]
const duration = 4
const foci = 1
let circles = update(svg, nodes)
nodes.forEach(d=>{
d.targetX = centers[d.band-1]
d.targetY = height/2
})
let simulation = d3.forceSimulation()
.nodes(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))
simulation.on('tick', ticked)
simulation.velocityDecay(defaults.VELOCITY_DECAY).alpha(defaults.ALPHA).restart()
function ticked() {
circles
.attr('cx', (d) => d.x)
.attr('cy', (d) => d.y)
}
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))),
targetX: centers[foci-1],
targetY : height/2,
band: foci,
radius: defaults.RADIUS
});
}
setTimeout(function(){
let nodesAll = nodes.concat(nodesToAdd)
circles = update(svg, nodesAll)
simulation.nodes(nodesAll)
simulation.on('tick', ticked)
simulation.alpha(1).restart()
}, 1000)
return svg.node();
}
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.
