JSFiddle - React, Tailwind, and code Playground

HTML

<title>D3 Test</title>
<script src="https://d3js.org/d3.v4.js"></script>

<body>
  <svg id="visualisation" width="1000" height="600"></svg>

</body>

CSS

.axis path {
         fill: none;
         stroke: #777;
         shape-rendering: crispEdges;
       }
       
       .axis text {
         font-family: Lato;
         font-size: 13px;
       }
       
       .legend {
         font-size: 14px;
         font-weight: bold;
         cursor: pointer;

JavaScript

var data = [{
  "Brand": "Lexus",
  "Time": "2017-05-08 16",
  "Count": 8263
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 09",
  "Count": 25382
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 06",
  "Count": 17543
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 10",
  "Count": 25758
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 12",
  "Count": 2052
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 10",
  "Count": 9
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 07",
  "Count": 4
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 12",
  "Count": 11653
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 21",
  "Count": 16199
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 23",
  "Count": 179
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 13",
  "Count": 11334
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 17",
  "Count": 600
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 05",
  "Count": 7365
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 18",
  "Count": 2147
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 14",
  "Count": 8
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 18",
  "Count": 3
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 20",
  "Count": 7694
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 03",
  "Count": 1173
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 17",
  "Count": 8579
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 20",
  "Count": 21008
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 16",
  "Count": 10
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 07",
  "Count": 2430
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 07",
  "Count": 2795
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 06",
  "Count": 2614
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 08",
  "Count": 11712
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 05",
  "Count": 188
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 10",
  "Count": 623
}, {
  "Brand": "Chrysler",
 ...