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.