Sankey diagramy: analýza toků za hodinu

Sankeyovy diagramy pro analýzu finančních toků: od dat k interaktivitě

Sankeyovy diagramy vizualizují toky zdrojů a ukazují pohyb prostředků od zdrojů přes uzly k příjemcům. Na rozdíl od koláčových grafů, které se soustředí na podíly, Sankey zobrazuje celý řetězec: odkud prostředky přicházejí, přes jaké meziuzly procházejí a kam jsou rozdělovány.

To umožňuje odhalit skryté vzorce. Například drobné výdaje jednotlivě nepostřehnete, ale v součtu tvoří 21 % rozpočtu. Diagram má čtyři vrstvy: příjmy, celkový rozpočet, kategorie výdajů, podkategorie.

Klíčové poznatky:

• Je vidět směr toků: mzda → společný fond → jídlo/doprava.
• Uzly (například banky) ukazují koncentraci prostředků.
• Vnoření zachovává vazby: převod do T-Bank → další detaily.

Srovnání s koláčovými grafy

Koláčové grafy ztrácejí čitelnost při 5–7 kategoriích: segmenty se těžko porovnávají, chybí směr pohybu nebo vnoření. Sankey toto řeší zobrazením procesu jako posloupnosti toků s úměrnou šířkou čar.

| Aspekt | Koláčový graf | Sankey |

|--------|---------------------|--------|

| Čitelnost | Klesá při >5 kategoriích | Škálovatelná se zoomem |

| Směr | Chybí | Explicitní: zleva doprava |

| Vnoření | Ne | Podporováno |

| Toky | Pouze podíly | Celá trajektorie |

Sankey se hodí pro úlohy s jasnou posloupností fází.

Fáze tvorby interaktivního Sankeye

Stack: React + D3.js s vlastním Sankey layoutem. Proces urychlilo AI (Claude) pro generování kódu podle popisu.

• Příprava dat: Z PDF výpisu do CSV přes AI. Čištění, seskupování, normalizace kategorií. Částky <1000 rub. do „Ostatní" s detailem v tooltipu.
• Struktura: Příjmy (podle zdrojů: mzda, převody) → celkový rozpočet → výdaje → podkategorie.
• První iterace: Základní vykreslení s tooltipy.
• Vylepšení:

- Centrování podkategorií.

- Omezení šířky toků.

- Zoom pro čitelnost popisků.

- Mobilní adaptace: dolní panel místo tooltipů.

Příklad formulace úkolu pro AI:

«Sankey na D3.js s tooltipy. Příjmy → rozpočet → výdaje. Seskupit <1000 rub. do 'Ostatní'.»

Interaktivní funkce a vylepšení

Tooltipy: při najetí – krátká info, podržení – seznam operací, kliknutí fixuje. Pozicování zohledňuje okraje obrazovky.

Problémy AI a opravy:

• Posun tooltipů: přidána pravidla.
• Kategorizace plateb: ruční korekce nejednoznačných (například MAPP_SBERBANK → „Ostatní převody").
• Úspory ne jako výdaje.

Mobilní verze:

• Zoom tlačítky + gesty.
• Režim seznamu pro detailní prohlížení.
• Dolní panel pro tooltipy.

Popisky se nepřenášejí odděleně od čísel (₽ je připojeno).

Využití mimo osobní finance

• Pohyb prostředků mezi účty/jednotkami.
• Analýza nákladů s meziuzly.
• Toky klientů, požadavků, fází v byznysu.

Omezení:

• Ne pro přesnou analytiku (chybí čísla na osách).
• Špatné při absenci toků nebo >3 úrovních vnoření.
• Přetížení při velkém objemu dat.

Co je důležité

• Urychlení vývoje: Statický diagram v Illustratoru – 2 dny; interaktivita na D3 – 1 hodina + vylepšení.
• Vstupní práh: Vyžaduje pochopení dat a umění formulovat úkoly pro AI.
• Kompromis čitelnosti: Zoom a skrývání překrývajících se popisků; detaily v tooltipách.
• AI jako nástroj: Generuje kód, ale iterace a doménová logika jsou na vývojáři.
• Změna přístupu: Experimenty jsou levnější, fokus na interaktivitě.

— Editorial Team