DC.js - Scatter Plot Not Updating

by DJ Martin

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">
<table id="project-data">
    <tr>
        <th>Project</th>
        <th>Person</th>
        <th>Count</th>
    </tr>
</table>

JavaScript

var chartExample = {
    initChart: function (data){

        var ndx = crossfilter(data),
            membershipDimension = ndx.dimension(function (d) {
                return d.teamMember + ' --- ' + d.project;
            }),
            membershipGroup = membershipDimension.group().reduce(

            function (p, d) {
                p.person = d.teamMember;
                p.project = d.project;
                p.count++;
                return p;
            },

            function (p, d) {
                p.count--;
                return p;
            },

            function () {
                return {
                    count: 0,
                    person: "",
                    project: ""
                };
            });
        membershipGroup.top(Infinity).forEach(function (d) {
           
           var htmlToAdd = "<tr><td>" + d.value.project + "</td><td>" + d.value.person + "</td><td>" + d.value.count + "</td>";
            $("#project-data").append(htmlToAdd);
        });
    },
    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"
        }];
        chartExample.initChart(projectActions);
    }
};

chartExample.initData();