JSFiddle - React, Tailwind, and code Playground

by galvakojis

HTML

<script src="https://docs.handsontable.com/0.24.1/bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/0.24.1/bower_components/handsontable/dist/handsontable.full.css">
<script src="https://mbostock.github.io/d3/d3.v2.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/0.24.1/styles/samples.css">
<script src="https://d3js.org/d3.v2.js"></script>
<h2>Default Handsontable Demo</h2>

<div id="exampleGrid" class="dataTable"></div>

	<div style="display:inline;float:right;text-align:right;font-size:14px;line-height:20px;">
		Timeline demo prototype by "Strategeens"<br>
		According to <a href="http://strategeens.com/timeline/example-timeline.png" target="blank">[example]</a> provided
	</div>
  
  
	<div id="option" style="display:inline;">
 
  <button id='button'>Update</button>
	</div>
  
     <svg>
          <defs>
        <linearGradient id="MyGradient">
          <stop offset="0%" stop-color="#bfe18d" />
          <stop offset="100%" stop-color="#d89593" />
        </linearGradient>
      </defs>
   </svg>
   <div style="clear:both;"></div>
   <div id="svgdataurl"></div>
	<div id="pngdataurl"></div>

	<canvas width="960" height="500" style="display:none"></canvas>

CSS

body {
    background-color: white;
    margin: 20px;
}

h2 {
    margin: 20px 0;
}

#Exploration {
	fill:#93cddd;	
	stroke-width:1;
	stroke:#ffffff;
}

#Execution {
	fill:#bfe18d;
	stroke-width:1;
	stroke:#ffffff;
}

#Transition {
	fill:url(#MyGradient);
	stroke-width:1;
	stroke:#ffffff;
}

.hover_group:hover {
	opacity: 0.6;
	
}

.svgcontainer {

}

.axis line, .axis path {
	stroke: black;
}

.nowrectangle {
	
	fill: #ffecb6;}

JavaScript

var myData = [
    ["Product", "Year", "Phase1", "Pahese2", "Phase3"],
    ["Product1", 2014, 1, 2, 3],
    ["Product2", 2015, 1, 2, 3],
    ["Product3", 2015, 1, 2, 3]
    ];

$("#exampleGrid").handsontable({
    data: myData,
    startRows: 5,
    startCols: 5,
    minSpareCols: 1,
    //always keep at least 1 spare row at the right
    minSpareRows: 1,
    //always keep at least 1 spare row at the bottom,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true
});
	var $grid = $("#exampleGrid").find('tr');
  //var $lentele = $grid.children();
  console.log($grid);
  //for (var i =0; i> )
	var lanes = ["Name1","Name2","Name3","Name4"],
			laneLength = lanes.length,
			items = [
					{"lane": 0, "id": "Exploration", "start": 1, "end": 3},
					{"lane": 0, "id": "Execution", "start": 3, "end": 7},
					{"lane": 0, "id": "Transition", "start": 7, "end": 12},				
					{"lane": 1, "id": "Exploration", "start": 1, "end": 2},
					{"lane": 1, "id": "Execution", "start": 2, "end": 8},
					{"lane": 1, "id": "Transition", "start": 8, "end": 12},					
					{"lane": 2, "id": "Exploration", "start": 1, "end": 4},
					{"lane": 2, "id": "Execution", "start": 4, "end": 9},			
					{"lane": 2, "id": "Transition", "start": 9, "end": 12},
					{"lane": 3, "id": "Exploration", "start": 1, "end": 3},
					{"lane": 3, "id": "Execution", "start": 3, "end": 6},			
					{"lane": 3, "id": "Transition", "start": 6, "end": 12}]
			timeBegin = 1,
			timeEnd = 12;
			points = [
					{"lane": 0, "start": 2, },
					{"lane": 0, "start": 7, },
					{"lane": 1, "start": 3, },
					{"lane": 2, "start": 9, },
					{"lane": 3, "start": 2, },
					{"lane": 3, "start": 11, }
					]

		
		var margin = {top: 100, right: 0, bottom: 350, left: 150};
		
		//Width and height
		var w = 750 - margin.left - margin.right,
			h = 650 - margin.top - margin.bottom;
		

		
		//scales
		var x = d3.scale.linear()
				.domain([timeBegin, timeEnd])
				.range([0, w]);
	
		var y =...