title: How to create a histogram using d3.js and crossfilter data?
body: <p>Here's my <a href="http://dev.anuary.com/441bad2f-bcc8-5fe5-af46-f15308f3aee9/" rel="nofollow noreferrer">demo</a> (permanent link; might take a second to load).</p>
  
  <p>I'm having a few problems with it:</p>
  
  <ol>
  <li><p>The crossfilter key does not reflect the upper boundary. Therefore, the x-axis is missing one step.</p>
  
  <p><img src="https://i.stack.imgur.com/BQUzu.png" alt="enter image description here"></p>
  
  <p>I managed to fix it by getting one group-step size (<code>group.all()[1] - group.all()[0]</code>) and then adding it to the <code>d3.extent(group.all())[1]</code>. Because it is a dirty fix, I did not include this to the demo (there might by a data gap). What is a less dirty way to get the group-step size/fix the x-axis?</p></li>
  <li><p>There are uneven gaps between the bars. I can't figure out how to fix x.scale inconsistency with different data sets.</p>
  
  <p><img src="https://i.stack.imgur.com/1Ii6y.png" alt="enter image description here"></p>
  
  <p>I want the bar-width to adapt automatically to the available graph width. Therefore, I calculate the optimal bar width and then (if needed) resize the graph itself:</p>
  
  <pre><code>bar_width = math.round(graph_width/data_length);
  graph_width = bar_width*data_length;
  </code></pre>
  
  <p>Under this condition, there is no way <code>x.scale</code> can return uneven data for any key value, yet it does. There is no magic; I am simply overlooking something. But what is it?</p>
  
  <p>When <code>x.scale</code> <em>is</em> messed then deducting the <code>bar_width</code> from the <code>graph_width</code> before setting the <code>x.scale</code> range fixes the problem. Though, I can't figure out the condition to detect when x.scale is a not acting as expected.</p></li>
  </ol>