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": "Toyota",
      "Count": 1800,
      "Time": "2017-04-02 16"
    }, {
      "Brand": "Toyota",
      "Count": 1172,
      "Time": "2017-04-02 17"
    }, {
      "Brand": "Toyota",
      "Count": 2000,
      "Time": "2017-04-02 18"
    }, {
      "Brand": "General Motors Truck Company (GMC)",
      "Count": 8765,
      "Time": "2017-04-02 16"
    }, {
      "Brand": "General Motors Truck Company (GMC)",
      "Count": 3445,
      "Time": "2017-04-02 17"
    }, {
      "Brand": "General Motors Truck Company (GMC)",
      "Count": 1232,
      "Time": "2017-04-02 18"
    }];

    data.forEach(function(d) {
      d.Time = d3.timeParse("%Y-%m-%d %H")(d.Time)
    });

    var dataGroup = d3.nest() //d3 method that groups data by Brand  
      .key(function(d) {
        return d.Brand;
      })
      .entries(data);

    //var color = d3.scale.category10();
    var vis = d3.select("#visualisation"),
      WIDTH = 1000,
      HEIGHT = 500,
      MARGINS = {
        top: 50,
        right: 20,
        bottom: 50,
        left: 50
      },
      xScale = d3.scaleTime().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function(d) { //set up x-axis based on data
        return d.Time;
      }), d3.max(data, function(d) {
        return d.Time;
      })]),

      yScale = d3.scaleLinear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function(d) { //set up y-axis based on data
        return d.Count;
      }), d3.max(data, function(d) {
        return d.Count;
      })]),

      xAxis = d3.axisBottom()
      .scale(xScale),
      yAxis = d3.axisLeft()
      .scale(yScale)

    vis.append("svg:g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
      .call(xAxis);

    vis.append("svg:g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + (MARGINS.left) + ",0)")
      .call(yAxis);

    var lineGen = d3.line()
      .x(function(d) {
  ...