Mike Bostock uses the following snippet to generate uniformly-spaced bins for a histogram:

var data = d3.layout.histogram()
.bins(x.ticks(20))
(values);

source

Is there any way to adapt this to a project that uses dc.js and crossfilter.js?

Essentially, I want to dynamically generate the bins and then use the chart to filter on a particular attribute. Total newbie to this. Any guidance would be appreciated!

Mike Bostock uses the following snippet to generate uniformly-spaced bins for a histogram:

var data = d3.layout.histogram()
.bins(x.ticks(20))
(values);

source

Is there any way to adapt this to a project that uses dc.js and crossfilter.js?

Essentially, I want to dynamically generate the bins and then use the chart to filter on a particular attribute. Total newbie to this. Any guidance would be appreciated!

• javascript
• d3.js
• dc.js
• crossfilter

1 Answer 1

dc.js supports histograms via crossfilter. Use a group for your bar chart that looks something like this:

var binwidth = 0.2;
var dim = ndx.dimension(function(d) { return d.x; });
var group = dim.group(function(d) { return binwidth * Math.floor(d.x/binwidth); });

This tells crossfilter to use keys binwidth apart.

And initialize the bar chart with these units:

chart.xUnits(dc.units.fp.precision(binwidth));