JSFiddle - React, Tailwind, and code Playground

by nhoughto5

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

CSS

.Chip{
        fill: red;
        stroke: black;
        stroke-width: 2px;
    }
    .Abstraction{
        fill: orange;
        stroke: black;
        stroke-width: 2px;
    }
    .Properties{
        fill: lightgreen;
        stroke: black;
        stroke-width: 2px;
    }
    .Location{
        fill: yellow;
        stroke: black;
        stroke-width: 2px;
    }
    path.link {
	  fill: none;
	  stroke: #000;
	  stroke-width: 3px;
	  cursor: default;
	}

	.circle{
		fill: transparent;
		stroke : black;
		stroke-width: 2px;
	}

JavaScript

var width = 960, height = 500, colors = d3.scale.category10();
        var svg = null, force = null;
        var circle = null, path = null;
        var nodes = null, links = null;
        var nodesArray = null, linkArray = null;
		var count = 0;
		var element = "body"; var numEdges = 3, numNodes = 12;
		var i = 0; var L = 40, r = 12, lineLimit = 10;
		var d = 2 * r + L;
		var R = d;
		var m = width / 2;
		var X, Y, radius = 12;
		var count = 4;
		var numinCircle = numNodes - count - 1;
		var centX = 0, centY = 0;
		var markerWidth = 6,
        markerHeight = 4,
        refX = radius + (markerWidth) + 1,
        refY = 0;
		
		svg = d3.selectAll(element).append('svg').attr('width', width).attr('height', height);
			
		svg.append('svg:defs').append('svg:marker')
			.attr("id", "arrow")
			.attr("viewBox", "0 -5 10 10")
			.attr("refX", refX)
			.attr("refY", refY)
			.attr("markerWidth", markerWidth)
			.attr("markerHeight", markerHeight)
			.attr("orient", "auto")
			.append("svg:path")
			.attr("d", "M0,-5 L10,0L0,5").attr('fill', "#000");
		
		svg.append('svg:defs').append('svg:marker')
			.attr("id", "arrow2")
			.attr("viewBox", "0 -5 10 10")
			.attr("refX", 10)
			.attr("refY", 0)
			.attr("markerWidth", markerWidth)
			.attr("markerHeight", markerHeight)
			.attr("orient", "auto")
			.append("svg:path")
			.attr("d", "M0,-5 L10,0L0,5").attr('fill', "#000");
			
		var radiusCircle = 0.5 * (radius * numinCircle);
		//console.log(radiusCircle)
		var W = 0;
		var maxX = 0;
		nodes = d3.range(numNodes).map(function () {
			if(i > count){
				X = centX + (radiusCircle * Math.cos((2 * W * Math.PI) / numinCircle));
				Y = centY + (radiusCircle * Math.sin((2 * W * Math.PI) / numinCircle));
				//console.log("Position " + (i) +": " + X + " " + Y);
				W++;
			} 
			else{
				X = m - (R / 2) + (i * d) - 250;
				if(X > maxX) {
					maxX = X;
				}
				Y = (height) / 2;
				//console.log("Place " + (i) +": " + X);
				if(i == count){
					centX = maxX;
					centY = Y...