JSFiddle - React, Tailwind, and code Playground

by DJ Martin

HTML

<script src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/bootstrap.min.css">
<div class="container">
    <h1>Multi-Bar Chart in dc.js</h1>

    <div class="row">
        <div id="data-count" class="span12">
            Showing <span class="filter-count"/></span> of <span class="total-count"></span> data points
            | <a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
        </div>
    </div>

    <div class="row">
        <div id="time-chart" class="dc-chart span6">
            <strong>Time</strong>
            <small class="text-muted">
            <time id="date-start" datetime="2012-08-26 20:09-0700">8:09pm on August 26th, 2012</time> &ndash;
            <time id="date-end" datetime="2012-08-26 20:09-0700">8:09pm on August 26th, 2012</time>
            </small>
            <a class="reset" href="javascript:time_chart.filterAll(); dc.redrawAll();" style="display: none;">
                reset
            </a>

            <div class="clearfix"></div>
        </div>

        <div id="temp-chart" class="dc-chart span6">
            <strong>Temperature</strong>
            <a class="reset" href="javascript:temp_chart.filterAll(); dc.redrawAll();" style="display: none;">
                reset
            </a>

            <div class="clearfix"></div>
        </div>

    </div>

</div>

CSS

#line-chart-reverse{
    float:left;
}

JavaScript

seriesBarChart = function (parent, chartGroup) {
    var _chart = dc.compositeChart(parent, chartGroup);

    var _charts = {};
    var _chartFunction = dc.barChart;
    var _seriesAccessor;
    var _seriesSort = d3.ascending;
    var _valueSort = keySort;

    _chart._mandatoryAttributes().push('seriesAccessor','chart');
    _chart.shareColors(true);

    function keySort(a,b) {
        return d3.ascending(_chart.keyAccessor()(a), _chart.keyAccessor()(b));
    }

    _chart._preprocessData = function () {
        var keep = [];
        var children_changed;
        var nester = d3.nest().key(_seriesAccessor);
        if(_seriesSort)
            nester.sortKeys(_seriesSort);
        if(_valueSort)
            nester.sortValues(_valueSort);
        var nesting = nester.entries(_chart.data());
        var children =
            nesting.map( function(sub, i) {
                var subChart = _charts[sub.key] || _chartFunction.call(_chart, _chart, chartGroup, sub.key, i);
                if(!_charts[sub.key])
                    children_changed = true;
                _charts[sub.key] = subChart;
                keep.push(sub.key);
                return subChart
                    .dimension(_chart.dimension())
                    .group({all:d3.functor(sub.values)}, sub.key)
                    .keyAccessor(_chart.keyAccessor())
                    .valueAccessor(_chart.valueAccessor())
                    .barPadding(0.1);
            });
        // this works around the fact compositeChart doesn't really
        // have a removal interface
        Object.keys(_charts)
            .filter(function(c) {return keep.indexOf(c) === -1;})
            .forEach(function(c) {
                clearChart(c);
                children_changed = true;
            });
        _chart._compose(children);
        if(children_changed && _chart.legend())
            _chart.legend().render();
    };

    function clearChart(c) {
        if(_charts[c].g())
           ...