JSFiddle - React, Tailwind, and code Playground

HTML

<script src="/sites/default/d3_files/d3.v3.js"></script><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="network">&nbsp;</div>

CSS

.link {
  stroke: lightgrey;
  stroke-width: 1.5px;
}

.node circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}

text {
  font: 12px sans-serif;
  pointer-events: none;
}

svg {
/*  background: #fffdf7; */
  background-color: darkgrey; 
}

JavaScript

var width = 920,
    height = 500,
    n = 100;

// these variables can be used to adjust the position of the network 
var xadj = -50, 
    yadj = 0;

function prettyAlert(p_message, p_title) {
  p_title = p_title || "";
  $(p_message).dialog({
       title: p_title,
       width:300,
       height:300,
       resizable: false,
       modal : true,
       close: function(ev, ui) {
         $(this).remove(); 
         }
    })
       .css("background", "Azure");
};

function clickAlert (d) {
    var message="<div>"+ d.desc + "<br /><a href='" + d.path + "' target=_blank><u> Read more </u></a></div>";
    prettyAlert(message, d.title);
  };

var categoryImage = {
    "Regional Group": "/sites/default/files/images/bullet_regional.gif",
    "Volunteer": "/sites/default/files/images/bullet_volunteer.gif",
    "Community Group": "/sites/default/files/images/bullet_community.gif"};

var categoryColour = {
    "Community Group": "red",
    "Volunteer": "blue",
    "Regional Group": "green"};

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

d3.json("/relationships?nocache=" + (new Date()).getTime(),function(error,members){
       var links=members.organizations.map(function(members) {
          return members.member;
          });

   var nodes = {};

   links.forEach(function(link) {
      link.source = nodes[link.xsource] || (nodes[link.xsource] = {source: link.xsource, name: link.xsource, category: link.categorysource, path: link.pathsource, desc: link.descsource, title: link.titlesource});
      link.target = nodes[link.xtarget] || (nodes[link.xtarget] = {target: link.xtarget, name: link.xtarget, category: link.categorytarget, path: link.pathtarget, desc: link.desctarget, title: link.titletarget});
    });

  force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .charge(-120)
    .linkDistance(function() {return (Math.random() * 200) + 100;})
   ...