DC.js - Grouping

by Nicolas

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js"></script>
<script src="http://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="teammateChart"></div>

JavaScript

var chartExample = {
    initChart: function (data) {

        var ndx = crossfilter(data),
            amountDimension = ndx.dimension(function (d) {
                return d.project;
            }),
            amountChart = dc.rowChart("#teammateChart"),
            amountGroup = amountDimension.group().reduce(

            function (p, d) {
                if (d.amount in p.projects) p.projects[d.project]++;
                else {
                    p.projects[d.project] = d.amount;
                    p.projectCount++;
                }
                return p;
            },

            function (p, d) {
                p.projects[d.amount]--;
                if (p.projects[d.amount] === 0) {
                    delete p.projects[d.amount];
                    p.projectCount--;
                }
                return p;
            },

            function () {
                return {
                    projectCount: 0,
                    projects: {}
                };
            });
        amountChart
            .width(270)
            .height(220)
            .dimension(amountDimension)
            .group(amountGroup)
            .valueAccessor(function (d) {
            return d.value.projectCount;
        })
            .elasticX(true);
        
        dc.renderAll();
    },
    initData: function () {
        var projectActions = [{
            project: "Website Hosting",
            amount: "25",
            action: "email"
        }, {
            project: "Website Hosting",
            amount: "25",
            action: "phoneCall"
        }, {
            project: "Budjet",
            amount: "10",
            action: "email"
        }, {
            project: "Website Design",
            amount: "10",
            action: "design"
        }, {
            project: "Budget",
            amount: "10",
            action: "email"
        }, {
            project: "Foo",
            amount: "5",
            action: "email"
        }];
     ...