JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="timeseries"></div>
<div id="key"></div>

CSS

.axis path, line{
			stroke:black;
		}
		.line {
			float:left;
		}
		.line_container{
			width: 150px;
			height: 20px;
		}
		path{
			fill: none;
		}
		.key{
			float:right;
		}
		.key_line{
			font-size:17px;
			width:100%;
		}
		.key_square{
			height:10px;
			width:10px;
			outline:solid 1px black;
			float:left;
			margin: 6px 10px 0px 10px;
		}
		#timeseries{
			float:left;
		}

JavaScript

/* data4.json
{
	"data_high":[
		{
			"line_id": "i6_Line",
			"line_name": "6 Line",
			"mean": 73.400000000000006
		},
		{
			"line_id": "i5_Line",
			"line_name": "5 Line",
			"mean": 73.400000000000006
		},
		{
			"line_id": "i4_Line",
			"line_name": "4 Line",
			"mean": 73.400000000000006
		},
		{
			"line_id": "i3_Line",
			"line_name": "3 Line",
			"mean": 73.400000000000006
		}
	]
}*/

/*data5.json

data = {
	"data_low":[
		{
			"line_id": "i6_Line",
			"line_name": "6 Line",
			"late_percent": 73.1,
			"month": 1
		},
		{
			"line_id": "i6_Line",
			"line_name": "6 Line",
			"late_percent": 63.1,
			"month": 1
		},
		{
			"line_id": "i5_Line",
			"line_name": "5 Line",
			"late_percent": 73.1,
			"month": 1
		},
		{
			"line_id": "i4_Line",
			"line_name": "4 Line",
			"late_percent": 73.1,
			"month": 1
		},
		{
			"line_id": "i3_Line",
			"line_name": "3 Line",
			"late_percent": 73.1,
			"month": 1
		}
	]
}*/

d3.json("data4.json", function(data){
	

				console.log(data);

				var container_dimensions = {width: 900, height: 500},
					margins = {top: 10, right: 20, bottom: 50, left: 60},
					chart_dimensions = {
					width: container_dimensions.width - margins.left - margins.right,
					height: container_dimensions.height - margins.top - margins.bottom
					};

				var chart = d3.select("#timeseries")
					.append("svg")
					.attr("width", container_dimensions.width)
					.attr("height", container_dimensions.height)
					.append("g")
					.attr("transform", "translate(" + margins.left + "," + margins.top + ")")
					.attr("id","chart");

				var time_scale = d3.time.scale()
					.range([0,chart_dimensions.width])
					.domain([new Date(2008, 0, 1), new Date(2011, 3, 1)]);

				var percent_scale = d3.scale.linear()
					.range([chart_dimensions.height, 0])
					.domain([65,90]);
					
				var time_axis = d3.svg.axis()
					.scale(time_scale);

				var count_axis =...