JSFiddle - React, Tailwind, and code Playground

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
}];



var ndx = crossfilter(data);

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

var weekdayAvgGroup = weekdayDimension.group(function (d) {
    return d;
});

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)
    .xUnits(dc.units.ordinal)
    .elasticX(true)
    .elasticY(true)
    .renderLabel(true);

dc.renderAll();