JSFiddle - React, Tailwind, and code Playground

HTML

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

</script>
</body>
</html>

CSS

path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

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

text {
  fill: #000;
  font: 10px sans-serif;
  pointer-events: none;
}

JavaScript

var systems = [ {"id":1,"name":"System A"},{"id":2,"name":"System B"},{"id":3,"name":"System C"},{"id":4,"name":"System D"},{"id":5,"name":"System E"},{"id":6,"name":"System F"},{"id":7,"name":"System G"},{"id":8,"name":"System H"},{"id":9,"name":"System I"},{"id":10,"name":"System J"},{"id":11,"name":"System K"}];

var links = [ {"source": 5, "target": 1} ,{"source": 6, "target": 1} ,{"source": 10, "target": 1} ,{"source": 3, "target": 2} ,{"source": 6, "target": 2} ,{"source": 7, "target": 2} ,{"source": 9, "target": 2} ,{"source": 2, "target": 3} ,{"source": 5, "target": 3} ,{"source": 10, "target": 3} ,{"source": 1, "target": 4} ,{"source": 5, "target": 4} ,{"source": 10, "target": 4} ,{"source": 4, "target": 6} ,{"source": 9, "target": 6} ,{"source": 9, "target": 8} ,{"source": 11, "target": 8} ,{"source": 4, "target": 9} ,{"source": 9, "target": 10} ,{"source": 8, "target": 11} ];

var width = 960,
    height = 500;
	
var nodes=systems;	

links.forEach(function(d){
	if (typeof d.source== "number"){d.source=nodes[d.source-1];}
	if (typeof d.target=="number"){d.target=nodes[d.target-1];}
});

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

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

// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])
  .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", "link")
    .attr("marker-end", "url(#end)")
	.attr("marker-start", "url(#end)");

// define the...