dc.js x-axis default domain - strange results

Question

I have noticed strange behavior while managing to make a simple bar chart with date by X-axis and integers by Y. Bar is generated correctly, but X axis looks strange: I don't set dimension and I'm sure that I have values from last month only (Jan 7 to now), but X axis is scaled to fit values from June 2013 to now.

So, I get 7 month empty on graphic and the little piece for my data during last month.

Can anyone suggest, where are these boundaries got from? I understand I probably have a bug in my code, but I haven't found any suitable information in dc's manual and have no idea where to search for it.

This is the way I'm using bar chart:

Create crossfilter for my data: filter = crossfilter(json);

Create dimension for plotted data:

var dimension = filter.dimension(function(d){
    var result = new Date(d.last_connected);

    /* debug code to ensure I have no date older than last month */
    if (!('last-date-min' in document))
        document['last-date-min'] = result;
    else if (result < document['last-date-min'])
        document['last-date-min'] = result;
    /* debug code end */

    return result;
});

Dimension is created and I ensured by debugger that the oldest date is 'Jan 7, 2014'. Creating group and checking latest date during grouping:

var group = dimension.group(function(d){
    var result = d3.time['day'].utc(d);

    /* debug code */
    if (!('late-date-dim-min' in document) )
        document['last-date-dim-min'] = result;
    else if (document['last-date-dim-min'] > result)
        document['last-date-dim-min'] = result;
    /* debug code end */

    return result;
});

Once group created, create chart and initialize X and Y axis:

c = bar_chart('last-day-chart', dimension, group);
c.x(d3.time.scale.utc());
c.xAxis().tickFormat(date_formatter);
c.xAxisPadding(1);
c.yAxis().tickFormat(formatter);
c.filterPrinter(date_filter_printer);

That's all: now I have a dataset, I sure that dataset has no dates older than one month, but I still getting chart for a 7-months period. Where is the cause of problem?

Additionally, I added debugging renderlet to examine details after rendering and I see strange results:

/* debug code */
c.renderlet( function(chart){
    debugger;
    var scale_x = c.x();
    var scale_range = scale_x.range();           // is [0;100] - why? What is this range?
    var min = document['last-date-min'];         // ok, Jan 2014
    var dim_min = document['last-date-dim-min']; // ok
    var scale_domain = scale_x.domain();         // is [0;63286] - why? What is 63286?
});
/**/

Sure, I examined d3.js manual as well as dc, but these explanations confused me when I'm trying to collate them with debugged values: scale.range: If values is specified, sets the scale's output range to the specified array of values. The array must contain two or more values, to match the cardinality of the input domain. The elements in the given array need not be numbers; Nothing like [0;100] in my data. scale.domain: returns the scale's current input domain. Where is [0;63286] from? Why not [Date("2014-01-07"), Date("2014-02-07")]? — Victor Istomin
I think I can help you if you can put together a concrete example of the problem. If possible, please try to reproduce the simplest form of your problem on jsfiddle by removing any code that doesn't directly impact your result. — DJ Martin

DJ Martin DJ Martin · Accepted Answer · 2014-02-19T09:33:11

This might be an issue with how you are parsing dates. My suspicion is that your code is reversing the month and the day.

Try something like:

var dateFormat = d3.time.format("%Y-%d-%m");
records.forEach(function(d) {
    d.date = dateFormat.parse(d.date);
});

Here is an example that uses a date formatter: http://jsfiddle.net/djmartin_umich/HAY2V/

Here is more information about this approach: https://github.com/mbostock/d3/wiki/Time-Formatting

dc.js x-axis default domain - strange results

1 Answers