Powrót do strony głównej

Diagramy Sankey: analiza przepływów w godzinę

Diagramy Sankey efektywnie pokazują ruch przepływów finansowych przez węzły i poziomy zagnieżdżenia. Artykuł opisuje stworzenie interaktywnej wersji na React+D3 z tooltipami, zoomem i adaptacją mobilną. Użyto AI do przyspieszenia od danych do kodu.

Od Excela do Sankey: interaktywny w godzinę na D3
Advertisement 728x90

Diagramy Sankeya do analizy przepływów finansowych: od danych do interaktywności

Diagramy Sankeya wizualizują przepływy zasobów, pokazując ruch środków od źródeł przez węzły do odbiorców. W przeciwieństwie do wykresów kołowych, skupiających się na udziałach, Sankey wyświetla pełny łańcuch: skąd środki pochodzą, przez jakie pośrednie węzły przechodzą i gdzie są rozdysponowywane.

Pozwala to zidentyfikować ukryte wzorce. Na przykład drobne wydatki z osobna są niezauważalne, ale łącznie stanowią 21% budżetu. Diagram ma cztery warstwy: dochody, całkowity budżet, kategorie wydatków, podkategorie.

Kluczowe wnioski:

Google AdInline article slot
  • Widoczny kierunek przepływów: wypłata → wspólny kotłek → jedzenie/transport.
  • Węzły (np. banki) pokazują koncentrację środków.
  • Zagnieżdżenie zachowuje powiązania: przelew do T-Banku → dalsza szczegółowość.

Porównanie z wykresami kołowymi

Wykresy kołowe tracą czytelność przy 5–7 kategoriach: segmenty trudno porównać, brak kierunku ruchu lub zagnieżdżenia. Sankey rozwiązuje to, wyświetlając proces jako sekwencję przepływów z proporcjonalną szerokością linii.

| Aspekt | Wykres kołowy | Sankey |

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

Google AdInline article slot

| Czytelność | Maleje przy >5 kategoriach | Skalowalna z zoomem |

| Kierunek | Brak | Wyraźny: od lewej do prawej |

| Zagnieżdżenie | Nie | Obsługiwane |

Google AdInline article slot

| Przepływy | Tylko udziały | Pełna trajektoria |

Sankey nadaje się do zadań z wyraźną sekwencją etapów.

Etapy tworzenia interaktywnego Sankeya

Stack: React + D3.js z niestandardowym layoutem Sankey. Proces przyspieszony przez AI (Claude) do generowania kodu na podstawie opisu.

  • Przygotowanie danych: Z wyciągu PDF do CSV przez AI. Czyszczenie, grupowanie, normalizacja kategorii. Sumy <1000 rub. w „Inne”.

— Editorial Team

Advertisement 728x90

Czytaj dalej