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": "05:30",
      "racetime": "09:03"
    }, {
      "name": "Ken Doe",
      "clocktime": "18:13",
      "handicap": "04:45",
      "racetime": "11:28"
    }, {
      "name": "SD",
      "clocktime": "20:15",
      "handicap": "01:45",
      "racetime": "10:30"
    }, {
      "name": "DK",
      "clocktime": "15:20",
      "handicap": "02:45",
      "racetime": "09:35"
    }, {
      "name": "BD",
      "clocktime": "17:21",
      "handicap": "02:15",
      "racetime": "10:06"
    }, {
      "name": "KC",
      "clocktime": "15:21",
      "handicap": "02:00",
      "racetime": "10:21"
    }, {
      "name": "PM",
      "clocktime": "18:22",
      "handicap": "03:45",
      "racetime": "11:37"
    }, {
      "name": "NR",
      "clocktime": "17:23",
      "handicap": "01:45",
      "racetime": "10: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) {
        return d.clocktime
          // return d.handicap
      })])
      .range([height, 0]);

   ...