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", "type": "0 Episodes", "value": 2},
        {"date": "2014/02/09", "type": "1 Episode", "value": 10},
        {"date": "2014/02/09", "type": "2 Episodes", "value": 5},
        {"date": "2014/02/09", "type": "3+ Episodes", "value": 8},
        
        {"date": "2014/02/09", "type": "0 Episodes", "value": 3},
        {"date": "2014/02/09", "type": "1 Episode", "value": 9},
        {"date": "2014/02/09", "type": "2 Episodes", "value": 6},
        {"date": "2014/02/09", "type": "3+ Episodes", "value": 7},
        
        {"date": "2014/02/10", "type": "0 Episodes", "value": 2},
        {"date": "2014/02/10", "type": "1 Episode", "value": 8},
        {"date": "2014/02/10", "type": "2 Episodes", "value": 7},
        {"date": "2014/02/10", "type": "3+ Episodes", "value": 8},
        
        {"date": "2014/02/11", "type": "0 Episodes", "value": 1},
        {"date": "2014/02/11", "type": "1 Episode", "value": 7},
        {"date": "2014/02/11", "type": "2 Episodes", "value": 8},
        {"date": "2014/02/11", "type": "3+ Episodes", "value": 9},
        
        {"date": "2014/02/12", "type": "0 Episodes", "value": 2},
        {"date": "2014/02/12", "type": "1 Episode", "value": 6},
        {"date": "2014/02/12", "type": "2 Episodes", "value": 5},
        {"date": "2014/02/12", "type": "3+ Episodes", "value": 12},
        
        {"date": "2014/02/13", "type": "0 Episodes", "value": 3},
        {"date": "2014/02/13", "type": "1 Episode", "value": 5},
        {"date": "2014/02/13", "type": "2 Episodes", "value": 6},
        {"date": "2014/02/13", "type": "3+ Episodes", "value": 11},
        
        {"date": "2014/02/14", "type": "0 Episodes", "value": 1},
        {"date": "2014/02/14", "type": "1 Episode", "value": 2},
        {"date": "2014/02/14", "type": "2 Episodes", "value": 4},
        {"date": "2014/02/14", "type": "3+ Episodes", "value": 18},
    ];

    dateFormat = d3.time.format("%Y/%m/%d");
    data.forEach(function...