Properly display bin width in barChart using dc.js and crossfilter.js

Question

I'm making a bar chart using the Dimensional Charting javascript library dc.js, which is based on d3 and crossfilter.

All I want to do is display a histogram with a specified number of bins, this should be easy using the barChart function.

I have an array called data which contains floating-point values between 0 and 90000, and I just want to display the distribution using a histogram with 10 bins.

I use the following code to produce the histogram below:

  var cf = crossfilter(data);
  var dim = cf.dimension(function(d){ return d[attribute.name]; });

  var n_bins = 10;
  var xExtent = d3.extent(data, function(d) { return d[attribute.name]; });
  var binWidth = (xExtent[1] - xExtent[0]) / n_bins;
  grp = dim.group(function(d){return Math.floor(d / binWidth) * binWidth;});
  chart = dc.barChart("#" + id_name);
  chart.width(200)
    .height(180)
    .margins({top: 15, right: 10, bottom: 20, left: 40})
    .dimension(dim)
    .group(grp)
    .round(Math.floor)
    .centerBar(false)
    .x(d3.scale.linear().domain(xExtent).range([0,n_bins]))
    .elasticY(true)
    .xAxis()
    .ticks(4);

That doesn't really look right: each bar is really skinny! I want a normal looking histogram, where the bars are thick and nearly touch each other, with maybe a couple of pixels of padding between each bar. Any idea what I'm doing wrong?

Answer 1

Bar charts in dc.js use the xUnits function to automatically calculate the width of the bars in a histogram based on the range of your x-axis. If you want to set the width to a static value you can use a custom xUnits function for example:

chart.xUnits(function(){return 10;});

This should give you a more fitting width.