A Stacked area chart is the extension of a basic area chart. It displays the evolution of a numerical value for several groups on the same chart, stacked on top of each other. Stacked area chart has pros and cons, read more about it here.
The hardest part in stacked area chart creation is the use of the
d3.stack() function to stack the data. Once this step is
done, each group can be added thanks to the
d3.area() function. I strongly advise to understand how
to do a basic area chart before
trying the examples below.
You probably want to understand how to build a basic area chart before trying the stacked version.
Stacked area from long input
The most basic stacked area chart you can do in d3.js.
Keeping only the core code.
Input format:long (tidy)
A stacked area chart showing the evolution of a few baby names in the US. Zoom on a specific time frame through brushing. Highlight a specific group by hovering the legend. Double click to unzoom.Code here
The efficiency of stacked area graph is discussed and it must be used with care. They are great to study the evolution of the whole and the relative proportion of each group. However, they are not appropriate to study the evolution of each individual group. (Read more). Using small multiple is often a good alternative to highlight the evolution of each group.