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