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>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>

CSS

#labels svg g g.axis { display: none; }
#labels text { fill: black; }
#labels rect { display: none; }
#chart svg g g.axis { display: none; }
#chart svg g g.axis { display: none; }
#chart1 svg g g.axis { display: none; }
#chart2 svg g g.axis { display: none; }
#chart3 svg g g.axis { display: none; }

JavaScript

var data = [
        {"date": "2014/02/09", "zeroEpisode": 1, "oneEpisode": 1, "twoEpisodes": 25, "manyEpisodes": 5}
    ];

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

    var chart = dc.rowChart("#chart");
    var chart1 = dc.rowChart("#chart1");
    var chart2 = dc.rowChart("#chart2");
    var chart3 = dc.rowChart("#chart3");
    var xf = crossfilter(data);
    var dateDim = xf.dimension(function (d) {return d.dd;});
    var zeroEpisodes = dateDim.group().reduceSum(function(d){return +d.zeroEpisode;});
    var oneEpisode = dateDim.group().reduceSum(function(d){return +d.oneEpisode;});
    var twoEpisodes = dateDim.group().reduceSum(function(d){return +d.twoEpisodes;});
    var manyEpisodes = dateDim.group().reduceSum(function(d){return +d.manyEpisodes;});

    var minDate = dateFormat.parse("2014/02/09");
    var maxDate = dateFormat.parse("2014/02/15");
    function addXAxis(chartToUpdate, displayText)
    {
        chartToUpdate.svg()
                    .append("text")
                    .attr("class", "x-axis-label")
                    .attr("text-anchor", "left")
                    .attr("y", chartToUpdate.height()-3.5)
                    .text(displayText);
    }
    
           
    chart
            .width(150)
            .height(150)
            .margins({top: 10, right: 50, left: 0, bottom: 40})
            .dimension(dateDim)
            .group(zeroEpisodes)
            .x(d3.scale.linear().range([0,chart.width()]).domain([0, 30]))
            .colors(function(d){return "#e58304";})
            .label(function(d){return d.value})
            .xAxis().scale(chart.x()).ticks(0);
    
    chart1
            .width(150)
            .height(150)
            .margins({top: 10, right: 50, left: 0, bottom: 25})
            .x(d3.scale.linear().range([0,chart1.width()]).domain([0, 30]))
            .dimension(dateDim)
            .group(oneEpisode)
           ...