A streamgraph is a type of stacked area chart. It represents the evolution of a numerical variable for several groups. Areas are usually displayed around a central axis, and edges are rounded to give a flowing shape.
Building a streamgraph follows the same process than for a
stacked area chart. Stack the data with
d3.stack() function, but use the
stackOffsetSilhouette offset to position shapes around
the central axis.
The most basic streamgraph you can do in d3.js. Keeping only
the core code.
Input format: wide (untidy)
Here is a streamchart showing the evolution of a few baby names in the
US during the previous century.
about it here. Axis are customized, color palette is used, hover
feature is added.
Hover a group to get the name.
A few blocks with more complicated codes to showcase the possibility of d3 for streamgraphs.