JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    <div class="graph">
        <script>
        </script>
    </div>
</body>

CSS

.legend {
              font-family: sans-serif;
              font-size: 12px;
            }

            .legendText {
              background-color: #ccc;
            }

JavaScript

var graphData = {
nodes: [
  {
  	id:0,
  	name:"Plotinus"
  },
  {
  	id:1,
  	name:"Iamblichus"
  },
  {
  	id:2,
  	name:"Porphyry"
  }
],
links: [
  {
    relationship:"Teacher/student",
    source:0,
    target:1
  },
  {
    relationship:"Enemies",
    source:0,
    target:2
  },
  {
    relationship:"Family",
    source:1,
    target:2
  }
 ]
};

	
var linkColor = d3.scale.category10(); //Sets the color for links

var drag = d3.behavior.drag()
    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); })
    .on("drag", function(d) {
		d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
	});

var w = 300,
	h = 300;

var vis = d3.select(".graph")
	.append("svg:svg")
	.attr("width", w)
	.attr("height", h)
	.attr("pointer-events", "all")
	.append('svg:g')
	.call(d3.behavior.zoom().on("zoom", redraw))
	.append('svg:g');

vis.append('svg:rect')
    .attr('width', w)
    .attr('height', h)
    .attr('fill', 'rgba(1,1,1,0)');

function redraw() {
	vis.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); }	
	
	var force = d3.layout.force()
		.gravity(.6)
		.charge(-600)
		.linkDistance( 60 )
		.size([w, h]);
	
	var svg = d3.select(".text").append("svg")
		.attr("width", w)
		.attr("height", h);
		
		var link = vis.selectAll("line")
			.data(graphData.links)
			.enter().append("line")
			.style("stroke", function(d) { return linkColor(d.relationship); })
        	.style("stroke-width", 1)
        	.attr("class", "connector");

		var node = vis.selectAll("g.node")
			.data(graphData.nodes)
			.enter().append("svg:g")
			.attr("class","node")
			.call(force.drag);
			
			node.append("svg:circle")
		      .attr("r", 10) //Adjusts size of nodes' radius
		      .style("fill", "#ccc"); 
				
			node.append("svg:text")
				.attr("text-anchor", "middle") 
				.attr("fill","black")
				.style("pointer-events", "none") 
				.attr("font-size", "9px")
				.attr("font-weight",...