chart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
let circles = update(svg, nodes)
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("left", isolate(d3.forceX(width / 2.4).strength(1), d => d.band === 1))
.force("center", isolate(d3.forceX(width / 2).strength(1), d => d.band === 2))
.force("right", isolate(d3.forceX(width / 1.6 ).strength(1), d => d.band === 3))
.force('y', d3.forceY(height/2).strength(defaults.YFORCE_STRENGTH))
simulation.on('tick', ticked)
simulation.velocityDecay(defaults.VELOCITY_DECAY).alpha(defaults.ALPHA).restart()
nodes.forEach(d=>{
d.band = randomIntFromInterval(1,3)
})
setTimeout(function(){
simulation.nodes(nodes)
simulation.on('tick', ticked)
simulation.velocityDecay(defaults.VELOCITY_DECAY).alpha(defaults.ALPHA).restart()
}, 1000)
function ticked() {
circles
.attr('cx', (d) => d.x)
.attr('cy', (d) => d.y)
}
return svg.node();
}
function isolate(force, filter) {
let initialize = force.initialize;
force.initialize = function() { initialize.call(force, nodes.filter(filter)); };
return force;
}
nodes = getData(300, d3.range(1,4), null, defaults.RADIUS)
height = 500
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.
