D3byEX 11.3: Repulsion

forked from d3byex's block: D3byEX 11.3: Repulsion

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="D3byEX 11.3">
    <meta charset="utf-8">
</head>
<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
        var data = {
          "nodes": [
            { "name": "Mike" },
            { "name": "Marcia" },
            { "name": "Chrissy" },
            { "name": "Selena" },
            { "name": "William" },
            { "name": "Mikael" },
            { "name": "Bleu" },
            { "name": "Tagg" },
            { "name": "Bob" },
            { "name": "Mona" },
            { "name": "Baby" }
          ],
          "edges": [
            { "source": 0, "target":  1 },
            { "source": 0, "target":  4 },
            { "source": 0, "target":  5 },
            { "source": 0, "target":  6 },
            { "source": 0, "target":  7 },
            { "source": 1, "target":  2 },
            { "source": 1, "target":  3 },
            { "source": 1, "target":  5 },
            { "source": 1, "target":  8 },
            { "source": 1, "target":  9 },
            { "source": 5, "target": 10 }
          ]
        };

var width = 960, height = 500;

/* var svg = d3.select('body').append('svg')
      .attr({
        width: width,
        height: height
      }); */
      
      var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
      
      var simulation = d3.forceSimulation(data.nodes)
      .force("charge", d3.forceManyBody().strength(-80))
      .force("link", d3.forceLink(data.edges).distance(100).strength(1).iterations(10))
      .force("x", d3.forceX())
      .force("y", d3.forceY())
      .stop();

// See https://github.com/d3/d3-force/blob/master/README.md#simulation_tick
    for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
      simulation.tick();
    }
      /*
      var force = d3.layout.force()
      .nodes(data.nodes)
      .links(data.edges)
      .size([width, height])
      .linkDistance(1)
      .charge(-4000)
      .start();
      */

var edges = svg.selectAll('line')
      .data(data.edges)
      .enter()
      .append('line')
      .style('stroke', '#ccc')
      .style('stroke-width', 1);

var colors = d3.scale.category20();
      var nodes = svg
      .selectAll('circle')
      .data(data.nodes)
      .enter()
      .append('circle')
      .attr('r', 10)
      .attr('fill', function (d, i) {
        return colors(i);
      });

edges.attr({
        x1: function (d) { return d.source.x; },
        y1: function (d) { return d.source.y; },
        x2: function (d) { return d.target.x; },
        y2: function (d) { return d.target.y; }
      });

nodes.attr('cx', function (d) { return d.x; })
        .attr('cy', function (d) { return d.y; });
    </script>
</body>
</html>

https://d3js.org/d3.v4.min.js