JSFiddle - React, Tailwind, and code Playground

by DJ Martin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="https://dc-js.github.io/dc.js/css/dc.css">
<div id="chart"></div>

CSS

#chart g.stack._0  > rect.bar {
    stroke: none;
    fill: #e58304;
}
#chart g.stack._1 > rect.bar {
    stroke: none;
    fill: #dfd510;
}
#chart g.stack._2 > rect.bar {
    stroke: none;
    fill: #63bf1f;
}
#chart g.stack._3 > rect.bar {
    stroke: none;
    fill: #008000;
}

JavaScript

var data = [
        {"date": "2014/02/09", "zeroEpisode": 2, "oneEpisode": 10, "twoEpisodes": 5, "manyEpisodes": 8},
        {"date": "2014/02/10", "zeroEpisode": 3, "oneEpisode": 9, "twoEpisodes": 6, "manyEpisodes": 7},
        {"date": "2014/02/11", "zeroEpisode": 2, "oneEpisode": 8, "twoEpisodes": 7, "manyEpisodes": 8},
        {"date": "2014/02/12", "zeroEpisode": 1, "oneEpisode": 7, "twoEpisodes": 8, "manyEpisodes": 9},
        {"date": "2014/02/13", "zeroEpisode": 2, "oneEpisode": 6, "twoEpisodes": 5, "manyEpisodes": 12},
        {"date": "2014/02/14", "zeroEpisode": 3, "oneEpisode": 5, "twoEpisodes": 6, "manyEpisodes": 11},
        {"date": "2014/02/15", "zeroEpisode": 1, "oneEpisode": 2, "twoEpisodes": 4, "manyEpisodes": 18}
    ];

    dateFormat = d3.time.format("%Y/%m/%d");
    data.forEach(function (e) {
        e.dd = dateFormat.parse(e.date);
    });

    var chart = dc.barChart("#chart");
    var xf = crossfilter(data);

    var dateDim = xf.dimension(function (d) {
        return d.dd;
    });

    var eventsByDate = dateDim.group().reduce(
            function (p, v) {
                p.zeroEpisode += v.zeroEpisode;
                p.oneEpisode += v.oneEpisode;
                p.twoEpisodes += v.twoEpisodes;
                p.manyEpisodes += v.manyEpisodes;
                return p;
            },
            function (p, v) {
                p.zeroEpisode += v.zeroEpisode;
                p.oneEpisode -= v.oneEpisode;
                p.twoEpisodes -= v.twoEpisodes;
                p.manyEpisodes -= v.manyEpisodes;
                return p;
            },
            function () {
                return {
                    zeroEpisode: 0,
                    oneEpisode: 0,
                    twoEpisodes: 0,
                    manyEpisodes: 0
                };
            }
    );


    var minDate = dateDim.bottom(1)[0].dd;
    var maxDate = dateDim.top(1)[0].dd;

    chart
            .margins({top: 50, right: 20, left: 50, bottom: 50})
  ...