JSFiddle - React, Tailwind, and code Playground

by Shane Gibney

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" crossorigin="anonymous"></script>

<body>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Data</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" id="defaultInput" value="one" href="#">data1.json</a>
        <a class="dropdown-item" id="updateInput" value="two" href="#">data2.json</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div id="race_graph">
        </div>
      </div>
    </div>
  </div>

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    // set the dimensions and margins of the graph
    var margin = {
        top: 70,
        right: 50,
        bottom: 100,
        left: 80
      },
      width = 1400 - margin.left - margin.right,
      height = 600 - margin.top - margin.bottom;

    var parseTime = d3.timeParse("%M:%S");
    var timeformat = d3.timeFormat("%M:%S");

    // set the domains and ranges
    var x = d3.scaleBand()
      .range([0, width])
      .padding([0.6]);

    // temporal y-scale
    var y = d3.scaleTime()
      .range([height, 0]);

    var xAxis = d3.axisBottom(x);

    var yAxis = d3.axisLeft(y)
      .ticks(7)
     ...

CSS

.container {
    margin-left: 0px;
  }

  .legend:hover {
    fill: blue;
  }
  /* tooltip for main bar chart */

  div.maintooltip {
    position: absolute;
    text-align: left;
    width: 120px;
    height: 20px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
  }
  /* tooltip for clubs bar chart */

  div.clubtooltip {
    position: absolute;
    text-align: left;
    width: 120px;
    height: 140px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
  }
  /*rect:hover {
    fill: blue;
  }*/