JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <title>D3 Test</title>
    <script src="http://rud.is/passheat/assets/d3/d3.v2.js"></script>
    <script src="http://rud.is/passheat/assets/js/jquery.js"></script>
  </head>
  <body>

  </body>
</html>

CSS

div.bar {
          display: inline-block;
          width: 20px;
          height: 75px;   /* We'll override this later */
          background-color: teal;
          margin-right: 2px;
      }
      .axis path,
      .axis line {
          fill: none;
          stroke: black;
          shape-rendering: crispEdges;
      }

      .axis text {
          font-family: sans-serif;
          font-size: 11px;
      }
      div.tooltip {
          position: absolute;
          text-align: center;
          width: 100px;
          color:white;
          padding: 8px;
          font: 10px sans-serif;
          background: black;
          border: solid 1px #aaa;
          pointer-events: none;
      }

JavaScript

function nextDate(start, step) {
    return new Date(start.getTime() + step)
}


    var dataset = [];
    var numDataPoints = 50;
    var xRange = Math.random() * 1000;
    var yRange = Math.random() * 1000;
    var speedRange = Math.random() * 120;
    var schakels = new Array();

    var start = nextDate(new Date(2012, 0, 1), 86400000);

    for (var i = 0; i < numDataPoints; i++) {
        var xval = Math.round(Math.random() * xRange);
        
        var schakel_id =  "sck" + i ;
        var row = new Array()

        var date = nextDate(new Date(2012, 0, 1), 86400000);

        for(var j=0; j< 40; j++){
          var speed = Math.round(Math.random() * speedRange);
          row.push([schakel_id,
                         date,
                         speed]);
          date = nextDate(date, 86400000);
        }
        dataset.push(row);
        schakels.push(schakel_id);
    }

    var end = date;

    var w = 800;
    var h = 600;
    var padding = 40;

    var xscale = d3.time.scale()
                         .domain([start, end])
                         .range([padding, w - padding]);

    var xAxis = d3.svg.axis()
                .scale(xscale)
                .orient("bottom")
                .ticks(d3.time.days, 5);

    var yscale = d3.scale.ordinal()
                         .domain(schakels)
                         .rangeBands([padding, h-padding]);

    var yAxis = d3.svg.axis()
                      .scale(yscale)
                      .orient('left');


    var zscale = d3.scale.linear()
                         .domain([0,120])
                         .range(['yellow', 'black']);

    var svg = d3.select('body')
                .append('svg')
                .attr('width', w)
                .attr('height', h)

      var cellw = 15;
      var cellh = 9;

      var row = svg.selectAll('.row')
                   .data(dataset)
                   .enter()
                   .append('svg:g')
                   .attr('class', 'row')

      var...