{
const width = 960,
height = 600;
const nodes = d3.range(200).map(() => ({radius: Math.random() * 15 + 5})),
root = nodes[0],
color = d3.scaleOrdinal(d3.schemeTableau10);
const svg = d3.select(DOM.svg(width, height));
root.radius = 0;
root.fixed = true;
const simulation = d3.forceSimulation(nodes)
.force("charge", d3.forceManyBody().strength((d, i) => { return i ? 0 : -100; }))
.force("center", d3.forceCenter(width / 2, height / 2))
.force("collide", forceCollide());
svg.selectAll("circle")
.data(nodes.slice(1))
.enter().append("circle")
.attr("r", d => d.radius)
.style("fill", (d, i) => { return color(i % 3); });
simulation.on("tick", e => {
svg.selectAll("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
svg.on("mousemove", function() {
const p1 = d3.mouse(this);
root.fx = p1[0];
root.fy = p1[1];
simulation.alpha(0.9).restart();
});
return svg.node();
}