JSFiddle - React, Tailwind, and code Playground

by nhoughto5

HTML

<body>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></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;
	}

	#licensing {
	  fill: green;
	}

	.link.licensing {
	  stroke: green;
	}

	.link.resolved {
	  stroke-dasharray: 0,2 1;
	}
	path.link.selected {
	  stroke-dasharray: 10,2;
	}

	path.link.dragline {
	  pointer-events: none;
	}

	path.link.hidden {
	  stroke-width: 0;
	}

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 = 10;
var i = 0; var L = 60, r = 12, lineLimit = 10;
var d = 2 * r + L;
var R = (count - 1) * d;
var m = width / 2;
var X, Y, radius = 12;

var markerWidth = 6,
    markerHeight = 6,
    //refX = 2*radius,
    refY = 0,
    refX = radius + (markerWidth),
    drSub = radius + refY;

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");

nodes = d3.range(numNodes).map(function () {
    X = m - (R / 2) + (i * d)-250;
    if(i > 5) Y = 2*(height) / 3;
    else Y = (height) / 3;
    ++i;
    return {
        x: X,
        y: Y,
        fx: X,
        fy: Y,
        id: i-1,
        reflexive: true,
        r: 12
    };           
});
var clone = nodes;
for (var i = 0; i < numNodes; ++i) {
    d3.select(element).append("h3").text("Node " + i + ": " + nodes[i].id);
}

i = 0;
links = d3.range(numEdges).map(function () {
    i++;
    return {
        //
        source: nodes[i],
        target: nodes[i+1],
        left: false,
        right: true,
        direct: true
    }
});

for (var i = 0; i < numEdges; ++i) {
    d3.select(element).append("h3").text("Source: " + links[i].source.id + " Target: " + links[i].target.id);
}
links.push({source: nodes[1], target: nodes[3], left: false, right: true, direct: false});
// add the links and the arrows
var path = svg.append("svg:g").selectAll("path").data(links).enter().append("svg:path").attr("class",...