D3.js Stacked Bar Chart, Vertical to Horizontal

Question

I like to do this vertical chart ( http://bl.ocks.org/mbostock/3886208 ) on a horizontal chart.

Thanks for your help!

Code examples would be nice.

Answer 1

This is just a matter of changing the areas, axis, and then direct calculations:

var y = d3.scale.ordinal()
    .rangeRoundBands([height, 0], .1); // y becomes ordinal

var x = d3.scale.linear()
    .rangeRound([0, width]); // x becomes linear

// change state group to be positioned in the y now instead of x
var state = svg.selectAll(".state")
      .data(data)
      .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(0," + y(d.State) + ")"; });

// rect calculations become
 state.selectAll("rect")
    .data(function(d) { return d.ages; })
    .enter().append("rect")
    .attr("height", y.rangeBand()) // height in now the rangeband
    .attr("x", function(d) { return x(d.y0); }) // this is the horizontal position in the stack
    .attr("width", function(d) { return x(d.y1) - x(d.y0); }) // this is the horizontal "height" of the bar
    .style("fill", function(d) { return color(d.name); });

Here is a complete working example.