JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"></script>
<body>
    <div id="networkviz"></div>
</body>

JavaScript

var data = [{sender: "Hamlet", receiver: "King Lear"},
            {sender: "King Lear", receiver: "Othello"}];

var w = 600,
	h = 600;

var svg = d3.select("#networkviz")
			.append("svg")
			.attr("width", w)
			.attr("height", h);
		
var links = [];
var nodes = [];

var force = d3.layout.force()
					 .nodes(nodes)
					 .links(links)
					 .size([w, h])
					 .linkDistance(50)
					 .charge(-100)
					 .on("tick", tick);

svg.append("g").attr("class", "links");
svg.append("g").attr("class", "nodes");

var linkSVG = svg.select(".links").selectAll(".link"),
	nodeSVG = svg.select(".nodes").selectAll(".node");

handleData(data);
update();

// This is the server call
var interval = 1; // set the frequency of server calls (in seconds)
setInterval(function() {
	var currentDate = new Date();
	var beforeDate = new Date(currentDate.setSeconds(currentDate.getSeconds()-interval));
    currentDate = new Date();
    var newlinks = (currentDate.getSeconds()%2 == 0) ? [] : [{sender: currentDate.getTime()+"", receiver: ""}];
		// newlinks.php returns a JSON file with my new transactions (the one that happened between now and 5 seconds ago)
		if (newlinks.length != 0) { // If nothing happened, then I don't need to do anything, the graph will stay as it was
			// here I decide to add any new node and never remove any of the old ones
			// so eventually my graph will grow extra large, but that's up to you to decide what you want to do with your nodes
			// Adds a node to a randomly selected node
			var r = getRandomInt(0, nodes.length-1);
			newlinks[0].receiver = nodes[r].id;
			handleData(newlinks);
			update();
		}
}, interval*1000);

function update() {
	// enter, update and exit
	force.start();
	
	linkSVG = linkSVG.data(force.links(), function(d) { return d.source.id+"-"+d.target.id; });
	linkSVG.enter().append("line").attr("class", "link").attr("stroke", "#ccc").attr("stroke-width", 2);
	linkSVG.exit().remove();
	
	var r = d3.scale.sqrt().domain(d3.extent(force.nodes(),...