JSFiddle - React, Tailwind, and code Playground

HTML

<div id="graph" class="aGraph" style="position:relative;top:10px;left:0; float:left;"></div>

CSS

path
{
	/*stroke: steelblue;*/
	stroke-width: 1;
	fill: none;
}


/*
.axis {
shape-rendering: crispEdges;
}
*/

.x.axis line
{
	stroke: lightgrey;
}

.x.axis .minor
{
	stroke-opacity: .5;
}

.x.axis path
{
	display: none;
}

.y.axis line, .y.axis path
{
	fill: none;
	stroke: #000;
}

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;         
}


.legend {
	            padding: 5px;
	            font: 10px sans-serif;
	            background: yellow;
	            box-shadow: 2px 2px 1px #888;
            }

.title {
            	font: 13px sans-serif;
            }

JavaScript

// define dimensions of graph
		var m = [20, 80, 80, 80]; // margins
		var w = 650 - m[1] - m[3]; // width
		var h = 500 - m[0] - m[2]; // height

		
		var data = [30, 28, 33] ;
		var years = [2010, 2011, 2012] ;
	
        var data2 = [100, 200, 200] ;
		var years2 = [2009, 2010, 2011] ;
		var alldata = data.concat(data2);
		var allyears = years.concat(years2);
				
		var data3 = [200, 220, 300] ;
		var years3 = [2011, 2012, 2013] ;
		var alldata = data.concat(data2, data3);
		var allyears = years.concat(years2, years3);
				
	
		//unique vals functin
		var unique = function(origArr) {
		    var newArr = [],
		        origLen = origArr.length,
		        found,
		        x, y;
		    for ( x = 0; x < origLen; x++ ) {
		        found = undefined;
		        for ( y = 0; y < newArr.length; y++ ) {
		            if ( origArr[x] === newArr[y] ) {
		              found = true;
		              break;
		            }
		        }
		        if ( !found) newArr.push( origArr[x] );   
		    }
		   return newArr;
		};
		

		allyears = unique(allyears);

		
		var x = d3.scale.linear().domain([d3.min(allyears), d3.max(allyears)]).range([0,w]);
		

		var y = d3.scale.linear().domain([0, (d3.max(alldata))*1.3]).range([h, 0]);
		 

		var line = d3.svg.line()
	
			.x(function(d,i) { 
			
				return x(years[i]); 
			})
		
			.y(function(d) { 
				
				return y(d); 
			})
		
				
		var line2 = d3.svg.line()
		
			.x(function(d,i) { 
				return x(years2[i]); 
			})
		
			.y(function(d) { 
	
				return y(d); 
			})			
			
		var line3 = d3.svg.line()
			.x(function(d,i) { 
				return x(years3[i]); 
			})
		
			.y(function(d) { 

				return y(d); 
			})			
			
		// Add an SVG element with the desired dimensions and margin.
		var graph = d3.select("#graph").append("svg:svg")
		    .attr("width", w + m[1] + m[3])
		    .attr("height", h + m[0] + m[2])
		    .append("svg:g")
		    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

		// create xAxis
		var xAxis =...