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 = 2
let circles = update(svg, nodes)
let iTimer
let frame = 0
nodes.forEach((d,i)=>{
if (i % 20 === 0) {
frame++;
}
d.targetX = centers[d.band-1]
d.targetY = height/2
d.frame = d.band === foci ? 0 : frame
})
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 t = 1
let timer = () => {
let nodesToMove = nodes.filter(d=>(d.frame === t))
if(nodesToMove.length === 0) clearInterval(iTimer);
nodesToMove.forEach(d=>{
nodes[d.index].targetX = centers[foci-1]
nodes[d.index].band = foci
//let n = nodes.find(el=>el.id === d.id)
//n.targetX = centers[foci-1]
//n.band = foci
})
console.log(nodes)
simulation.nodes(nodes).alpha(defaults.ALPHA).restart()
t += 1
}
iTimer = setInterval(timer, 400)
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.
