JSFiddle - React, Tailwind, and code Playground

by Gordon Woodhull

HTML

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

    <div id="type-pie">
      <span>Type</span>
      <a class="reset" href="javascript:typePie.filterAll();dc.redrawAll();" style="display: none;">reset</a>
      <span class="reset" style="display: none;">Current filter: <span class="filter"></span></span>
    </div>

JavaScript

var data = [
    {type: 'foo', a: 10, b: 9, c: 11, d: 2},
    {type: 'bar', a: 1, b: 4, c: 2, d: 3},
    {type: 'foo', a: 0, b: 2, c: 1, d: 22},
    {type: 'bar', a: 11, b: 5, c: 6, d: 5}
];
var ndx = crossfilter(data);

function regroup(dim, cols) {
    var _groupAll = dim.groupAll().reduce(
        function(p, v) { // add
            cols.forEach(function(c) {
                p[c] += v[c];
            });
            return p;
        },
        function(p, v) { // remove
            cols.forEach(function(c) {
                p[c] -= v[c];
            });
            return p;
        },
        function() { // init
            var p = {};
            cols.forEach(function(c) {
                p[c] = 0;
            });
            return p;
        });
    return {
        all: function() {
            // or _.pairs, anything to turn the object into an array
            return d3.map(_groupAll.value()).entries();
        }
    };
}
// it doesn't really matter what you index the dimension on,
// because you won't be able to filter on this dimension
// we just need something to call .groupAll on.
var dim = ndx.dimension(function(r) { return r.a; });
var sidewaysGroup = regroup(dim, ['a', 'b', 'c', 'd']);

var typeDim = ndx.dimension(function(r) { return r.type; });

var sidewaysRow = dc.rowChart('#sideways-row')
        .width(350).height(200)
        .dimension(dim)
        .group(sidewaysGroup)
        .elasticX(true);

var typePie = dc.pieChart('#type-pie')
        .width(400).height(400)
        .dimension(typeDim)
        .group(typeDim.group());

dc.renderAll();