JSFiddle - React, Tailwind, and code Playground

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":"","xval":"500","yval":"100"},
						{"name":"GGL", "full_name":"Google", "type":2, "slug": "www.google.com", "entity":"company", "img_hrefD":"", "img_hrefL":"","xval":"100","yval":"200"},
						{"name":"BNG", "full_name":"Bing", "type":2, "slug": "www.bing.com", "entity":"company", "img_hrefD":"", "img_hrefL":"","xval":"200","yval":"200"},
						{"name":"YDX", "full_name":"Yandex", "type":2, "slug": "www.yandex.com", "entity":"company", "img_hrefD":"", "img_hrefL":"","xval":"400","yval":"200"},
					
						
						{"name":"CEO", "prefix":"Mr.", "fst_name":"Jim", "snd_name":"Bean", "type":3, "slug": "", "entity":"employee","xval":"100","yval":"400"},
						{"name":"ATT", "prefix":"Ms.", "fst_name":"Jenna", "snd_name":"Jameson", "type":3, "slug": "", "entity":"employee","xval":"200","yval":"400"},
						{"name":"CTO", "prefix":"Mr.", "fst_name":"Lucky", "snd_name":"Luke", "type":3, "slug": "", "entity":"employee","xval":"300","yval":"400"},
						{"name":"CDO", "prefix":"Ms.", "fst_name":"Pamela", "snd_name":"Anderson", "type":3, "slug": "", "entity":"employee","xval":"300","yval":"500"},
						{"name":"CEO", "prefix":"Mr.", "fst_name":"Nacho", "snd_name":"Vidal", "type":3, "slug": "", "entity":"employee","xval":"500","yval":"500"},
					], 
			"links":[
						{"source":0,"target":1,"value":1,"distance":5},
						{"source":0,"target":2,"value":1,"distance":5},
						{"source":0,"target":3,"value":1,"distance":5},					
						
						{"source":4,"target":0,"value":1,"distance":6},
						{"source":5,"target":1,"value":1,"distance":6},
						{"source":6,"target":0,"value":1,"distance":6},
						{"source":7,"target":1,"value":1,"distance":6},
						{"source":8,"target":0,"value":1,"distance":6},
						{"source":7,"target":8,"value":1,"distance":6},
						]
			   }    
			
			
		var w = 560,
			h = 500,
			radius =...