Spending Sankey
Income flows in on the left and fans out into where it actually went.
AdvancedWeb appData viz12–26hAI-buildable 3/5no setup
A Sankey diagram of money moving from sources through categories to destinations. The flow metaphor communicates proportion far better than a pie chart, and computing a Sankey layout — node positions plus non-crossing link paths — is a proper geometry exercise.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 6
- Enter income sources and expense categories with amounts
- Flows render as proportionally-sized bands between nodes
- Hovering a flow highlights its full path and shows the amount
- Node positions are computed rather than hardcoded
- Totals must reconcile, and an imbalance is reported clearly
- Import from CSV as an alternative to manual entry
The interesting part
- Sankey layout: assigning node depths and minimising link crossings
- Drawing smooth link paths that stay proportional at every width
- Handling an unbalanced dataset without producing a nonsense diagram
Once it works
- Add multi-level flows for subcategories
- Animate transitions when values change
- Export the diagram as SVG
Suggested stack
reacttypescripttailwindd3-sankey