D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
harrisoncramer
Full window
Github gist
Force Layout
Readme
<!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>
https://d3js.org/d3.v4.min.js