O'Reilly logo

Data Visualization: Representing Information on Modern Web by Swizec Teller, Ændrew Rininsland, Simon Timms, Andy Kirk

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Showing popularity through time with stack

D3's official docs say:

"The stack layout takes a two-dimensional array of data and computes a baseline; the baseline is then propagated to the above layers, so as to produce a stacked graph."

Not clear at all, but I am hard pressed to come up with anything better. The stack layout calculates where one layer ends and another begins. An example should help.

We're going to make a layered timeline of donations over the 5-year sample, stretching as far back as 2010, with the width of each layer telling us how many donations went where at a certain time. This timeline is called a streamgraph.

To label layers, we're going to create a mouseover behavior that highlights a layer and shows a tooltip with the donation ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required