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: 2px; stroke-dasharray: 3, 3; }
.link1 { stroke: #000; stroke-width: 2px;}
.nodetext { pointer-events: none;}

.node.type1 {
  fill:#690011;
}
.node.type2 {
  fill:#BF0426;
}
.node.type3 {
  fill:#E5B96F;
}
.node.type4 {
  fill:#FFFFFF;
  stroke:#1695A3; 
  stroke-width: 3px;
}

.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":"YHO", "full_name":"Yahoo", "type":1, "slug": "www.yahoo.com", "entity":"company", "img_hrefD":"", "img_hrefL":""},
							{"name":"GGL", "full_name":"Google", "type":2, "slug": "www.google.com", "entity":"company", "img_hrefD":"", "img_hrefL":""},
							{"name":"BNG", "full_name":"Bing", "type":2, "slug": "www.bing.com", "entity":"company", "img_hrefD":"", "img_hrefL":""},
							{"name":"YDX", "full_name":"Yandex", "type":2, "slug": "www.yandex.com", "entity":"company", "img_hrefD":"", "img_hrefL":""},
							
							{"name":"Desc1", "type":4, "slug": "", "entity":"description"},
							{"name":"Desc2", "type":4, "slug": "", "entity":"description"},
							{"name":"Desc4", "type":4, "slug": "", "entity":"description"},
							
							{"name":"CEO", "prefix":"Mr.", "fst_name":"Jim", "snd_name":"Bean", "type":3, "slug": "", "entity":"employee"},
							{"name":"ATT", "prefix":"Ms.", "fst_name":"Jenna", "snd_name":"Jameson", "type":3, "slug": "", "entity":"employee"},
							{"name":"CTO", "prefix":"Mr.", "fst_name":"Lucky", "snd_name":"Luke", "type":3, "slug": "", "entity":"employee"},
							{"name":"CDO", "prefix":"Ms.", "fst_name":"Pamela", "snd_name":"Anderson", "type":3, "slug": "", "entity":"employee"},
							{"name":"CEO", "prefix":"Mr.", "fst_name":"Nacho", "snd_name":"Vidal", "type":3, "slug": "", "entity":"employee"},
						],...