JSFiddle - React, Tailwind, and code Playground

by johannpickard

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Multi Series Span Chart (Vertical)</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="chart1" class="chart"></div>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    </body>
    <script type="text/javascript" src="main.js"></script>
</html>

CSS

.axis path,
    .axis line {
      fill: none;
      font: 10px sans-serif;
      stroke: #000;
      shape-rendering: crispEdges;
    }

    .legend {
        padding: 5px;
        font: 10px sans-serif;
        background: yellow;
        box-shadow: 2px 2px 1px #888;
    }

    .tooltip {
        background: #eee;
        box-shadow: 0 0 5px #999999;
        color: #333;
        font-size: 12px;
        left: 130px;
        padding: 10px;
        position: absolute;
        text-align: center;
        top: 95px;
        z-index: 10;
        display: block;
        opacity: 0;
    }

JavaScript

$( document ).ready(function() {
    render_chart();
});

function render_chart(){
    var stack = d3.layout.stack();
    var dataset = {
                "categories": ['06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00'],
                
                // When generating the string, the guards names will be 
//looped through
                "series": ["Guard 1","Guard 2","Guard 3","Guard 4"],
                
                // We might need to set a hard coded upper limit on the number of guards. So we can select from a predefined set of x colors. 
                "colors": ["#3498db","#e74c3c","#2ecc71", "green"],
                
                // FOr each shiftguard, there will be a new one of these
                // layers generated
                "layers": [
                        [
                            {"y":1,"y0":60,"month":"06:00"},
                        
                            {"y":2,"y0":18,"month":"07:00"}
                 
                        ],
                        [
                            {"y":12,"y0":24,"month":"06:00"},
                           
                            {"y":18,"y0":33,"month":"10:00"}
                        
                        ],[
                          
                        
                            {"y":25,"y0":30,"month":"14:00"},
                            {"y":23,"y0":31,"month":"15:00"},
                            {"y":11,"y0":26,"month":"16:00"},
                            {"y":12,"y0":23,"month":"17:00"}
                        ]
                       
                    ]
                }

    n = dataset["series"].length, // Number of Layers
    m = dataset["layers"].length, // Number of Samples in 1 layer

    yGroupMax = d3.max(dataset["layers"], function(layer) { return d3.max(layer, function(d) { return d.y0; }); });
    yGroupMin = d3.min(dataset["layers"], function(layer) { return d3.min(layer, function(d) {...