DC.js - Grouping
HTML
<script src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/dc.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://underscorejs.org/underscore-min.js"></script>
<div id="teammateChart"></div>
<div id="teammateChart2"></div>
<div id="teammateChart3"></div>
JavaScript
var chartExample = {
initChart: function (data) {
var ndx = crossfilter(data),
teamMemberDimension = ndx.dimension(function (d) {
return d.teamMember;
}),
teamMemberDimension2 = ndx.dimension(function (d) {
return d.teamMember;
}),
teamMemberChart = dc.rowChart("#teammateChart"),
teamMemberChart2 = dc.rowChart("#teammateChart2"),
teamMemberChart3 = dc.rowChart("#teammateChart3"),
teamMemberGroup = teamMemberDimension.group().reduce(
function (p, d) {
if (d.project in p.projects) p.projects[d.project]++;
else {
p.projects[d.project] = 1;
p.projectCount++;
}
return p;
},
function (p, d) {
p.projects[d.project]--;
if (p.projects[d.project] === 0) {
delete p.projects[d.project];
p.projectCount--;
}
return p;
},
function () {
return {
projectCount: 0,
projects: {}
};
}),
teamMemberGroup2 = teamMemberDimension2.group().reduce(
function (p, d) {
if (d.project in p.projects) p.projects[d.project]++;
else {
p.projects[d.project] = 1;
p.projectCount++;
}
return p;
},
function (p, d) {
p.projects[d.project]--;
if (p.projects[d.project] === 0) {
delete p.projects[d.project];
p.projectCount--;
}
return p;
},
function () {
return {
projectCount: 0,
...