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

@charset "utf-8";
/* CSS Document */

.link10 { stroke: #ccc; stroke-width: 3px; stroke-dasharray: 3, 3; }
.link1 { stroke: #000; stroke-width: 3px;}
.nodetext { pointer-events: none; font: 14px sans-serif; font-weight:bold;}

.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;
}

.fadein{
display:none;
font-size:20px;
}

.rectD{
background-color:#000000;
width:70px;
height:30px
}

.rectL{
background-color:#000000;
width:90px;
height:30px
}

JavaScript

var data = {"nodes":[
							{"name":"Action 1", "type":2, "slug": "", "entity":"employee" },
							{"name":"Action 2", "type":3, "slug": "", "entity":"employee" },
							{"name":"Action 4", "type":5, "slug": "", "value":265000, "entity":"employee"},
							{"name":"Action 5", "type":6, "slug": "", "value":23000, "entity":"employee"},
							{"name":"Action 3", "type":4, "slug": "", "value":115000, "entity":"employee"},
							{"name":"YHO", "full_name":"Yahoo", "type":1, "slug": "www.yahoo.com", "entity":"company", "img_hrefD":"http://img4host.net/upload/30143226522090da3be7a.jpg", "img_hrefL":"http://img4host.net/upload/30145118522095467b7e3.jpg"},
							{"name":"GGL", "full_name":"Google", "type":1, "slug": "www.google.com", "entity":"company", "img_hrefD":"http://img4host.net/upload/30143226522090da3be7a.jpg", "img_hrefL":"http://img4host.net/upload/30145118522095467b7e3.jpg" },
							{"name":"BNG", "full_name":"Bing", "type":1, "slug": "www.bing.com", "entity":"company", "img_hrefD":"http://img4host.net/upload/30143226522090da3be7a.jpg", "img_hrefL":"http://img4host.net/upload/30145118522095467b7e3.jpg" },
							{"name":"YDX", "full_name":"Yandex", "type":1, "slug": "", "entity":"company", "img_hrefD":"http://img4host.net/upload/30143226522090da3be7a.jpg", "img_hrefL":"http://img4host.net/upload/30145118522095467b7e3.jpg" }
						], 
				"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",...