score:1

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.

before

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:

after

score:1

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); });

Related Query