JSFiddle - React, Tailwind, and code Playground

by Nivaldo

CSS

.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",
    "parent": "null",
    "status": "red",
    "children": [
      {
        "name": "Level 2-A",
        "parent": "Top Level",
        "status": "red",
        "children": [
          {
            "name": "Legolas",
            "status": "red",
            "parent": "Level 2-A"
          },
          {
            "name": "Finegal",
            "status": "green",
            "parent": "Level 2-A"
          }
        ]
      },
      {
        "name": "Level 2-B",
        "status": "red",
        "parent": "Top Level",
        "children": [
          {
            "name": "Durin",
            "status": "red",
            "parent": "Level 2-B",
			"children": [
			  {
				"name": "Frodo",
				"status": "green",
				"parent": "Durin"
			  },
			  {
				"name": "Bilbo",
				"status": "red",
				"parent": "Durin"
			  }
			]            
          },
          {
            "name": "Balin",
            "status": "green",
            "parent": "Level 2-B",
			"children": [
			  {
				"name": "Merry",
				"status": "green",
				"parent": "Balin"
			  },
			  {
				"name": "Pipen",
				"status": "green",
				"parent": "Balin"
			  }
			]            
          }
        ]
      },
      {
        "name": "Level 2-C",
        "parent": "Top Level",
        "status": "green",
        "children": [
          {
            "name": "Gandalf",
            "status": "green",
            "parent": "Level 2-C"
          },
          {
            "name": "Sauruman",
            "status": "green",
            "parent": "Level 2-C"
          }
        ]
      },
    ]
  }
];


// ************** Generate the tree diagram	 *****************
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,
	duration = 750,
	root;

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

var diagonal = d3.svg.diagonal()
	.projection(function(d) {...