JSFiddle - React, Tailwind, and code Playground

by Shital Agarwal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>

JavaScript

var width = 960,
    height = 500;

var nodes = [];

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

var force = d3.layout.force()
    .charge(-20)
    .size([width, height])
    .nodes(nodes)
    .on("tick", tick)
    .start();

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

var interval = setInterval(function() {
  var d = {
    x: width / 2 + 2 * Math.random() - 1,
    y: height / 2 + 2 * Math.random() - 1
  };

  svg.append("circle")
      .data([d])
      .attr("r", 1)
    .transition()
      .ease(Math.sqrt)
      .attr("r", 10);

  if (nodes.push(d) > 300) clearInterval(interval);
  force.start();
}, 30);