D3 Examples - Force Layout

xxxxxxxxxx
 
<!doctype html>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
</body>
<script>
  
d3.select("body").append("svg").attr("width",1000).attr("height",1000);
​
var colorScale = d3.scaleOrdinal().range(["red","green","blue"]);
​
var sampleData = d3.range(100).map((d,i) => ({r: 50 - i * .5 }));
​
var manyBody = d3.forceManyBody().strength(10)
​
var center = d3.forceCenter().x(250).y(250)
​
var collision = d3.forceCollide(d => d.r)
​
var force = d3.forceSimulation()
    .force("charge", manyBody)
    .force("center", center)
    .force("collision", collision)
    .nodes(sampleData)
    .on("tick", updateNetwork)
​
function updateNetwork() {
    d3.selectAll("circle")
        .attr("cx", d => d.x)
        .attr("cy", d => d.y)
}
​
d3.select("svg")
    .selectAll("circle").data(sampleData).enter().append("circle")
    .style("fill", (d,i) => colorScale(i))
    .attr("r", d => d.r)
</script>
    