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;
}),
teamMemberChart = dc.rowChart("#teammateChart"),
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: {}
};
});
teamMemberChart
.width(270)
.height(220)
.dimension(teamMemberDimension)
.group(teamMemberGroup)
.valueAccessor(function (d) {
return d.value.projectCount;
})
.elasticX(true);
var groupings = teamMemberGroup.top(Infinity);
groupings.forEach(function (x) {
console.log(x.key + x.value.projectCount);
});
var dimData = teamMemberDimension.top(10);
dimData.forEach(function (x) {
console.log(JSON.stringify(x));
});
dc.renderAll();
},
initData: function () {
var projectActions = [{
project: "Website Hosting",
teamMember: "Sam",
action: "email"
}, {
project: "Website Hosting",
teamMember: "Sam",
action: "phoneCall"
}, {
project: "Budjet",
...