Sankey-Diagramme: Flussanalyse in einer Stunde

Sankey-Diagramme zur Analyse finanzieller Flüsse: Von Daten zur Interaktivität

Sankey-Diagramme visualisieren Ressourcenflüsse und zeigen die Bewegung von Geldmitteln von Quellen über Knotenpunkte bis zu Empfängern. Im Gegensatz zu Kreisdiagrammen, die sich auf Anteile konzentrieren, zeigen Sankey-Diagramme die gesamte Kette: woher die Mittel kommen, welche Zwischenknoten sie durchlaufen und wo sie verteilt werden.

Dies ermöglicht es, versteckte Muster zu identifizieren. Beispielsweise erscheinen kleine Ausgaben einzeln unbedeutend, machen zusammen aber 21% des Budgets aus. Das Diagramm hat vier Ebenen: Einkommen, Gesamtbudget, Ausgabenkategorien, Unterkategorien.

Wichtige Erkenntnisse:

• Flussrichtung ist sichtbar: Gehalt → gemeinsamer Pool → Essen/Transport.
• Knoten (z. B. Banken) zeigen Geldkonzentration.
• Verschachtelung erhält Verbindungen: Überweisung an T-Bank → weitere Detaillierung.

Vergleich mit Kreisdiagrammen

Kreisdiagramme verlieren bei 5–7 Kategorien an Lesbarkeit: Segmente sind schwer zu vergleichen, es gibt keine Bewegungsrichtung oder Verschachtelung. Sankey löst dies, indem es den Prozess als Sequenz von Flüssen mit proportionalen Linienbreiten darstellt.

| Aspekt | Kreisdiagramm | Sankey |

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

| Lesbarkeit | Sinkt bei >5 Kategorien | Skalierbar mit Zoom |

| Richtung | Keine | Explizit: links nach rechts |

| Verschachtelung | Nein | Unterstützt |

| Flüsse | Nur Anteile | Vollständige Trajektorie |

Sankey eignet sich für Aufgaben mit einer klaren Sequenz von Stufen.

Schritte zur Erstellung eines interaktiven Sankey

Stack: React + D3.js mit custom Sankey Layout. Der Prozess wurde durch KI (Claude) beschleunigt, um Code basierend auf Beschreibungen zu generieren.

• Datenvorbereitung: Von PDF-Kontoauszug zu CSV via KI. Bereinigung, Gruppierung, Normalisierung der Kategorien. Beträge <1000 Rubel gruppiert in "Sonstiges" mit Details im Tooltip.
• Struktur: Einkommen (nach Quelle: Gehalt, Transfers) → Gesamtbudget → Ausgaben → Unterkategorien.
• Erste Iteration: Basis-Render mit Tooltips.
• Verfeinerungen:

- Zentrierung von Unterkategorien.

- Begrenzung der Flussbreite.

- Zoom für Label-Lesbarkeit.

- Mobile Anpassung: Bottom Sheet statt Tooltips.

Beispiel Aufgabenstellung für KI:

"Sankey auf D3.js mit Tooltips. Einkommen → Budget → Ausgaben. Gruppe <1000 Rubel in 'Sonstiges'."

Interaktive Funktionen und Verfeinerungen

Tooltips: beim Hover — kurze Info, Hold — Liste der Operationen, Click fixiert Position. Positionierung berücksichtigt Bildschirmgrenzen.

KI-Probleme und Korrekturen:

• Tooltip-Offset: Regeln hinzugefügt.
• Zahlungskategorisierung: manuelle Korrektur von mehrdeutigen (z. B. MAPP_SBERBANK → "Andere Transfers").
• Ersparnisse nicht als Ausgaben behandelt.

Mobile Version:

• Zoom mit Buttons + Gesten.
• Listenmodus für detaillierte Ansicht.
• Bottom Sheet für Tooltips.

Labels werden nicht separat von Zahlen umgebrochen (₽ angehängt).

Anwendungen über persönliche Finanzen hinaus

• Bewegung von Geldmitteln zwischen Konten/Einheiten.
• Kostenanalyse mit intermediate Knoten.
• Kundenflüsse, Anfragen, Stufen im Geschäft.

Einschränkungen:

• Nicht für präzise Analytik (keine Zahlen auf Achsen).
• Schlecht ohne Flüsse oder >3 Verschachtelungsebenen.
• Unübersichtlich bei großen Datenvolumen.

Was zählt

• Entwicklungsgeschwindigkeit: Statisches Diagramm in Illustrator — 2 Tage; interaktiv auf D3 — 1 Stunde + Verfeinerungen.
• Einstiegshürde: Erfordert Verständnis von Daten und Fähigkeit, Aufgaben für KI zu formulieren.
• Lesbarkeits-Kompromiss: Zoom und Ausblenden überlappender Labels; Details in Tooltips.
• KI als Werkzeug: Generiert Code, aber Iterationen und Domänenlogik liegen beim Entwickler.
• Ansatzwechsel: Experimente wurden günstiger, Fokus auf Interaktivität.

— Editorial Team