[Solved]-Convert vertical stacked bar to horizontal stacked bar D3.js v4-d3.js

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)

   bar_enter.append("rect")
   .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:

HORIZONTAL STACKED BAR CHART DEMO

Hope this helps.