JSFiddle - React, Tailwind, and code Playground

by fractaloop

HTML

<div id="timeline"></div>

CSS

#timeline {
    display: inline-block;
    border: 1px solid black;
    font: 10px sans-serif;
}

JavaScript

formatDate = function(d) {
    return ""+ d3.time.format("%m-%d")(new Date(d));
};

var margin = {top: 0, right: 0, bottom: 15, left: 0},
width = 960 - margin.left - margin.right,
height = 145 - margin.top - margin.bottom;

var y = d3.scale.linear()
    .range([0, height]);

var x = d3.scale.ordinal()
    .rangeBands([0, width - margin.left - margin.right])
    
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(formatDate);

var nest = d3.nest()
    .key(function(d) { return d.room; });

var stack = d3.layout.stack()
    .values(function(d) { return d.values; })
    .x(function(d) { return d.time; })
    .y(function(d) { return d.value; });

var color = d3.scale.linear();

var svg = d3.select("#timeline").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + (height - margin.top) + ")");

d3.json("https://api.github.com/gists/71a953f0785c97aa5a67", function(error, result) {
    if (error) {
        // TODO Add error reporting
        return console.warn(error);
    }

    // Extract crap since JSfiddle is a hassle    
    result = JSON.parse(result.files['metrics.response.json'].content)

    // Parse dates and values
    result.metrics.forEach(function(d) {
        d.time = Date.parse(d.time);
        d.value = +d.value;
    });


    var rooms = stack(nest.entries(result.metrics));

    x.domain(rooms[0].values.map(function (d) { return d.time; }));
    y.domain([0, d3.max(result.metrics, function(d) { return d.y0 + d.y; })]);

    var roomNames = Object.keys(result.summary);
    color
        .domain([0, roomNames.length])
        .range([d3.rgb("#0099bb"), d3.rgb("#bbffff")]);
    
    var group = svg.selectAll("g.room")
        .data(rooms)
        .enter().append("g")
        .attr("class", "room")
        .style("fill", function(d, i) { return color(i); })

   ...