JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Force-Directed Layout</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
  </head>
  <body>

  </body>

CSS

circle {
  stroke-width: 1.5px;
}

line {
  stroke: #999;
}

JavaScript

var w = 660,
    h = 600,
    r = 12,
    fill = d3.scale.category20();

var test="";

var force = d3.layout.force().charge(-120).linkDistance(150).size([w, h]);

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


d3.json("http://bl.ocks.org/d/1129492/readme.json", function(json) {
    var link = svg.selectAll("line").data(json.links).enter().append("svg:line")
        .style("stroke-width", function(d) { return Math.sqrt(d.value);})
      .style("stroke-opacity", function(d) { return d.value/10;})
        ;
    
    var node = svg.selectAll("circle").data(json.nodes).enter().append("svg:circle").attr("r", r - .75).style("fill", function(d) {
        return fill(d.group);
    }).style("stroke", function(d) {
        return d3.rgb(fill(d.group)).darker();
    }).call(force.drag).on("mouseover", fade(.1, "")).on("mouseout", fade(function(d) { return d.value/10;}, "none"));;
 
      var circles = svg.selectAll("circle").each(function(d) {
        var r = "c" + Math.round(Math.random() * 1000000);
        d3.select(this).attr("class", r);
        svg.append("svg:text").attr("class", r).attr("x", d.x+5).attr("y", d.y+5).style("font-size", "18 px").style("fill", "#5C5C5C").style("pointer-events", 'none').text(function() {
            return d.name;
        }).style("display", "none");
    });  
    
    force.nodes(json.nodes).links(json.links).on("tick", tick).start();

    var linkedByIndex = {};
    json.links.forEach(function(d) {
        linkedByIndex[d.source.index + "," + d.target.index] = 1;
    });


    
    function isConnected(a, b) {
        return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
    }

    function tick() {
        node.attr("cx", function(d) {
            return d.x = Math.max(r, Math.min(w - r, d.x));
        }).attr("cy", function(d) {
            return d.y = Math.max(r, Math.min(h - r, d.y));
        });
   
        link.attr("x1", function(d) {
 ...