d3+crossfilter: Date-axis renders pixelthin bars

Question

I spent the better part of the day trying to get a nice Date-axis histogram, to the extent that I'm posting my first question on stackoverflow.

The axis and the stacking are just the way I want it, however the bars are really thin for no (to me) apparent reason. In other words, I would really appreciate some help.

Here's a minimized version (I'm using the dc.js library, however I'm pretty confident the challenges is on d3+crossfilters behalf):

var jsonstr = [{"timestamp": "2013-06-13T11:04:24.729Z"},{"timestamp": "2013-06-17T11:03:24.729Z"},{"timestamp": "2013-06-17T11:02:24.729Z"},{"timestamp": "2013-06-19T11:02:14.129Z"}];

var ndx = crossfilter(jsonstr);

var timestampD = ndx.dimension(function (d) {
    return new Date(d.timestamp);
});

var timestampDG = timestampD.group(function (d) {
    return d3.time.day(d);
});

var barChart = dc.barChart("#dc-bar");
barChart.width(500)
    .height(250)
    .dimension(timestampD)
    .group(timestampDG)
    .x(d3.time.scale().domain([(new Date(2013,05,12)), (new Date(2013,05,20))]).nice(d3.time.day))
    .xAxis().tickFormat(function (x) {
        return x.getDate() + "/" + (x.getMonth()+1);
    });

dc.renderAll();

Trish

Answer 1

I think the problem is actually with how you're using dc.js; you don't specify what units the barchart should be in. Try this:

barChart
    .width(500)
    .height(250)
    .dimension(timestampD)
    .xUnits(d3.time.days)
    .ect

Efface

I spent ~5 hours frustrated by this problem last month; glad I could spare someone else the pain. – Efface

Answer 2

For anyone else having this problem, for whom Adam's answer doesn't seem to do anything, make sure you don't have elasticX set to true as I did.

Actino

Thank you! I was struggling with my time scale (nothing would show up) ultil just came across your comment. – Discussant