How to choose number of bins in a dc.js barchart?

Question

I have created a bar chart in dc.js:

d3.csv("input.csv", function (error, data) {
    data.forEach(function (x) {
        x.x = +x.x;
    });

    var ndx = crossfilter(data),
    dim1 = ndx.dimension(function (d) {
                return Math.floor(parseFloat(d['x']) * 10) / 10; 
            });
    var group1 = dim1.group(),

    chart = dc.barChart("#barchart");

    chart
        .width(500)
        .height(200)
        .dimension(dim1)
        .group(group1)
        .x(d3.scale.linear().domain([0,3]))
        .elasticY(true)
        .barPadding([0.4])

    chart.xAxis().tickFormat(function(d) {return d});
    chart.yAxis().ticks(10);
});

But the number of bars is low. I want to increase the number of bars displayed to 12.

How can I choose the number of bars?

Answer 1

These lines determine the number of bins:

dim1 = ndx.dimension(function (d) {
            return Math.floor(parseFloat(d['x']) * 10) / 10; 
        });
var group1 = dim1.group(),

What you are doing here is rounding down to the previous tenth (0.1). Thus any rows with x equal to 1.12, 1.16, 1.19 will be counted in the 1.1 bin, etc.

If you want an exact number of bins, you'll have to determine the range of x and divide that by the number of bins you want. If you don't need anything that exact, you could just fiddle with the number 10 there until you get what you want.

For example, changing it to

dim1 = ndx.dimension(function (d) {
            return Math.floor(parseFloat(d['x']) * 20) / 20; 
        });
var group1 = dim1.group(),

will give you twice as many bins, because it will round down to the previous twentieth (0.05).

So 1.12 would round to 1.10; and 1.16, 1.19 would round to 1.15, etc.

BTW, parseFloat is unnecessary, because you have already converted x to number with x.x = +x.x