Stacked Area Graph
Source: Data Visualisation Catalogue - Stacked Area Graph
Why This Belongs In The Compiler Gallery
The catalogue describes stacked area graphs as multiple area series where each series starts from the boundary left by the previous series. That makes it a direct test of whether the compiler can combine data-derived stack boundaries with path geometry, rather than only drawing a single area down to zero.
Data Contract
Each raw row represents one series value at one ordered period.
| Field | Type | Purpose |
|---|---|---|
period | ordinal | Ordered time/category position on the x-axis. |
periodIndex | quantitative | Stable sort key for path construction. |
series | categorical | Stack member and color key. |
value | quantitative | Raw magnitude. |
start | quantitative, derived | Lower area boundary produced by the stack transform. |
end | quantitative, derived | Upper area boundary produced by the stack transform. |
Expected Visual
The faithful catalogue version should show colored bands sharing the same x positions, with the total height of all bands representing the combined value at each period.
| Element | Expected treatment |
|---|---|
| Areas | Smooth filled path bands between y0: start and y1: end. |
| Boundaries | Optional upper boundary paths for readable stack edges. |
| Color | Ordinal palette keyed by series. |
| Baseline | Bottom series starts at zero; upper series starts at the previous series boundary. |
| Legend | Needed for series colors. |
Compiler Mapping
| Compiler part | Mapping |
|---|---|
| Data source | raw-area-series and derived segments. |
| Transform | stack computes start and end per period/series. |
| Scales | x: band, y: linear, color: ordinal. |
| Layers | Smooth path bands using y0 and y1, plus optional edge paths. |
| Guides | Generated x/y axes, y gridlines, x gridlines, and a generated color legend. |
Faithfulness Notes
This implementation covers the catalogue's simple stacked area form, and the same primitives now support the Stream Graph gallery route. Remaining variants need 100 percent mode coverage for area charts, richer interpolation policies, and stream-specific ordering/baseline options.