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 {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.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

var data4 = {
   "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
   }]
 }


 var data5 = {
   "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": 66.1,
     "month": 2
   }, {
     "line_id": "i6_Line",
     "line_name": "6 Line",
     "late_percent": 65.1,
     "month": 3
   }, {
     "line_id": "i6_Line",
     "line_name": "6 Line",
     "late_percent": 69.1,
     "month": 4
   }, {
     "line_id": "i6_Line",
     "line_name": "6 Line",
     "late_percent": 73.1,
     "month": 5
   }, {
     "line_id": "i6_Line",
     "line_name": "6 Line",
     "late_percent": 68.1,
     "month": 6
   }, {
     "line_id": "i6_Line",
     "line_name": "6 Line",
     "late_percent": 80.1,
     "month": 7
   }, {
    "line_id": "i5_Line",
    "line_name": "6 Line",
    "late_percent": 80.1,
    "month": 1
}, {
    "line_id": "i5_Line",
        "line_name": "6 Line",
        "late_percent": 66.1,
        "month": 2
}, {
    "line_id": "i5_Line",
        "line_name": "6 Line",
        "late_percent": 65.1,
        "month": 3
}, {
    "line_id": "i5_Line",
        "line_name": "6 Line",
        "late_percent": 69.1,
        "month": 4
}, {
    "line_id": "i5_Line",
        "line_name": "6 Line",
        "late_percent": 73.1,
        "month": 5
}, {
    "line_id": "i5_Line",
        "line_name": "6 Line",
        "late_percent": 68.1,
        "month": 6
}, {
    "line_id": "i5_Line",
        "line_name": "6 Line",
        "late_percent": 80.1,
        "month": 7
}, {
     "line_id": "i4_Line",
    ...