Published
Edited
Feb 8, 2019
6 forks
Importers
45 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
svg = {
const svg = d3.select(DOM.svg(width, height))
const g = svg.append("g").attr("transform", `translate(${width/2},${height/2})`)
////////////////////////////////////////////////////////////
//////////////////////// Draw nodes ////////////////////////
////////////////////////////////////////////////////////////
const node = g.append("g")
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", d => d.r)
.style("fill", d => color(d.cluster))

////////////////////////////////////////////////////////////
////////////////////// Run simulation //////////////////////
////////////////////////////////////////////////////////////
const simulation = d3.forceSimulation()
// .force("collide", d3.forceCollide().radius(d => d.r + 1) .strength(0.8)) //Original collide function
//Instead use the custom collide function
.force("collide", forceClusterCollision()
.radius(d => d.r + 1)
.strength(0.8)
.clusterPadding(10) //new setting - important, the cluster id of the data has to be named "cluster"
)
.force("x", d3.forceX().x(d => d.focusX).strength(0.2))
.force("y", d3.forceY().y(d => d.focusY).strength(0.2))
simulation
.nodes(nodes)
.on("tick", ticked)
function ticked() {
node
.attr("cx", d => d.x)
.attr("cy", d => d.y)
}//function ticked
return svg.node()
}//svg
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more