JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="ep-tree-diagram">

</div>

JavaScript

var diameter = 800;
var radius = 48;

var tree = d3.layout.tree()
	.size([360, diameter / 2 - 120])
	.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var svg = d3.select("#ep-tree-diagram")
	.append("svg")
	.attr("width", diameter)
	.attr("height", diameter)
	.append("g")
	.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

var root = {
	"group":"Hub",
	"name":"Attendee Engagement Profile",
	"children":[
		{"group":"Alfa","name":"Circle 1"},
		{"group":"Alfa","name":"Circle 2"},
		{"group":"Alfa","name":"Circle 3"},
		{"group":"Alfa","name":"Circle 4"},
		{"group":"Alfa","name":"Circle 5"},
		{"group":"Bravo","name":"Circle 6"},
		{"group":"Bravo","name":"Circle 7"},
		{"group":"Charlie","name":"Circle 8"},
		{"group":"Charlie","name":"Circle 9"},
		{"group":"Delta","name":"Circle 10"},
		{"group":"Delta","name":"Circle 11"},
		{"group":"Delta","name":"Circle 12"},
		{"group":"Bravo","name":"Circle 13"}
	]
}

var nodes = tree.nodes(root),
	links = tree.links(nodes);

var drag = d3.behavior.drag()
	.on("drag", function(d,i) {
  var translateCoords = d3.transform(d3.select(this).attr("transform"));
   	d.x = translateCoords.translate[0];
		d.y = translateCoords.translate[1];
		d.x += d3.event.dx
		d.y += d3.event.dy
		d3.select(this)
			.attr("transform", function(d,i){
				return "translate(" + d.x + "," + d.y + ")"
			})
	});

function color(d) {
	if(d._children){
		return "#95a5a6";
	}else{
		switch(d.group) {
			case 'Alfa':
				return "#B3E17F";
				break;
			case 'Bravo':
				return "#F9D055";
				break;
			case 'Charlie':
				return "#DE6675";
				break;
			case 'Delta':
				return "#d0d3e1";
				break;
			default:
				return "#f9f9f9";
		}
	}
}

var line = svg.selectAll('line')
	.data(links)
	.enter()
	.append('line')
	.attr("id", "asdf")
	.attr('stroke','#ccc');

line
	.attr('x1',function(d){ return d.source.y })
	.attr('y1',function(d){ return d.source.x/ 180 * Math.PI })
	.attr('x2',function(d){...