JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.node circle {
	  fill: #fff;
	  stroke: steelblue;
	  stroke-width: 3px;
	}

	.node text { font: 12px sans-serif; }

	.link {
	  fill: none;
	  stroke: #ccc;
	  stroke-width: 2px;
	}

JavaScript

var margin = {top: 20, right: 120, bottom: 20, left: 120},
	width = 960 - margin.right - margin.left,
	height = 500 - margin.top - margin.bottom;
	
var i = 0;

var tree = d3.layout.tree()
	.size([height, width]);

var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
	.attr("width", width + margin.right + margin.left)
	.attr("height", height + margin.top + margin.bottom)
  .append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	var treeData = [
	{
		"name" : "Cherry Tree Lodge",
		"parent" : null,
		"children": [
			{
				"name" : "Raymond Reddington",
				"parent" : "Cherry Tree Lodge",
				"children" : [
					{
						"name" : "Debe Zuma",
						"parent" : "Raymond Reddington",
					},
					{
						"name" : "Tom Keen",
						"parent" : "Raymond Reddington",
					},
					{
						"name" : "Aram Mojtabai",
						"parent" : "Raymond Reddington",
					}
				]
			},
			{
				"name" : "Elizabeth Keen",
				"parent" : "Cherry Tree Lodge",
				"children" : [
					{
						"name" : "Samar Navabi",
						"parent" : "Elizabeth Keen",
					},
					{
						"name" : "Meera Malik",
						"parent" : "Elizabeth Keen",
					},
					{
						"name" : "Mr. Kaplan",
						"parent" : "Elizabeth Keen",
					},
					{
						"name" : "Reven Wright",
						"parent" : "Elizabeth Keen",
					}
				]
			},
			{
				"name" : "Donald Ressler",
				"parent" : "Cherry Tree Lodge",
				"children" : [
					{
						"name" : "Matius Solomon",
						"parent" : "Donald Ressler",
						"size" : 3938
					},
					{
						"name" : "Peter Kotsiopulos",
						"parent" : "Donal Ressler",
						"size" : 3938
					},
					{
						"name" : "Tom Keen",
						"parent" : "Raymond Reddington",
						"size" : 3938
					},
					{
						"name" : "Aram Mojtabai",
						"parent" : "Raymond Reddington",
						"size" : 3938
					}
				]
			},
			{
				"name" : "Harold Cooper",
				"parent" : "Cherry Tree...