JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart-id" class="line-chart"></div>
<ul class="legend"></ul>

CSS

.line-chart {
  width: 800px;
  height: 200px;
}

.d3-axis {
  font-family: 'Arial', sans-serif;
  font-size: 10px;
}

.d3-line {
  fill: none;
  stroke-width: 2px;
}

.d3-axis path {
  fill: none;
  stroke: #e6e6e6;
  shape-rendering: crispEdges;
  opacity: 0; // remove axes
}

.d3-axis line {
  fill: none;
  stroke: #eee;
  shape-rendering: crispEdges;
}

ul li {
  display: inline-block;
  margin-left: 10px;
}
.color-square {
  display:block;
  float:left;
  margin-right:3px;
  width:20px;
  height:20px;
  border:1px solid #000;
  }
  .view {
    opacity:0;
  }
  .d3-tooltip {
  position:absolute;
  z-index:1000;
  background:rgba(255,255,255,0.95);
  padding:5px 10px;
  border-radius:5px;
  font-size:12px;
  color:#202020;
  //min-width:150px;
  width:260px;
  border:2px solid #02A6E3;  
  -webkit-transform:translate(0,-50%);
  transform:translate(0,-50%);
  pointer-events:none;
}
.hidden {
  display:none;
}

JavaScript

var data = [{"name":"line1","date":"2016-10-15T11:01:00Z","value":57},
{"name":"line1","date":"2016-10-15T11:02:00Z","value":22},
{"name":"line1","date":"2016-10-15T11:03:00Z","value":75},
{"name":"line1","date":"2016-10-15T11:04:00Z","value":69},
{"name":"line2","date":"2016-10-15T11:01:00Z","value":18},
{"name":"line2","date":"2016-10-15T11:02:00Z","value":47},
{"name":"line2","date":"2016-10-15T11:03:00Z","value":39},
{"name":"line2","date":"2016-10-15T11:04:00Z","value":12},
{"name":"line3","date":"2016-10-15T11:01:00Z","value":60},
{"name":"line3","date":"2016-10-15T11:02:00Z","value":95},
{"name":"line3","date":"2016-10-15T11:03:00Z","value":85},
{"name":"line3","date":"2016-10-15T11:04:00Z","value":67}]

    margin = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 30
    };


    var parentNode = d3.select('#chart-id').node(),
        parent = '#chart-id';

    var containerwidth = parentNode.getBoundingClientRect().width,
        containerheight = parentNode.getBoundingClientRect().height,
        width = containerwidth - margin.left - margin.right,
        height = containerheight - margin.top - margin.bottom;
                                                             
    var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%SZ")
    
    var bisectDate = d3.bisector(function(d) { 
      return d.date;
    }).left;

    data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.value = +d.value;
    });

    function sortByDateAscending(a, b) {
      return a.date - b.date;
    }
    dataset = data.sort(sortByDateAscending);

    var dataGroup = d3.nest()
      .key(function(d) {
        return d.name;
      })
      .entries(data);

    dataGroup.forEach(function(d) {
      d.enabled = true;
    });               
    
    var svg = d3.select(parent)
      .append('svg')
      .attr('width', containerwidth)
      .attr('height', containerheight)
      .append('g')
      .attr('transform', 'translate(' + margin.left + ',' +...