title: Properly display bin width in barChart using dc.js and crossfilter.js
body: <p>I'm making a bar chart using the Dimensional Charting javascript library <a href="http://nickqizhu.github.com/dc.js/" rel="noreferrer">dc.js</a>, which is based on d3 and crossfilter.</p>
  <p>All I want to do is display a histogram with a specified number of bins, this should be easy using the <code>barChart</code> function.</p>
  <p>I have an array called <code>data</code> which contains floating-point values between 0 and 90000, and I just want to display the distribution using a histogram with 10 bins.</p>
  <p>I use the following code to produce the histogram below:</p>
  <pre class="lang-js prettyprint-override"><code>  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(&quot;#&quot; + 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);
  </code></pre>
  <p><img src="https://i.stack.imgur.com/QauvC.png" alt="histogram" /></p>
  <p>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?</p>