Charts B

Sankey

Flow from sources to targets, with thickness proportional to volume.

data-u="sankey"Family B

Example

Sankey chart

Flows colored by source, from work to deliverables. Hover a source or target to isolate its flows.

<article class="u-chartb-card">
  <div class="u-chartb-panel" data-u="sankey" data-u-props="{&quot;label&quot;:&quot;Team hours&quot;,&quot;unit&quot;:&quot;&quot;,&quot;sources&quot;:[&quot;Product&quot;,&quot;Support&quot;,&quot;Sales&quot;,&quot;Infra&quot;,&quot;Learning&quot;],&quot;dests&quot;:[&quot;Code&quot;,&quot;Customers&quot;,&quot;Meetings&quot;,&quot;Docs&quot;,&quot;Review&quot;,&quot;Other&quot;],&quot;footL&quot;:&quot;Hours logged&quot;,&quot;footR&quot;:&quot;Share of hours&quot;,&quot;periods&quot;:[{&quot;label&quot;:&quot;This week&quot;,&quot;matrix&quot;:[[22,0,6,6,8,2],[2,12,3,3,2,2],[0,12,6,1,0,1],[10,1,2,1,3,1],[5,0,0,6,1,2]]},{&quot;label&quot;:&quot;Last week&quot;,&quot;matrix&quot;:[[20,0,7,5,7,3],[3,10,4,2,2,3],[0,10,7,1,0,2],[9,1,3,1,2,1],[4,0,0,7,1,2]]},{&quot;label&quot;:&quot;This month&quot;,&quot;matrix&quot;:[[90,0,24,26,30,8],[8,48,12,12,8,8],[0,50,24,4,0,4],[40,4,8,4,12,4],[20,0,0,24,4,8]]}]}"></div>
  <div class="u-chartb-copy">
    <h3>Sankey chart</h3>
    <p>Flows colored by source, from work to deliverables. Hover a source or target to isolate its flows.</p>
  </div>
</article>

Installation

Just this chart, with the core and the tokens:

curl -fsSL unslop.leallabs.dev/i | sh -s add sankey

Dependency Pulls in b-shell (shell for B charts). The installer downloads it and puts it in the right order.

The full card from the example, as HTML ready to paste:

curl -fsSL unslop.leallabs.dev/i | sh -s add chart-sankey

Family B: shell u-chartb-card > the data-u with the u-chartb-panel class, then div.u-chartb-copy with h3 and p.

Props

They go in data-u-props, as JSON. Each item in periods becomes an option in the picker and the chart animates from the old data to the new.

Prop	Type	Default	What it does
`label`	string	no default	Small label at the top of the card.
`unit`	string	h	Value suffix.
`sources`	array	no default	Source names (matrix rows).
`dests`	array	no default	Target names (matrix columns).
`footL`	string	no default	Label for the left tile.
`footR`	string	no default	Label for the right tile.
`periods`	array	no default	List of `{label, matrix}`. matrix`[source][target]`.
`period`	number	0	Index of the period that opens selected.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
chart svg	`role="img"` and `aria-label`	`"Label: flow from sources to targets"`.
period list	`role="listbox"`, `role="option"`	Opens with `aria-expanded` and marks the option in `aria-selected`.

Keyboard

Key	Does
Enter or Space	opens the period list
Up and down arrows	moves through the options
Esc	closes without changing
Tab	closes and moves focus on

Events and API

No public events. The period change happens inside the card.