Sankey Flow Diagram Features Block for React

Edit FLOWS at the top of the file: each is a source, a destination and a number of millions of events. Add a source or destination to SOURCES or DESTINATIONS and use its id in a flow. Node heights, band widths, offsets and curves are all derived from those numbers by small functions, so nothing else needs editing. Every source's flows should add up to its volume, which they do by construction.

Each node is a real button. Hovering or focusing it follows its flows; pressing it pins the highlight, and pressing it again lets go. A sentence under the diagram, announced politely to screen readers, says what the followed node sends or receives, such as "Warehouse receives 8M from Browser events, 6M from Server events and 3M from Webhooks".

The SVG is hidden from assistive technology. The nodes are two named lists of buttons with their daily volume, and a table of every flow sits in the page for screen readers: destinations as rows, sources as columns, with totals. It is the same table people see on a phone.

The table: four destination rows, three source columns and a total, in small type that fits at 320 pixels. The bands would be too thin to read there, so the facts move into the table instead of shrinking.

No. The diagram keeps its direction (sources, then flows, then destinations) because it shows a flow from one place to another, so it is dir="ltr". The header and the phone table follow the page's direction.

The header and the figure fade up once on load, and the bands change tone with a short CSS transition when you follow a node. With reduced motion both are off: the tone changes at once and nothing slides in.