JSFiddle - React, Tailwind, and code Playground

by Shane Gibney

HTML

<!DOCTYPE html>

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

    // Get the data
    var data = [{
        "name": "RT",
        "clocktime": "21:33",
        "handicap": "02:30",
        "racetime": "19:03"
      },
      {
        "name": "KM",
        "clocktime": "22:13",
        "handicap": "00:45",
        "racetime": "21:28"
      },
      {
        "name": "SD",
        "clocktime": "22:15",
        "handicap": "01:45",
        "racetime": "20:30"
      },
      {
        "name": "DK",
        "clocktime": "22:20",
        "handicap": "02:45",
        "racetime": "19:35"
      },
      {
        "name": "BD",
        "clocktime": "22:21",
        "handicap": "02:15",
        "racetime": "20:06"
      },
      {
        "name": "KC",
        "clocktime": "22:21",
        "handicap": "02:00",
        "racetime": "20:21"
      },
      {
        "name": "PM",
        "clocktime": "22:22",
        "handicap": "00:45",
        "racetime": "21:37"
      },
      {
        "name": "NR",
        "clocktime": "22:23",
        "handicap": "01:45",
        "racetime": "20:38"
      }
    ]


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

    // format the data
    data.forEach(function(d) {
      d.racetime = parseTime(d.racetime);
      d.handicap = parseTime(d.handicap);
      d.clocktime = parseTime(d.clocktime);
    });

    // set the domains and ranges
    var x = d3.scaleBand()
      .domain(data.map(function(d) {
        return d.name
      }))
      .range([0, width]);

    // temporal y-scale
    var y = d3.scaleTime()
      .domain([parseTime('00:00'), d3.max(data, function(d) {
 ...