JSFiddle - React, Tailwind, and code Playground

by Sameer Shemna

HTML

<div id="run">
</div>

CSS

body {
    font: 14px sans-serif;
}
.axis path,
.axis line {
    fill: none;
    stroke: #000;
    stroke-width: 2;
    shape-rendering: crispEdges;
}
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.overlay {
    fill: none;
    pointer-events: all;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
.left {
    float: left;
    width: 33%;
}
h3 {
    margin-left: 50px;
}
h1,
h2 {
    margin: 10px;
}
.area {
    fill: #579FAD;
    stroke-width: 0;
}
.area2 {
    fill: #F05C51;
    stroke-width: 0;
}

JavaScript

var string = "2014-10-28,1794,2,287,2014-10-28,1798,1,191,2014-10-29,1812,4,191,2014-10-30,1813,3,114,2014-10-30,1814,2,191,2014-10-30,1815,4,191,2014-10-30,1817,2,191,2014-10-30,1818,9,191,2014-10-30,1819,2,191,2014-10-31,1820,3,3,2014-10-31,1821,3,80,2014-10-31,1822,2,80,2014-10-31,1823,2,287,2014-10-31,1824,5,287,2014-10-31,1826,6,287,2014-10-31,1827,9,287,2014-11-03,1831,6,287,2014-11-03,1832,6,287,2014-11-03,1833,3,191,2014-11-03,1835,4,210,2014-11-03,1836,4,176,2014-11-03,1837,5,287,2014-11-03,1838,7,287";

var arrData = [];
var localArr = [];
var runrateArr = string.split(",");
for (var i = 0; i < runrateArr.length; i++) {
    localArr[localArr.length] = runrateArr[i];
    if (localArr.length == 4) {
        arrData[arrData.length] = localArr;
        localArr = [];
    }
}

var margin = {
        top: 40,
        right: 80,
        bottom: 150,
        left: 50
    },
    width = 1600 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y-%m-%d").parse;


var x = d3.time.scale()
    .range([0, width])

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

var length = "<%= runrate %>".length;

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom").ticks(arrData.length).tickFormat(d3.time.format("%Y-%m-%d hallo"));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var area = d3.svg.area()
    .x(function(d) {
        return x(d.date);
    })
    .y0(height)
    .y1(function(d) {
        return y(d.all);
    });

var area2 = d3.svg.area()
    .x(function(d) {
        return x(d.date);
    })
    .y0(height)
    .y1(function(d) {
        return y(d.failure);
    });

var line = d3.svg.line()
    .x(function(d) {
        return x(d.date);
    })
    .y(function(d) {
        return y(d.failure);
    });


var line2 = d3.svg.line()
    .x(function(d) {
        return x(d.date);
    })
    .y(function(d) {
        return y(d.all);
    });



var svg = d3.select("#run").append("svg")
   ...