Dual-Tone Budget Flow Sankey Diagram Generator

What is a dual-tone budget flow Sankey diagram?

A dual-tone budget flow Sankey diagram is a flow chart that uses two opposing colour families to express money coming in and money going out. It uses a standard left-to-right layered Sankey layout: on the left, revenue line items feed in one layer at a time like tributaries and funnel into the slim vertical pivot bar that stands at the centre of the canvas; past the pivot the money switches to the magenta family and fans out to the right, level by level, until the far right spreads into a spray of fine filaments — the smallest expenditure line items. The pivot itself is a slim vertical bar filled with a horizontal gradient that runs from cyan on its left edge to magenta on its right, so you can read at a glance where the money comes from and where it goes. Ribbon width is strictly proportional to value, so where each unit of money came from, which aggregation level it passed through, and which line item it ended up in can all be read straight off the picture.

Its visual language is unmistakable: the revenue side shares one cyan family, the expenditure side one magenta family, and the two meet at the central pivot bar, whose cyan-to-magenta horizontal gradient marks the point where the family switches. Within a family the colour is not flat: nodes are ranked by throughput and mapped onto seven steps of light and dark, so the largest flows are the thickest and most saturated while the smallest become pale slivers — the shading itself works as a heat map of magnitude. Labels are tiered by column and automatically nudged apart by boundary clamping and collision avoidance, so even dense accounts never collapse into a solid mass. The overall look sits close to official fiscal yearbooks and infographic posters — ideal for reports, decks and data journalism.

Features

• Template-driven, auto-layered: download the CSV template, fill in three columns — source,target,value — and upload it. The tool derives each node’s column from the flow hierarchy, so the number of stages follows your data and you never declare them by hand
• Left-to-right layered dual-tone layout: the revenue and expenditure families meet at one central pivot bar whose colour fades from cyan to magenta; cyan converges in from the left and magenta fans out to the right, so the whole money path reads as one continuous line rather than a series of disconnected stages
• Dual-tone opposing palette: the node with the highest throughput is detected automatically as the budget pivot; everything upstream is cyan, everything downstream is magenta, and the pivot bar carries a cyan-to-magenta horizontal gradient, making the income-versus-spending relationship explicit
• Seven-step shading per family: inside one family, nodes are ranked by flow and mapped onto seven light-to-dark steps — large flows are the deepest, tiny threads the palest, so depth of colour equals magnitude
• Tiered labels, automatic anti-overlap: labels are tiered by column — first column shows name and value, last column puts the value on top with a wrapped name below, inner columns keep the name only — with collision avoidance, so dense line items stay readable
• Three dual-tone palettes: Cyan–Magenta (default), Teal–Orange and Blue–Red, switchable in one click; dark mode brightens both families automatically for contrast
• Light / dark canvas: toggle the background style and the export carries the current background with it
• Multi-format export: download high-resolution PNG (2x pixel ratio) or vector SVG that can be edited further in design software
• Local and private: all data is parsed and rendered entirely in your browser, never uploaded to a server

Where it is used

• Public budgets and fiscal balance: revenue source → revenue line → budget pivot → expenditure category → ministry → line item, the classic use of this chart
• Corporate profit and cost pooling: revenue source → recognition line → net profit pivot → cost category → departmental cost → detail account
• Funding pools and capital structure: equity / debt / own funds → funding pool → investment direction → project → specific outlay, with colour separating inflows from outflows
• Channel attribution and marketing funnels: traffic source → landing page → conversion path → closing channel → customer type
• Energy and resource flows: primary energy → conversion step → carrier pivot → consuming sector → end use, cyan for inputs and magenta for outputs
• Data journalism and annual reports: authoritative, information-dense income-and-spending flows for in-depth coverage, government and institutional yearbooks

How to use

1. Click Download CSV template to get the sample file (46 sample flows that open as a complete 47-node budget Sankey)
2. Fill in your own data in the template format: source,target,value
3. Click the upload area or drag your CSV file onto the page
4. The left-to-right layered dual-tone Sankey renders automatically; preview it across palettes and light / dark canvas
5. Optional: type a chart title in the Chart title field — leave it empty to hide it
6. When you are happy, click Download PNG or Download SVG

Data format

Field	Required	Description
source	Yes	Name of the outgoing node (the upstream category)
target	Yes	Name of the incoming node (the downstream category)
value	Yes	Value of that flow (a positive number); ribbon width is proportional to it

Limits: up to 200 rows, and no more than 24 nodes in any single stage. The number of stages is derived from your data’s hierarchy — you never declare it in the CSV. The data must form a one-way layered structure; a circular flow triggers a warning.

Note: the same name is always treated as one single node across the whole chart. If different stages genuinely need the same category name, prefix it per stage — for example Stage1-North and Stage3-North — otherwise they will be merged. The pivot node is detected automatically as the node with the highest throughput; you never specify it by hand.

How to read the chart

Start from the slim vertical bar in the middle of the canvas whose colour shifts from cyan to magenta — that is the budget pivot (in the sample, “Total public expenditure” at 12,900). The cyan family on the left is the revenue side: revenue line items feed in from the left, aggregate level by level and funnel into the pivot bar, the ribbons thickening as they approach it. Past the pivot the family switches to magenta, and the money fans out to the right level by level, the ribbons thinning towards the right until they spread into a spray of fine filaments at the far edge — those filaments are the finest expenditure line items. The cyan-to-magenta gradient on the pivot bar is the point where the family switches: this is where revenue ends and spending begins. The point where the colour family switches is the boundary between income and spending: cyan is money in, magenta is money out. Within a family, the darker and thicker a ribbon, the larger its value — and the pale slivers that thin out to a line are the smallest line items. First-column labels sit on the left of their node with the name and value, last-column labels sit on the right with the value on top and a wrapped name below, and inner columns keep the name only with wrapping and automatic collision avoidance. Hover any ribbon or node to read the exact number.

About Gotokit

Gotokit builds clean, fast and beautiful online tools. This dual-tone budget flow Sankey generator renders its left-to-right layered dual-tone layout with the ECharts standard sankey layout, needs no sign-up, opens and works immediately, and processes all data locally in your browser to protect your privacy.