Часть II: наслоение, цвет и динамика
В первой части я показал, как пузырьковая диаграмма превращает таблицу складского учёта в наглядную картинку. Мы шаг за шагом добавляли переменные: координаты, размер пузырьков, долю выкупов, зоны КТР — и получили рабочий инструмент.
Первая часть: Бизнес-визуализации или графики, которые недооценивают
Но остались три вопроса, которые в реальной работе всплывают почти сразу:
пузырьки наезжают друг на друга;
цвет либо не используется, либо превращает график в «радугу»;
статичная картинка не отвечает на главный вопрос — что происходит во времени.
Полтора года спустя — закрываю эти долги. На живом примере и с интерактивным демо.
Потыкать живое демо: exp.inforobot.space/bubble/
Проблема наслоения
В первой части было 6 регионов — всё выглядело аккуратно. В реальности их 15–20, и картина быстро превращается в кашу.
Пузырьки слипаются, подписи наезжают — и мы снова возвращаемся к таблице. То есть теряем смысл визуализации.
Три рабочих подхода.
Прозрачность (opacity)
Самый простой вариант — сделать пузырьки полупрозрачными.
Пересечения становятся видны: крупные точки не перекрывают мелкие целиком.
Работает при умеренной плотности данных. Ломается, если точек много — всё превращается в одно пятно.
Zoom-to-detail
Когда в одной области скопление — даём пользователю «подойти ближе».
Клик по пузырьку — увеличивается область вокруг него.
Координаты остаются точными, просто меняется масштаб. Но теряется общая картина — нужна быстрая навигация назад.
Кластеризация
Близкие точки объединяются в один агрегированный пузырёк. Клик — кластер раскрывается.
График остаётся чистым даже при большом объёме данных. Но добавляется лишнее действие — пользователь должен понять механику.
Что использовать на практике
Рабочая комбинация:
прозрачность — как базовый слой, показывает плотность;
zoom — для разбора локальных проблем.
Кластеризация — скорее для дашбордов, где важна «чистая» первая картинка.
Цвет как переменная
В первой части цвета не было — и это ограничивало анализ.
Добавляем категории товаров — и график резко «оживает».
Теперь видно не просто регионы, а какие товары где продаются и какие категории формируют перекосы.
Фильтрация
Клик по категории — остальные затухают.
Это ключевой момент: график переключается из режима «посмотреть в целом» в режим «ответить на конкретный вопрос».
Где проседает электроника? Куда недовозим одежду?
Правила работы с цветом
Здесь чаще всего ошибаются.
Коротко:
5–7 категорий максимум — больше глаз не различает;
используйте доступные палитры (например, ColorBrewer);
фон должен быть нейтральным, иначе фокус теряется.
Цвет — не «украшение», а отдельная переменная. Им легко всё испортить.
Динамика во времени
Самый сильный слой.
Статика отвечает на вопрос: «что происходит сейчас». Динамика — «как мы к этому пришли».
Timeline
Добавляем слайдер по времени.
Двигаем — и видим: Сибирь проседает зимой, Москва стабильна, Урал «скачет».
Это уже не график, а история.
Следы (trails)
Включаем «следы» — у каждого пузырька появляется траектория.
Видно не просто положение, а направление движения: регион улучшает ситуацию или деградирует.
Два режима анализа
На практике работает связка:
Прогнать анимацию целиком — найти аномалии.
Остановиться — разобрать детали.
Включить цвет — понять причину.
Быстрый цикл анализа, который в таблице занял бы в разы больше времени.
Итог
Вернёмся к проблемам из первой части:
Проблема | Что сделали |
|---|---|
Наслоение | прозрачность + zoom + кластеризация |
Ограниченность цвета | полноценное кодирование + фильтры |
Статика | время + анимация + траектории |
Сложность восприятия | интерактивность снижает порог входа |
Bubble chart перестаёт быть «экзотикой для аналитиков» и становится рабочим инструментом — в дашборде, на встрече, в презентации.
Что дальше
Если добавить слой, который не просто показывает данные, а отвечает на вопросы — визуализация становится интерфейсом.
В следующей части разберу, что будет, если диаграмма начнёт отвечать на вопросы.
Живое демо со всеми техниками: exp.inforobot.space/bubble/
Telegram-канал «Я и мой друг робот» — пишу про практику AI, UX, код и визуализацию данных.
