title: How to make a horizontal Stacked bar chart with D3
body: <p>I just started using D3.js, and have been trying to make this stacked bar chart horizontal(link below). </p>
  
  <p><a href="https://github.com/DeBraid/www.cacheflow.ca/blob/master/styles/js/d3kickchart.js" rel="nofollow">https://github.com/DeBraid/www.cacheflow.ca/blob/master/styles/js/d3kickchart.js</a>
  <a href="http://cacheflow.ca/blog/index.html" rel="nofollow">http://cacheflow.ca/blog/index.html</a> (You can find the chart in the middle of the page)</p>
  
  <p>As a result, I completely stacked on the half way... I would greatly appreciate it if anyone gives me some guides to archive this.</p>
  
  <p><strong>Problem Solved:</strong>
  I found the way to made the virtical bar chart horizontal. Hope this could help someone who are facing same problem.
  Below is the fixed code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
  
  &lt;/style&gt;
  
  &lt;body&gt;
  &lt;div id="chart-svg"&gt;&lt;/div&gt;    
  
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;    
  var margin = {top: 20, right: 50, bottom: 100, left: 75},
      width = 740 - margin.left - margin.right,
      height = 170 - margin.top - margin.bottom;
  
  var svg = d3.select("#chart-svg").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  d3.csv("mta.csv", function (data){
  
      var headers = ["meeting","construction","management","aa","bb","cc"];
  
      var layers = d3.layout.stack()(headers.map(function(period) {
          return data.map(function(d) {
            return {x: d.Category, y: +d[period]};
          });
      }));
  
  console.log(layers);
  
      var yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); });
      var yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
  
      var yScale = d3.scale.ordinal()
          .domain(layers[0].map(function(d) { return d.x; }))
          .rangeRoundBands([25, height], .2);
  
      var x = d3.scale.linear()
          .domain([0, yStackMax])
          .range([0, width]);
  
      var color = d3.scale.ordinal()
          .domain(headers)
          .range(["#98ABC5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c"]);
  
      var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom")
          .tickSize(1)
          .tickPadding(15)
          .tickFormat(d3.format(".2s"));
  
      var yAxis = d3.svg.axis()
          .scale(yScale)
          .tickSize(0)
          .tickPadding(6)
          .orient("left");
  
      var layer = svg.selectAll(".layer")
          .data(layers)
          .enter().append("g")
          .attr("class", "layer")
          .style("fill", function(d, i) { return color(i); });
  
      var rect = layer.selectAll("rect")
          .data(function(d) { return d; })
          .enter().append("rect")
          .attr("y", function(d) { return yScale(d.x); })
          .attr("x", 0)
          .attr("height", yScale.rangeBand())
          .attr("width", 0)
          .on("click", function(d) {
               console.log(d);
          });
  
      rect.transition()
          .delay(function(d, i) { return i * 100; })
          .attr("x", function(d) { return x(d.y0); })
          .attr("width", function(d) { return x(d.y); });
  
     //********** AXES ************
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .selectAll("text").style("text-anchor", "end")
              .attr("dx", "-.8em")
              .attr("dy", ".15em");
  
      svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(0,0)")
          .call(yAxis)
        .append("text")
          .attr({"x": 0 / 2, "y": height+50})
          .attr("dx", ".75em")
          .style("text-anchor", "end")
          .text("Time");
  
  
      var legend = svg.selectAll(".legend")
          .data(headers.slice().reverse())
              .enter().append("g")
              .attr("class", "legend")
              .attr("transform", function(d, i) { return "translate(-20," + i * 20 + ")"; });
  
          legend.append("rect")
              .attr("x", width - 18)
              .attr("width", 18)
              .attr("height", 18)
              .style("fill", color);
  
          legend.append("text")
                .attr("x", width - 24)
                .attr("y", 9)
                .attr("dy", ".35em")
                .style("text-anchor", "end")
                .text(function(d) { return d;  });
  });
  &lt;/script&gt;
  </code></pre>