JSFiddle - React, Tailwind, and code Playground

by dzorz

HTML

<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

CSS

.link10 { stroke: #ccc; stroke-width: 3px; stroke-dasharray: 3, 3; }
	.link1 { stroke: #000; stroke-width: 3px;}
    .nodetext { pointer-events: none; font: 10px sans-serif; }
    
    .node.type1 {
      fill:brown;
    }
    .node.type2 {
      fill:#337147;
    }
    .node.type3 {
      fill:blue;
    }
    .node.type4 {
      fill:red;
    }

	.node.type5 {
      	fill:#1BC9E0;
    }
	
	.node.type6 {
      	fill:#E01B98;
    }
	
	image.circle {
		cursor:pointer;
	}

JavaScript

var data = {"nodes":[
							{"name":"Action 4", "type":5, "slug": "", "value":265000},
							{"name":"Action 5", "type":6, "slug": "", "value":23000},
							{"name":"Action 3", "type":4, "slug": "", "value":115000},
							{"name":"Yahoo", "type":1, "slug": "www.yahoo.com", "entity":"company"},
							{"name":"Google", "type":1, "slug": "www.google.com", "entity":"company"},
							{"name":"Action 1", "type":2, "slug": "",},
							{"name":"Action 2", "type":3, "slug": "",},
							{"name":"Bing", "type":1, "slug": "www.bing.com", "entity":"company"},
							{"name":"Yandex", "type":1, "slug": "www.yandex.com)", "entity":"company"}
						], 
				"links":[
							{"source":0,"target":3,"value":10},
							{"source":4,"target":3,"value":1},
							{"source":1,"target":7,"value":10},
							{"source":2,"target":4,"value":10},
							{"source":4,"target":7,"value":1},
							{"source":4,"target":5,"value":10},
							{"source":4,"target":6,"value":10},
							{"source":8,"target":4,"value":1}
							]
				   }    
			
			
			
		var w = 560,
			h = 500,
			radius = d3.scale.log().domain([0, 312000]).range(["10", "50"]);
		
		var vis = d3.select("body").append("svg:svg")
			.attr("width", w)
			.attr("height", h);
			
			vis.append("defs").append("marker")
			.attr("id", "arrowhead")
			.attr("refX", 17 + 3) /*must be smarter way to calculate shift*/
			.attr("refY", 2)
			.attr("markerWidth", 6)
			.attr("markerHeight", 4)
			.attr("orient", "auto")
			.append("path")
				.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
		
		//d3.json(data, function(json) {
			var force = self.force = d3.layout.force()
				.nodes(data.nodes)
				.links(data.links)
				.distance(100)
				.charge(-1000)
				.size([w, h])
				.start();
		
		
		
			var link = vis.selectAll("line.link")
				.data(data.links)
				.enter().append("svg:line")
				.attr("class", function (d) { return "link" + d.value +""; })
				.attr("x1", function(d) { return d.source.x;...