DC.js - Grouping

by Daniel Ha

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.js"></script>
<div id="teammateChart"></div>

CSS

pre {display:none;}

JavaScript

var chartExample = {
    initChart: function (data) {

        var ndx = crossfilter(data),
            teamMemberDimension = ndx.dimension(function (d) {
   var amount = d.amount;
        if (amount<=10) {
            return '< 10';
        } else if (amount >10 && amount < 50) {
            return '<50';
        } else if (amount >= 50 && amount <= 80) {
            return '< 80';
        } else {
            return '> 80';
        }
    }),
            teamMemberChart = dc.pieChart("#teammateChart"),
            teamMemberGroup = teamMemberDimension.group().reduceSum(function(d) {return d.amount;});
            
        teamMemberChart
            .width(540)
            .height(440)
            .dimension(teamMemberDimension)
            .group(teamMemberGroup)
;
        
        dc.renderAll();
    },
    initData: function () {
       var projectActions = [{
            project: "Website Hosting",
            amount: "25",
            action: "email"
        }, {
            project: "Website Design",
            amount: "30",
            action: "phoneCall"
        }, {
            project: "Design",
            amount: "12",
            action: "email"
        },{
            project: "Design",
            amount: "12",
            action: "email"
        }, {
            project: "Website Design",
            amount: "25",
            action: "design"
        }, {
            project: "Design",
            amount: "10",
            action: "email"
        }, {
            project: "Redaction",
            amount: "5",
            action: "email"
        }];
        chartExample.initChart(projectActions);
    }
};

chartExample.initData();