JSFiddle - React, Tailwind, and code Playground

by samselikoff

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="chart"></div>

CSS

.chart path {
  fill: none;
}

.chart .axis path, .chart .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.chart {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #999999;
  height: 210px;
  clear: both;
}

JavaScript

// dataset1
var data = new Array();
for (var day=10; day < 30; day++) { 
    for (hour=10; hour < 24; hour++) { 
        data.push({
            'date': '2013-02-'+day+' '+hour+':00:00',
            'prod': Math.floor(Math.random()*200),
            'robo': Math.floor(Math.random()*100),
            'other':Math.floor(Math.random()*50)
        });
    }
}

// Set begin and end dates.
function filter() {
    var d = new Date();
    begin = new Date(d.getTime());
    begin.setDate(d.getDate() - 7);
    begin.setHours(0, 0, 0, 0);
    end = new Date(d.getTime());
    return {"begin": begin, "end": end};
}

// Draw and update the chart.
$(document).ready(function () {
var chart1 = TimeSeriesChart();
    
(function update() {

    // Get the dates
    filterDates = filter();

    // Initial draw
    drawDashboard(data, filterDates.begin, filterDates.end);

    // Refresh every 3 seconds
    setTimeout(update, 3000);

})();
});

function drawDashboard(data, begin, end) {
  chart1.beginDate(begin).endDate(end);
  d3.select('.chart')
    .datum(data)
    .call(chart1);
}

// The chart object.
function TimeSeriesChart() {

  var margin      = {top: 40, right: 20, bottom: 40, left: 40};
      xScale      = d3.time.scale(),
      yScale      = d3.scale.linear(),
      xAxis       = d3.svg.axis().scale(xScale).orient("bottom").ticks(7),
      yAxis       = d3.svg.axis().scale(yScale).orient("left"),
      line        = d3.svg.line().interpolate("linear").x(X).y(Y),
      parseDate   = d3.time.format("%Y-%m-%d %X").parse,
      beginDate  = '',
      endDate    = '',
      color       = d3.scale.category10();
      

  function chart(selection) {
    selection.each(function(data)
    {
      var width = $(selection[0]).width()-margin.left-margin.right;
      var height = $(selection[0]).height()-margin.top-margin.bottom;

      // Set the domain of the color scale to all categories but date (prod, robo, other in our case)
     ...