title: Horizontal stacked-bar charts
body: <p>I'm trying to make a stacked bar chart that goes from left to right. Right now, I'm having some issues with how the spacing and such would go, since I'm not really familiar with the graphing system on computers.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>var canvas = d3.select("#canvas");
  canvas.width = 500;
  canvas.height = 500;
  
  //rectangle values
  var values = [{
      cValue: Math.abs(xthree),
      color: '#A0F'
  }, {
      cValue: Math.abs(xtwo),
      color: '#FA0'
  }, {
      cValue: Math.abs(xone),
      color: '#0AF'
  }, {
      cValue: Math.abs(xzero),
      color: '#AF0'
  }];
  
  //var colours = ['#A0F', '#FA0', '#0AF', '#AF0'];
  
  var yOffset = 0;
  
  //create scale
  //yRange2 = d3.scale.linear().range([canvas.height - MARGINS.top,
  //MARGINS.bottom]).domain([0, 10]);
  
  //yrange2- imp-Set domain to be set to biggest number
  yRange2 = d3.scale.linear()
      .domain([0, 10])
      .range([MARGINS.bottom, canvas.height - MARGINS.top]);
  
  //Process the data
  
  for (var i = 0; i &lt; values.length; i++) {
  
      var datum = {
  
          value: yRange2(values[i].cValue),
          colour: values[i].color,
          y: 0,
          x: yOffset
  
      }
  
      yOffset += (canvas.height - MARGINS.top - datum.value);
  
      data.push(datum)
  }
  
  //setup y
  yAxis2 = d3.svg.axis()
      .scale(yRange2)
      .tickSize(5)
      .orient("bottom")
      .tickSubdivide(true);
  
  canvas.append("svg:g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (3 * MARGINS.bottom) + ")")
      .call(yAxis2);
  
  var bars = canvas.selectAll('rect').data(data)
  
  var cumValues = 0;
  bars
      .enter()
      .append('rect')
      .attr("class", "myBars" + function (d) {
          return d.colour;
      })
      .attr({
          height: 30,
          y: 20,
          x: function (d) {
              return d.value - d.x; &lt;-----------------------------------
          },
          width: function (d) {
              return canvas.width - MARGINS.left - d.value; &lt;-----------
          }
      })
      .style({
          fill: function (d) {
              return d.colour
          }
      });
  </code></pre>
  
  <p>Right now, I'm having problems with the way that the rectangles would be placed, which I've highlighted in the code.</p>
  
  <p><a href="http://jsfiddle.net/ehv6fb1L/3/" rel="nofollow">Here's the full code</a></p>