D3 Examples - force layout class

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    const width = 960,
          height = 500;
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
​
    var color = d3.scaleOrdinal(d3.schemeCategory10);
    
    d3.json('miserables.json', data => {
      console.log(data);
      
      var lines = svg.selectAll('line')
        .data(data.links)
        .enter().append('line')
        .attr('stroke', '#999');
​
      var g = svg.selectAll('g')
        .data(data.nodes, d => d.id)
        .enter().append('g');
      var circles = g.append('circle')
        .attr('fill', d => color(d.group))
        .attr('r', 10).attr('opacity', 0.5);
      var simulation = d3.forceSimulation(data.nodes)
        .force('center', d3.forceCenter(width / 2, height / 2))
        .force('repulse', d3.forceManyBody())
        .force('link', d3.forceLink(data.links).id(d => d.id))
        .on("tick", ticked);
      
      
      function ticked(){
        circles.attr('cx', d => d.x)
          .attr('cy', d => d.y);
        lines.attr('x1', d => d.source.x).attr('x2', d=> d.target.x)
          .attr('y1', d => d.source.y).attr('y2', d=> d.target.y);
      }
    })
    
    
​
  </script>
</body>
​
    