JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div id="container">
  <div class="svg" id="innercontainer"></div>
  <div id="tag"></div>
  <div class="filterControls">
  	<img id="controlsBtn" src="http://www.iconhot.com/icon/png/fresh-add/256/30-12.png" />
  </div>
  <div id="filterBox">
  	<div id="filterOptions">
  		<input class="filter_button" id="shortestTime" type="radio" name="timeline">Shortest Time</input><br>
    	<input class="filter_button" id="lowestCost" type="radio" name="timeline">Lowest Cost</input><br>
    	<input class="filter_button" id="highestPerformance" type="radio" name="timeline">Highest Performance</input><br><hr/>
    	<input class="filter_button" id="longestTime" type="radio" name="timeline">Longest Time</input><br>
    	<input class="filter_button" id="highestCost" type="radio" name="timeline">Highest Cost</input><br>
    	<input class="filter_button" id="lowestPerformance" type="radio" name="timeline">Lowest Performance</input><br><hr/>
    	<input class="filter_button" id="mostLikely" type="radio" name="timeline" checked="checked">Most Likely</input><br>
    	<input class="filter_button" id="mostImpactful" type="radio" name="timeline">Most Impactful</input><br>  
  	</div>
  </div> 
</div>

CSS

@charset "utf-8";
/* CSS Document */

    * {
      margin: 0;
      padding: 0;
  }
  body {
      background: #fff;
      font-family: 'Open-Sans',sans-serif;

  }

#container{
 /* margin: 0 auto;
  position: relative;
  /*width:800px;
  overflow: visible;*/
}

#innercontainer{
 /* margin: 20px;*/
}


  .svg {
    /*width:800px;
    height:400px;
    /*overflow: visible;
    position:absolute;*/
}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.3;
    shape-rendering: crispEdges;
}
.grid path {
      stroke-width: 0;
}


#tag {
  color: white;
  background: #FA283D;
  width: 150px;
  position: absolute;
  display: none;
  padding:3px 6px;
  margin-left: -80px;
  font-size: 11px;
}



#tag:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  width: 0;
  border-width: 10px;
  border-bottom-color: #FA283D;
  top: -20px;
}

#chart  g{
	width:75px;
	text-wrap:normal;
}

.filterControls{
	position:absolute;
	top: 20px;
	right: 20px;
	z-index: 30;
	
}

.filterControls img{
	height: 32px;
	width: 32px;
}

#filterBox{
	position:absolute;
	height: 0px;
	width: 0px;
	top:36px;
	right:46px;
	
}

#filterOptions{
	padding: 5px;
	z-index: 20;
	height:auto;
	width: 200px;
	background-color:#999;
	overflow: hidden;
	display:none;
}

JavaScript

//define data first
//data
var root = {
	"name": "Mobile EMP ",
	"invalidFilters": ["lowestCost","highestPerformance","highestCost","lowestPerformance"],
	"startYear": 2015,
	"data": [
  		{
    		"task": "Diesel Generator",
    		"component": "Primary Power",
			"id": "c89bcba7-df2f-43ee-9917-b17907a70684",
    		"startTime": "2015", 
    		"endTime": "2025",
			"time": 10,
			"probability": 0.2,
			"cost": "Unknown",
			"performance": "Unknown",
			"shortestTime": false,
			"lowestCost": false,
			"highestPerformance": false,
			"longestTime": false,
			"highestCost": false,
			"lowestPerformance": false,
			"mostLikely": false,
			"mostImpactful": false,
			"parents": []
		},

		{
    		"task": "Silver Oxide Battery",
    		"component": "Primary Power",
			"id": "d1155422-7ff3-43bd-9b4a-173f4045df4a",
    		"startTime": "2015", 
    		"endTime": "2023",
			"time": 8,
			"probability": 0.7,
			"cost": "Unknown",
			"performance": "Unknown",
			"shortestTime": true,
			"lowestCost": false,
			"highestPerformance": false,
			"longestTime": false,
			"highestCost": false,
			"lowestPerformance": false,
			"mostLikely": false,
			"mostImpactful": false,
			"parents": []
		},

		{
    		"task": "AC/DC, DC/DC Converters",
    		"component": "Primary Power",
			"id": "da5a9e52-7306-41cc-a479-5f43b175c4a8",
    		"startTime": "2023", 
    		"endTime": "2024",
			"time": 1,
			"probability": 0.95,
			"cost": "Unknown",
			"performance": "Unknown",
			"shortestTime": true,
			"lowestCost": false,
			"highestPerformance": false,
			"longestTime": false,
			"highestCost": false,
			"lowestPerformance": false,
			"mostLikely": false,
			"mostImpactful": false,
			"parents": ["c89bcba7-df2f-43ee-9917-b17907a70684", "d1155422-7ff3-43bd-9b4a-173f4045df4a"]
		},

		{
    		"task": "Primary Power",
    		"component": "Primary Power",
			"id": "e8681375-ff2a-4394-b295-5afd8ac36083",
    		"startTime": "2024", 
    		"endTime": "2026",
			"time": 2,
			"probability":...