JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var w = 960,
    h = 500,
    nodes = [],
    node;

var vis = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

var force = d3.layout.force()
    .nodes(nodes)
    .links([])
    .size([w, h]);

force.on("tick", function(e) {
  vis.selectAll("g")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});

var counter = 0;

var looper = setInterval(function(){
  
  counter++;
  console.log("Counter is: " + counter);
  
   if (counter >= 5)
    {
        clearInterval(looper);
    }
  
  // Add a new random shape.
  nodes.push({
    size: Math.random() * 300 + 100
  });
  
  
  // Restart the layout.
  force.start();

  var groups = vis.selectAll("g")
      .data(nodes).enter()
      .append("g")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .call(force.drag);
    
    groups.append("path")
      .attr("d", d3.svg.symbol()
        .size(function(d) { return d.size; })
        .type(function(d) { return d.type; }))
      .style("fill", "steelblue")
      .style("stroke", "black")
      .style("stroke-width", "1.5px");
   
    groups.append("image")
       .attr("xlink:href", "https://github.com/favicon.ico")
           .attr("x", -18)
           .attr("y", -18)
           .attr("width", 26)
           .attr("height", 26)
           .style("stroke", "black")
           .style("stroke-width", "1px");

}, 1000);