svg = {
const svg = d3.select(DOM.svg(width, height))
const g = svg.append("g");
////////////////////////////////////////////////////////////
//////////////////////// Draw nodes ////////////////////////
////////////////////////////////////////////////////////////
const node = g.append("g")
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", d => 10)
.style("fill", d => color(d.cluster))
////////////////////////////////////////////////////////////
////////////////////// Run simulation //////////////////////
////////////////////////////////////////////////////////////
const simulation = d3.forceSimulation()
.force("forceInABox",
forceInABox()
.strength(0.1) // Strength to cluster center
.template("force") // Either treemap or force
.groupBy("cluster") // Node attribute to group
.links([]) // If you have links you can also use them
.forceNodeSize(d => d.r + 3)
.size([width, height])
)
// You still need some collision or charge
.force("collide", d3.forceCollide().radius(d => d.r + 1) .strength(0.8)) //Original collide function
simulation
.nodes(nodes)
.on("tick", ticked)
for(let i = 0; i < 300; i ++) {
simulation.tick()
}
function ticked() {
node
.attr("cx", d => d.x)
.attr("cy", d => d.y)
}//function ticked
return svg.node()
}//svg
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.
