JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

    <title>Enterprise Collaboration Map</title>
	

  </head>
  <body>
	<select class="BU">
		<option value="a">A</option>
		<option value="b">B</option>
		<option value="c">C</option>
	</select>

CSS

path.link {
		  fill: none;
		  stroke: #666;
		  stroke-width: 1.5px;
		}

		marker#a {
		  fill: green;
		}
		path.link.a {
		  stroke: green;
		}
		circle.a {
		  fill: green;
		  stroke: #333;
		  stroke-width: 1.5px;
		}
		marker#b {
		  fill: blue;
		}
		path.link.b {
		  stroke: blue;
		}
		circle.b {
		  fill: blue;
		  stroke: #333;
		  stroke-width: 1.5px;
		}
		marker#c {
		  fill: orange;
		}
		path.link.c {
		  stroke: orange;
		}
		circle.c {
		  fill: orange;
		  stroke: #333;
		  stroke-width: 1.5px;
		}

		circle {
		  fill: #ccc;
		  stroke: #333;
		  stroke-width: 1.5px;
		}


		text {
		  font: 10px sans-serif;
		  pointer-events: none;
		}

		text.shadow {
		  stroke: #fff;
		  stroke-width: 3px;
		  stroke-opacity: .8;
		}

JavaScript

var links = [
		{source:"one",target:"two", type:"a", typeKBP:"a"},
		{source:"two",target:"three", type:"a", typeKBP:"a"},
		{source:"three",target:"four", type:"a", typeKBP:"a"},
		{source:"four",target:"five", type:"a", typeKBP:"b"},
		{source:"five",target:"six", type:"b", typeKBP:"b"},
		{source:"six",target:"seven", type:"b", typeKBP:"b"},
		{source:"seven",target:"eight", type:"b", typeKBP:"b"},
		{source:"eight",target:"nine", type:"b", typeKBP:"c"},
		{source:"nine",target:"ten", type:"c", typeKBP:"c"},
		{source:"ten",target:"one", type:"c", typeKBP:"a"},
		{source:"one",target:"three", type:"a", typeKBP:"a"},
		{source:"two",target:"four", type:"a", typeKBP:"a"},
		{source:"three",target:"five", type:"a", typeKBP:"b"},
		{source:"four",target:"six", type:"a", typeKBP:"b"},
		{source:"five",target:"seven", type:"b", typeKBP:"b"},
		{source:"six",target:"eight", type:"b", typeKBP:"b"},
		{source:"seven",target:"nine", type:"b", typeKBP:"c"},
		{source:"eight",target:"ten", type:"b", typeKBP:"c"},
		{source:"nine",target:"one", type:"c", typeKBP:"a"},
		{source:"ten",target:"two", type:"c", typeKBP:"a"},
		{source:"one",target:"four", type:"a", typeKBP:"a"},
		{source:"two",target:"five", type:"a", typeKBP:"b"},
		{source:"three",target:"six", type:"a", typeKBP:"b"},
		{source:"four",target:"seven", type:"a", typeKBP:"b"},
		{source:"five",target:"eight", type:"b", typeKBP:"b"},
		{source:"six",target:"nine", type:"b", typeKBP:"c"},
		{source:"seven",target:"ten", type:"b", typeKBP:"c"},
		{source:"eight",target:"one", type:"b", typeKBP:"a"},
		{source:"nine",target:"two", type:"c", typeKBP:"a"},
		{source:"ten",target:"three", type:"c", typeKBP:"a"}
		];

		var inputlinks=[];
		var nodes = {};

		inputlinks.push(links);
		// Compute the distinct nodes from the links.
		links.forEach(function(link) {
		  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, type:link.type});
		  link.target = nodes[link.target] ||...