JSFiddle - React, Tailwind, and code Playground

by Gordon Woodhull

HTML

<script src="http://square.github.io/crossfilter/crossfilter.v1.min.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<script src="http://dc-js.github.io/dc.js/js/d3.js"></script>
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/dc.css">
<div id="dc-chart"></div>

JavaScript

var data = [{
    datetime: "2014-01-01 12:12:00",
    id: 0
}, {
    datetime: "2014-01-01 12:14:00",
    id: 1
}, {
    datetime: "2014-01-02 12:12:00",
    id: 2
}, {
    datetime: "2014-01-03 12:12:00",
    id: 3
}, {
    datetime: "2014-01-01 12:13:00",
    id: 4
},
// add some more dates to exercise this
   {
    datetime: "2014-01-08 08:12:00",
    id: 5
}, {
    datetime: "2014-01-15 16:10:00",
    id: 6
}, {
    datetime: "2014-01-09 07:00:00",
    id: 7
}];

// preprocess the dates
data.forEach(function(d) {
    d.datetime = new Date(d.datetime);
});



var ndx = crossfilter(data);

var weekdayDimension = ndx.dimension(function (d) {
    return d.datetime.getDay();
});


function average_map(m) {
    var sum = 0;
    m.forEach(function(k, v) {
        sum += v;
    });
    return m.size() ? sum / m.size() : 0;
}

// (identity function is the default, not needed here
var weekdayAvgGroup = weekdayDimension.group(
    /* function (d) {
    return d;
}
*/
).reduce(
    function(p, v) { // add
        var day = d3.time.day(v.datetime).getTime();
        p.map.set(day, p.map.has(day) ? p.map.get(day) + 1 : 1);
        p.avg = average_map(p.map);
        return p;
    },
    function(p, v) { // remove
        var day = d3.time.day(v.datetime).getTime();
        p.map.set(day, p.map.has(day) ? p.map.get(day) - 1 : 0);
        p.avg = average_map(p.map);
        return p;
    },
    function() { // init
        return {map: d3.map(), avg: 0};
    }
);

var weekdayChart = dc.barChart("#dc-chart");

weekdayChart.width(400)
    .height(400)
    .centerBar(false)
    .x(d3.scale.ordinal().domain(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]))
    .yAxisLabel("number ")
    .xAxisLabel("Weekday")
    .renderHorizontalGridLines(true)
    .dimension(weekdayDimension)
    .group(weekdayAvgGroup)
    .valueAccessor(function(kv) { return kv.value.avg; })
    .xUnits(dc.units.ordinal)
    .elasticX(true)
    .elasticY(true)
    .renderLabel(true);

dc.renderAll();