d3 / d3-shape

Graphical primitives for visualization, such as lines and areas.
https://d3js.org/d3-shape
ISC License
2.48k stars 308 forks source link

Using the stack generator for a waterfall chart? #54

Closed mbostock closed 8 years ago

mbostock commented 8 years ago

For example:

waterfall

As suggested in https://twitter.com/edouard_lopez/status/682140701707010048.

It might be interesting to think about a better default for stack.keys, too. The current default (empty) is safe, but perhaps this usage pattern suggests a different default expectation for the data and keys.

mbostock commented 8 years ago

Also, this particular example suggests that the stack layout might benefit from allowing negative values, too. (But perhaps it already works out of the box with negative values? Time to find out!)

mbostock commented 8 years ago

I tried this using the stack layout, and I think it’s still overkill. The stack layout expects multiple data points per series, and a waterfall chart only has one data point per series. You can do it, but it feels a lot simpler to just use array.reduce:

// Compute a simple “stack” by iterating over the data.
data.reduce(function(v, d) { return d.value1 = (d.value0 = v) + d.value; }, 0);

waterfall2