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

Stack! #48

Closed mbostock closed 8 years ago

mbostock commented 8 years ago

Fixes #32. TODO:

mbostock commented 8 years ago

screen shot 2015-12-09 at 3 11 13 pm

curran commented 8 years ago

There is an eerie similarity between pie layout, stack layout, and ordinal range bands. They do such similar things, and padding seems relevant to all of them. I wonder if they could be somehow unified..

For example, might it make sense to add padding logic (innerPadding, outerPadding) in the stack layout, which would be very similar to the padding logic of pie layout and ordinal range bands.

I'm not sure, maybe there are too many use-case-specific things across these different APIs and unifying them doesn't make sense, but I thought I'd just put in my 2¢. Related to https://github.com/d3/d3-shape/issues/41

mbostock commented 8 years ago

All could be considered ways of dividing 1-dimensional space, but I think they are sufficiently different to justify their independence.

For instance: The pie generator has several characteristics are specific to dividing an angular domain. ordinal.rangeBands doesn’t divide by value, but instead divides the area uniformly. And I don’t think the area generator should support padding, since that would apply a vertical offset between layers:

screen shot 2015-12-13 at 8 19 48 am

You’re more likely to want a stroke to separate layers (albeit at the expense of penalizing the thin layers and spikes):

screen shot 2015-12-13 at 8 20 37 am

Likewise the stack layout understands how to compute a moving baseline, something that seems like overkill for the pie layout.

curran commented 8 years ago

Thank you for your thoughts on this.

I did an experiment to see how padding might look for streamgraphs:

thumbnail

This has a different quality than your example with jagged breaks. It's almost like it makes the absence of certain segments more pronounced. This is a different effect than you'd get by adding stroke to the layers.