Cascade

<zyna-cascade>

Hierarchical split waterfall. A total fractures downward through successive levels; each level shows its proportional splits as stacked blocks, connected to their parent by tapering alluvial ribbons. It is "where did it go", level by level.

Demo

Where the appeal went

HTML 
<zyna-cascade
  variant="sankey"
  level-labels='["Total","Region","Programme"]'
  data='{
    "label":"Appeal","children":[
      {"label":"East Africa","children":[
        {"label":"Food","value":38},{"label":"WASH","value":22},{"label":"Health","value":15}]},
      {"label":"MENA","children":[
        {"label":"Shelter","value":30},{"label":"Protection","value":18}]},
      {"label":"Sahel","value":24}
    ]}'
></zyna-cascade>
Attribute Type Default Description
dataJSON—Nested {label, value?, children}. Parent values are optional — they're summed from the leaves. You can also pass a bare array of top-level splits.
level-labelsJSON—Array naming each tier, shown down the left edge (e.g. ["Total","Region","Programme"]).
min-sharenumber0.03Splits below this fraction of their parent collapse into a single "Other" block.
colorstringvar(--zyna)Accent for the first branch; each top-level branch takes its own palette colour.
themedark | lightdarkControls text and block colour scheme.
heightnumberautoExplicit height in px. Auto-derived from width when omitted.
label-formatstring—D3-style number format for block value labels.
variantwaterfall | sankeywaterfallVisual style. sankey turns the flows into molten gradient ribbons with a soft bloom; the default is the flat split waterfall.

Usage Tips

  • Leave parent values off and let the chart sum the leaves — one less thing to keep in sync.
  • Tune min-share up to hide the long tail, or down to keep every sliver visible.
  • Leaf colours are inherited from their top-level branch, so each region and its programmes read as one colour family.
  • Nesting is capped at four levels deep — past that, roll detail into the leaf labels.