dc.js not respecting xUnits

Question

I'm trying to reduce the number of points in a DC.js line chart to improve performance. The docs lead me to believe xUnits() is the way to do this:

The coordinate grid chart uses the xUnits function to calculate the number of data projections on x axis such as the number of bars for a bar chart or the number of dots for a line chart.

but xUnits does not even seem to be used:

http://jsfiddle.net/m5tguakf/2/

What am I doing wrong?

Gordon Gordon · Accepted Answer · 2016-08-15T12:51:16

The number of points is actually determined by crossfilter - dc.js doesn't do any aggregation on its own, so it has no way to add or reduce the number of points.

That documentation may be misleading - it doesn't alter the shape of the data. xUnits is really just needed for dc.js to know the number of elements it is going to draw. It's used for two purposes:

to determine the width of bars or box-plots
to know whether the x scale is ordinal or quantitative

Could dc.js just count the number of points in the crossfilter group? Perhaps.

Anyway, to get back to your original question: if you want to reduce the number of points drawn, aggregate your data differently in your group. Usually this means creating larger bins which either sum or average the data which fall into that interval.

As a simple example, you can combine every other point in your fiddle by binning by even numbers, like so:

var BINSIZE = 2;
  // ...
  speedSumGroup = runDimension
     .group(function(r) { return Math.floor(r/BINSIZE) * BINSIZE; })
  // ...

http://jsfiddle.net/gordonwoodhull/djrhodkj/2/

This causes e.g. both Run 6 and Run 7 to fall in the same bin, because they have the same group key. In a real example, you'd probably want to average them, as shown in the annotated stock example.

dc.js not respecting xUnits

1 Answers