Accepted answer

A few minor things were missing/incorrect:

  1. The group (<g>) containing the bars was being transformed incorrectly (I'm guessing you missed this while changing from vertical stacked to horizontal) i.e. the following line

    .attr("transform", function(d) { return "translate(" + y(d.rooms) + ",0)"; });

    translates the bar groups from the left and the y position would be 0 and hence the overlap. I've changed that to this:

    .attr("transform", function(d) { return "translate(0, " + y(d.rooms) + ")"; });
  2. The rects' x value is changed from x(d.y1) to x(d.y0) (might be a typo)

    .attr("height", y.bandwidth())
    .attr("x", function(d) { return x(d.y0); })
  3. Axis padding was missing for the scaleBand(). I've added that (check docs for more info)

    var y = d3.scaleBand()
      .rangeRound([height, 0]).padding(0.1);
  4. Reset the margins to adapt to the SVG dimensions:

    var margin = {top: 10, right: 60, bottom: 60, left: 50},

Combining all of the above, here's a fork of your codepen:


Hope this helps.

Related Query

More Query from same tag