JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<p id='chart'>

CSS

svg{
    /*border: 1px solid black;*/
    border-radius: 50%;
    background: lightgray;
}

circle {
    stroke: #fff;
}

JavaScript

var data = {
      name: "layout",
      children: [
          { name: "AxisLayout", size: 6725 },
          { name: "BundledEdgeRouter", size: 3727 },
          { name: "CircleLayout", size: 9317 },
          { name: "CirclePackingLayout", "size": 12003 },
          { name: "DendrogramLayout", "size": 4853 },
          { name: "ForceDirectedLayout", "size": 8411 },
          { name: "IcicleTreeLayout", "size": 4864 },
          { name: "IndentedTreeLayout", "size": 3174 },
          { name: "Layout", "size": 7881 },
          { name: "NodeLinkTreeLayout", "size": 12870 },
          { name: "PieLayout", "size": 2728 },
          { name: "RadialTreeLayout", "size": 12348 },
          { name: "RandomLayout", "size": 870 },
          { name: "StackedAreaLayout", "size": 9121 },
          { name: "TreeMapLayout", "size": 9191 }
      ]
    };

    var margin = {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
    width = 300 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    var n = data.children.length,
        m = 1,
        padding = 6,
        radius = d3.scale.sqrt().range([0, 12]),
        color = d3.scale.category10().domain(d3.range(m)),
        x = d3.scale.ordinal().domain(d3.range(m)).rangePoints([0, width], 1);

    var nodes = d3.range(n).map(function () {
      var i = Math.floor(Math.random() * m), //color
          v = (i + 1) / m * -Math.log(Math.random()); //value
      return {
        radius: radius(v),
        color: color(i),
        cx: x(i),
        cy: height / 2,
      };

    });

    nodes.forEach(function (item, index) {
      item.radius = 20;
    });

    console.dir(nodes);

    var force = d3.layout.force()
        .nodes(nodes)
        .size([100, 400])
        .gravity(0)
        .charge(0)
        .on("tick", tick)
        .start();

    var drag = force.drag()
        .on("drag", dragmove);


    function dragmove(d) {
      if (d.py > 300) d.py = 300;
      if (d.py < 100)...