Use D3.js layout.stack() to make a normalized stacked bar chart

Question

I have something similar to: Normalized Stacked Bar Chart

Is it possible / appropriate to instead of calculating the upper Y and lower Y of each layer to use the d3.layout.stack() feature instead? I'm unsure so would like to know when and when not to use it.

Answer 1

This question is old, but it doesn't have the answer I was looking for. The example that Lars Kotthoff doesn't actually normalize the data as the data is provided as normalized already. To normalize your stack, add .offset('expand') to the stack initialization. Building off the stacked area chart example, the stack initialization would just be the following instead:

var stack = d3.layout.stack()
              .offset('expand')
              .values(function(d) { return d.values; });

Simple, but it took me hours before realizing it was in the documentation. Since this is one of the top results on Google now, hopefully this helps save some time for someone in the future.