JSFiddle - React, Tailwind, and code Playground

by Richard

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<title>Tree Example</title>
<div id="treeviz"></div>

CSS

html,body{
    	height:100%;
    	margin:0;
    	overflow:hidden;
    }

    svg{
    	width:100%;
    	height:100%;
    }

    input[type="file"]{
    	position:fixed;
    	top:1em;
    	left:1em;
    }

	.node {
		cursor: pointer;
	}

	.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 treeData = [
  {
    "name": "Top Level",
    "value": "17.27624959301063",
    "type": "lightgrey",
    "level": "lightgrey",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "value": "17.27624959301063",
        "type": "lightgrey",
	    	"level": "lightgrey",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "value": "17.27624959301063",
            "type": "lightgrey",
    				"level": "lightgrey",
            "parent": "Level 2: A"
          },
          {
            "name": "Daughter of A",
            "value": "17.27624959301063",
            "type": "lightgrey",
    				"level": "lightgrey",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: B",
        "value": "17.27624959301063",
        "type": "lightgrey",
    		"level": "lightgrey",
        "parent": "Top Level"
      }
    ]
  }
];


// ************** Generate the tree diagram	 *****************
	var margin = {top: 20, right: 120, bottom: 20, left: 120},
		width = 650 - margin.right - margin.left,
		height = 500 - margin.top - margin.bottom;


	var i = 0,
		duration = 750,
        rectW = 60,
        rectH = 30;
        //root;

	var tree = d3.layout.tree()
        .separation(function separation(a,b) {
            return a.parent == b.parent ? 1 : 0.5;

        })
		.size([height, width]);


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


	var zoom = d3.behavior.zoom()
		.scaleExtent([0.1, 10])
		.on("zoom", zoomed);

	var drag = d3.behavior.drag()
		.origin(function(d) { return d; })
		.on("dragstart", dragstarted)
		.on("drag", dragged)
		.on("dragend", dragended);


	var svg = d3.select("#treeviz").append("svg")
		.attr("width", width + margin.right + margin.left)
		.attr("height", height + margin.top + margin.bottom)
		.call(zoom)
	    .append("g")
		.attr("transform", "translate(" +...