JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	
		<div id="content"></div>

CSS

body {
  font: 10px sans-serif;
  margin: 50px;
}
 
.grid .tick {
	stroke: lightgrey;
	opacity: 0.7;
	shape-rendering: crispEdges;
}
 
.grid path {
	stroke-width: 0;
}
 
.axis path {
	fill: none;
	stroke: #bbb;
	shape-rendering: crispEdges;
}
 
.axis text {
	fill: #555;
}
 
.axis line {	
	stroke: #e7e7e7;
	shape-rendering: crispEdges;
}
 
.axis .axis-label {
	font-size: 14px;
}
 
.line {
	fill: none;
	stroke-width: 1.5px;
}
 
.dot {
	/* consider the stroke-with the mouse detect radius? */
	stroke: transparent;
	stroke-width: 10px;  
	cursor: pointer;
}
 div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 60px;					
    height: 28px;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: lightsteelblue;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
}
.areaBelow {
    fill: green;
    stroke-width: 0;
}

.areaAbove {
 	fill: lightsteelblue;
    stroke-width: 0;
}

.dot:hover {
	stroke: rgba(68, 127, 255, 0.3);
}

JavaScript

//************************************************************
		// Data notice the structure
		//************************************************************
		var data = 	[
			[{'x':1,'y':7},{'x':2,'y':7},{'x':3,'y':7},{'x':4,'y':7},{'x':5,'y':7},{'x':6,'y':8},{'x':7,'y':7},{'x':8,'y':6},{'x':9,'y':7},{'x':10,'y':7}],
			[{'x':1,'y':9},{'x':2,'y':8},{'x':3,'y':11},{'x':4,'y':10},{'x':5,'y':10},{'x':6,'y':9},{'x':7,'y':10},{'x':8,'y':10},{'x':9,'y':11},{'x':10,'y':10}],
			[{'x':1,'y':9.5},{'x':2,'y':10},{'x':3,'y':12},{'x':4,'y':9},{'x':5,'y':10},{'x':6,'y':9},{'x':7,'y':11},{'x':8,'y':11},{'x':9,'y':11},{'x':10,'y':11}],
			[{'x':1,'y':8},{'x':2,'y':8},{'x':3,'y':8},{'x':4,'y':8},{'x':5,'y':10},{'x':6,'y':10},{'x':7,'y':8},{'x':8,'y':8},{'x':9,'y':9},{'x':10,'y':9}],
			[{'x':1,'y':10},{'x':2,'y':10},{'x':3,'y':11},{'x':4,'y':11},{'x':5,'y':11},{'x':6,'y':11},{'x':7,'y':12},{'x':8,'y':12},{'x':9,'y':12},{'x':10,'y':12}]
		];
		
		var dataAboveLine = [{'x':1,'y':10},{'x':2,'y':10},{'x':3,'y':11},{'x':4,'y':11},{'x':5,'y':11},{'x':6,'y':11},{'x':7,'y':12},{'x':8,'y':12},{'x':9,'y':12},{'x':10,'y':12}];
		var dataBelowLine = [{'x':1,'y':7},{'x':2,'y':7},{'x':3,'y':7},{'x':4,'y':7},{'x':5,'y':7},{'x':6,'y':8},{'x':7,'y':7},{'x':8,'y':6},{'x':9,'y':7},{'x':10,'y':7}];
		
		var colors = [
			'steelblue',
			'green',
			'red',
			'lightgreen'
		]
		
		var lineType = [
		     '5 0',
		     '5 0',
		     '5 0',
		     '8 5'
		 ]
		 
	
		//************************************************************
		// Create Margins and Axis and hook our zoom function
		//************************************************************
		var margin = {top: 20, right: 30, bottom: 30, left: 50},
		    width = 960 - margin.left - margin.right,
		    height = 500 - margin.top - margin.bottom;
			
		var x = d3.scale.linear()
		    .domain([0, 12])
		    .range([0, width]);
		 
		var y = d3.scale.linear()
		    .domain([-1, 16])
		    .range([height, 0]);
			
		var xAxis = d3.svg.axis()
		   ...