JSFiddle - React, Tailwind, and code Playground

by dirkcuys

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg></svg>

JavaScript

var data = [
    {x:0, y:10, r:10},
    {x:10, y:0, r:15},
    {x:10, y:0, r:7},
    {x:10, y:0, r:5},
    {x:10, y:0, r:9},
    {x:10, y:0, r:5},
    {x:10, y:0, r:5},
    {x:0, y:10, r:10},
    {x:10, y:0, r:15},
    {x:10, y:0, r:7},
    {x:10, y:0, r:5},
    {x:10, y:0, r:9},
    {x:10, y:0, r:5},
    {x:10, y:0, r:5},
    {x:10, y:10, r:2}
];

var node_data = [
    {x:0, y:10, r:10},
    {x:10, y:0, r:15},
    {x:10, y:0, r:5},
    {x:10, y:0, r:9},
    {x:10, y:0, r:5},
    {x:10, y:0, r:7}
];

/*
    index - the zero-based index of the node within the nodes array.
    x - the x-coordinate of the current node position.
    y - the y-coordinate of the current node position.
    px - the x-coordinate of the previous node position.
    py - the y-coordinate of the previous node position.
    fixed - a boolean indicating whether node position is locked.
    weight - the node weight; the number of associated links.
*/

var width = 400, height = 400;

var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height);

var nodes = svg.selectAll("circle").data(node_data);

nodes.enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 0)
    .transition()
    .duration(1000)
    .attr("r", function(d) { return d.r; });

nodes.exit().remove();

var force = d3.layout.force()
    .nodes(node_data)
    .charge(function(d) { return -1.5*d.r; })
    .links([])
    .gravity(0)
    .size([width/2.0, height/2.0]);

force.on("tick", function(e) {
  // Push nodes toward their designated focus.
  var k = .1 * e.alpha;
  node_data.forEach(function(o, i) {
    o.y += (100 - o.y) * k;
    o.x += (100 - o.x) * k;
  });

  svg.selectAll("circle")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
});

force.start()

setInterval(function(){
  if (data.length > 0){
    node_data.push(data.pop());
  }
  force.start();
 ...