JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.js"></script>
<div id="cont" class="container-fluid text-center">

  <div class="row">
    <div class="col-md-3">
    </div>
    <div class="col-md-6">
      <div id="chart"></div>
    </div>
    <div class="col-md-3">
    </div>
  </div>



</div>

CSS

.margin30 {
  margin-bottom: 30px;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
path:hover {
  fill: white;
}
.tooltip {
  background: #eee;
  box-shadow: 0 0 5px #999999;
  color: #666;
  font-size: 12px;
  left: 130px;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 95px;
  z-index: 10;
  display: block;
  opacity: 0;
}

JavaScript

var data =

  [{
    "Day": "2016-10-22",
    "Time": "0:00:00",
    "Average": 0.969891134
  }, {
    "Day": "2016-10-22",
    "Time": "1:00:00",
    "Average": 0.916218024
  }, {
    "Day": "2016-10-22",
    "Time": "2:00:00",
    "Average": 0.933776322
  }, {
    "Day": "2016-10-22",
    "Time": "3:00:00",
    "Average": 0.935375822
  }, {
    "Day": "2016-10-22",
    "Time": "4:00:00",
    "Average": 0.851685935
  }, {
    "Day": "2016-10-22",
    "Time": "5:00:00",
    "Average": 0.708158118
  }, {
    "Day": "2016-10-22",
    "Time": "6:00:00",
    "Average": 0.79328731
  }, {
    "Day": "2016-10-22",
    "Time": "7:00:00",
    "Average": 0.988681914
  }, {
    "Day": "2016-10-22",
    "Time": "8:00:00",
    "Average": 0.653469207
  }, {
    "Day": "2016-10-22",
    "Time": "9:00:00",
    "Average": 0.171116158
  }, {
    "Day": "2016-10-22",
    "Time": "10:00:00",
    "Average": 0.185425746
  }, {
    "Day": "2016-10-22",
    "Time": "11:00:00",
    "Average": 0.724184058
  }, {
    "Day": "2016-10-22",
    "Time": "12:00:00",
    "Average": 0.281778782
  }, {
    "Day": "2016-10-22",
    "Time": "13:00:00",
    "Average": 0.810961995
  }, {
    "Day": "2016-10-22",
    "Time": "14:00:00",
    "Average": 0.182562288
  }, {
    "Day": "2016-10-22",
    "Time": "15:00:00",
    "Average": 0.306659218
  }, {
    "Day": "2016-10-22",
    "Time": "16:00:00",
    "Average": 0.262867786
  }, {
    "Day": "2016-10-22",
    "Time": "17:00:00",
    "Average": 0.651224997
  }, {
    "Day": "2016-10-22",
    "Time": "18:00:00",
    "Average": 0.053924618
  }, {
    "Day": "2016-10-22",
    "Time": "19:00:00",
    "Average": 0.804157436
  }, {
    "Day": "2016-10-22",
    "Time": "20:00:00",
    "Average": 0.996288161
  }, {
    "Day": "2016-10-22",
    "Time": "21:00:00",
    "Average": 0.999157842
  }, {
    "Day": "2016-10-22",
    "Time": "22:00:00",
    "Average": 0.999360726
  }, {
    "Day": "2016-10-22",
    "Time": "23:00:00",
    "Average": 0.999424465
  },...