DC.js - Grouping

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>
<div id="teammateChart2"></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().reduceCount(),
            teamMemberChart2 = dc.rowChart("#teammateChart2");
        
        teamMemberChart
            .width(120)
            .height(120)
            .dimension(teamMemberDimension)
            .group(teamMemberGroup)
            .elasticX(true);
        
        teamMemberChart2
            .width(540)
            .height(440)
            .dimension(teamMemberDimension)
            .group(teamMemberGroup)
            .elasticX(true);
        
        dc.renderAll();
    },
    initData: function () {
        var projectActions = [{
            project: "Website Hosting",
            teamMember: "Sam",
            action: "email"
        }, {
            project: "Website Hosting",
            teamMember: "Sam",
            action: "phoneCall"
        }, {
            project: "Budjet",
            teamMember: "Joe",
            action: "email"
        }, {
            project: "Website Design",
            teamMember: "Joe",
            action: "design"
        }, {
            project: "Budget",
            teamMember: "Sam",
            action: "email"
        }, {
            project: "Foo",
            teamMember: "Sam",
            action: "email"
        }];
        chartExample.initChart(projectActions);
    }
};

chartExample.initData();