JSFiddle - React, Tailwind, and code Playground

HTML

<body>


</body>

CSS

.node {
  cursor: pointer;
}

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

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

.node circle-green {
  fill: #00ff00;
  stroke: steelblue;
  stroke-width: 3px;
}

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

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

.hover {
  background: #FFFFEF;
  width: 400px;
  height: 135px;
  padding: 10px;
  border: 1px black solid;
}

.hovertext {
  fill: red;
}

JavaScript

var treeData = [{
  "name": "Cycle 2016",
  "children": [{
    "name": "Document Mangement",
    "day": '',
    "children": [{
      "name": "Expected",
      "day": '',
      "children": [{
        "name": "Not Submitted",
        "assignTo": '',
        "day": ''
      }, {
        "name": "Submitted for Approval",
        "assignTo": 'Phogat, Akhil',
        "day": ''
      }, {
        "name": "Approved",
        "assignTo": 'Phogat, Akhil',
        "day": ''
      }, {
        "name": "Rejected",
        "assignTo": 'Srivastava, Abhishek',
        "day": ''
      }]
    }]
  }, {
    "name": "Data Management",
    "day": '',
    "children": [{
      "name": "Expected",
      "day": '',
      "children": [{
        "name": "Workstream1",
        "children": [{
          "name": "Not Submitted",
          "assignTo": '',
          "day": 2
        }, {
          "name": "Submitted for Approval",
          "assignTo": 'Singh, Amandeep',
          "day": 1
        }, {
          "name": "Approved",
          "assignTo": 'Srivastava, Abhishek',
          "day": ''
        }, {
          "name": "Rejected",
          "assignTo": 'Srivastava, Abhishek',
          "day": ''
        }]
      }, {
        "name": "Workstream2"
      }, {
        "name": "Workstream3"
      }]
    }]
  }, {
    "name": "Adjustments",
    "day": '',
    "children": [{
      "name": "Pending Approval",
      "assignTo": 'Singh, Amandeep',
      "day": 1
    }, {
      "name": "Rejected",
      "assignTo": 'Srivastava, Abhishek',
      "day": ''
    }, {
      "name": "Approved",
      "assignTo": 'Parikh, Nilay',
      "day": ''
    }]
  }]
}];


// ************** Generate the tree diagram	 *****************
var margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
  },
  width = 1200 - 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 =...