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 {
		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...