[Solved]-D3.JS Histogram: error aligning bars when updating data-d3.js

On line 239—

bar.append("rect")

—you probably meant .select, not .append.

Your current code is appending a new set of <rect>s every time the chart updates, and the old ones aren't aligned right.

Note the increasing size of the d3 selection that I'm running in the dev tools on the right.

When fixed, it looks like this:

Editing lines 232 - 242 in index.html so that bar was not called twice fixed the problem, as well as changing .append to .select.

Previous code:

bar.data(newhistdata)
  .transition()
  .duration(1000)
  .attr("transform", function(d,i) {
      return "translate(" + x2(i * binsize + minbin) + "," + y(d.numFlips) + ")"; 
    });
bar.append("rect")
  .attr("x", x(binmargin))
  .attr("width", x(binsize - 2 * binmargin))
  .attr("height", function(d) { return height - y(d.numFlips); });

Edited:

bar.data(newhistdata)
  .transition()
  .duration(1000)
  .attr("transform", function(d,i) {
      return "translate(" + x2(i * binsize + minbin) + "," + y(d.numFlips) + ")"; 
    })
  .select('rect')
  .attr('x', x(binmargin))
  .attr("width", x(binsize - 2 * binmargin))
  .attr("height", function(d) { return height - y(d.numFlips); });