С Sankey-диаграммами я работаю давно — ещё в 2013–2015 годах применял их для бизнес-задач. Но с личным бюджетом история была иной. Не из-за сложности, а из-за трудоёмкости.
Ранний процесс: ручная работа
Раньше создание диаграммы занимало много времени:
- сбор и очистка данных — Excel или аналоги, где 50–80% времени уходило на структурирование: категории, связи, уровни
- визуализация в Illustrator с использованием кривых Безье и ручной подгонкой пропорций
Результат — статичная картинка. На всё уходило до двух дней.
Сейчас: интерактив за час
Недавно я повторил ту же задачу. Первая рабочая версия заняла около часа. Ещё несколько часов ушло на доработку: интерактив, мобильная адаптация, поведение интерфейса.
Разница не только в инструментах — изменился сам порог входа в подобные эксперименты.
Что получилось
Интерактивная диаграмма показывает:
- откуда приходят деньги
- через какие «узлы» они проходят
- куда и как распределяются
- какие категории дробятся на подкатегории
Четыре уровня:
- Доходы
- Общий бюджет
- Категории расходов
- Подкатегории (например, второй банк или инвестиции)
Почему Sankey полезнее таблиц и круговых диаграмм
Таблица даёт цифры. Круговая диаграмма — доли. Sankey показывает процесс.
1. Видно движение
Не просто «20% на еду», а: откуда пришли деньги → через что прошли → куда ушли.
2. Видны «узлы»
Центральный бюджет — точка, через которую проходят все потоки. На диаграмме это очевидно: все линии сходятся и расходятся.
- видно, сколько проходит через «общий котёл»
- понятно, какие ветки дробятся сильнее
3. Видна вложенность
Например, деньги уходят в другой банк, а уже оттуда распределяются дальше. В таблице такая связь теряется. В Sankey — сохраняется.
4. Видны «незаметные» потоки
Мелкие расходы, которые в списке не бросаются в глаза, в сумме образуют значительный поток.
Почему не круговая диаграмма
Круговая отвечает на вопрос «как распределилось», но не на «как это туда попало».
- уже при 5–7 категориях теряется читаемость
- сравнивать сегменты становится сложно
- нет направления потока
- нет вложенности
Sankey — это про процесс, а не про доли.
Как это было сделано
Стек: React, D3, кастомный Sankey layout. Код писал не вручную — работал через Claude, как дизайнер с разработчиком.
- Взял банковскую выписку (PDF)
- Преобразовал в машиночитаемый формат с помощью ИИ (PDF → CSV)
- Подготовил данные с ИИ: очистка, группировка, нормализация категорий, выделение переводов между счетами. Это оказалось проще, чем ручная работа в Excel.
- Получил первую версию диаграммы
- Для публикации все данные были рандомизированы
Формулировка задачи
Давай сделаем Sankey с тултипами, с использованием d3.js. Доходы и расходы за весь период. Одиночные суммы меньше 1000 рублей объединять в «прочее», а в тултипе показывать список. Если есть вопросы — задавай.
Уточнения:
Q: Какую структуру Sankey хочешь?
A: Категории доходов → общий бюджет → категории расходов
Q: Как группировать доходы?
A: По источникам (зарплата, переводы от конкретных людей, прочее)
После этого появилась первая версия. Дальше — итеративные правки:
- подписи накладывались — убрана часть текста
- добавлены тултипы с деталями
- подкатегории центрированы
- ограничена ширина потоков внутри ноды
- уточнены уровни и вложенность
Порог входа снизился, но не исчез. Нужно понимать структуру данных, уметь формулировать задачу, уточнять поведение интерфейса.
Claude ускоряет процесс, но не заменяет понимание.
Где ИИ ошибался и что пришлось дорабатывать
Первая версия появилась быстро, но затем потребовались уточнения.
Тултипы
Сначала они смещались относительно курсора и не учитывали границы экрана.
Добавил правила позиционирования:
- при наведении — краткая информация
- при удержании — полный список операций
- по клику тултип фиксируется, закрывается по клику вне зоны
Категории и интерпретация данных
ИИ не всегда корректно понимает назначение платежей. Некоторые операции пришлось уточнять или относить в «Прочее».
43 098 ₽ (26.11.2025) — учёба или нет?
→ не удалось определить → «Прочее»
MAPP_SBERBANK (1 000–3 000 ₽)
→ «Прочие переводы Сбер»
Также важно было учесть:
накопления и остатки — это не расходы
Масштаб и читаемость
На плотной диаграмме быстро появляются мелкие и пересекающиеся подписи.
Добавил zoom — масштабируются и потоки, и подписи. При наложении подписи скрываются, но вся информация доступна в тултипах.
Это осознанный компромисс между полнотой и читаемостью.
Мобильная версия
На мобильных устройствах диаграмма становится обзорной. Навигация — через кнопки (+/−) и жесты.
Для точного анализа добавлен альтернативный режим — список.
Тултипы реализованы как bottom sheet.
Знак ₽ не должен переноситься отдельно от числа. Единицы измерения — тоже. Это пришлось править вручную.
Где это может быть полезно
- движение денег между счетами и подразделениями
- структура затрат
- промежуточные «узлы», добавляющие сложность
- потоки клиентов, заявок, этапов
Ограничения
Sankey не универсален. Не подходит, если:
- нужна точная аналитика
- нет явных потоков
- слишком много уровней вложенности
Что изменилось по ощущениям
Раньше такие визуализации делались «на проект». Сейчас — «на подумать».
Раньше за два дня получалась статичная картинка. Сейчас за несколько часов — интерактивная визуализация, которую можно развивать.
Это меняет не сроки, а тип результата и стоимость эксперимента.