Визуализация данных: какой график выбрать и когда

Вы строите отчёт по продажам и ставите рядом два графика: столбцы по месяцам и круговую диаграмму по товарам. Первый помогает заметить сезонность, второй усложняет сравнение категорий: доли близки, а глаз плохо оценивает их по углам. Выбор графика — не украшение дашборда, а решение о том, какую разницу читатель увидит за несколько секунд.

Сначала сформулируйте вопрос

Не начинайте с каталога диаграмм. Запишите, что должен понять человек: как показатель менялся во времени, какая категория больше, связаны ли две величины, где сосредоточены необычные значения или как распределены наблюдения. Один набор данных может отвечать на разные вопросы — и для каждого потребуется другой вид графика.

Рекомендации ниже не привязаны к конкретному рендереру. Для ориентира по типам диаграмм и терминологии можно сверяться с документацией Chart.js 4.x: конкретные возможности, настройки и ограничения зависят от версии выбранной библиотеки и подключённых расширений.

• Сравнить категории — столбцы или точки на общей шкале.
• Показать изменение во времени — линия, иногда столбцы.
• Проверить связь величин — диаграмма рассеяния.
• Показать распределение — гистограмма или коробчатая диаграмма.
• Показать состав целого — составные столбцы; круговая диаграмма подходит только для небольшого числа долей.

Четыре задачи — четыре выбора

Сравнение категорий: столбцы или точки

Столбчатая диаграмма подходит, когда нужно быстро сравнить значения между товарами, регионами или командами. Начинайте шкалу с нуля: если обрезать основание, небольшая разница может выглядеть огромной. Для длинных подписей удобнее горизонтальные столбцы. Когда категорий много, упорядочьте их по значению или используйте точки на общей шкале — иначе читателю придётся искать максимум по всей картинке.

Если категории имеют естественный порядок — например, этапы воронки или уровни тарифа, — сохраняйте его. Сортировка по величине может сделать график легче для чтения, но стереть смысл последовательности. Не смешивайте эти два порядка без причины.

Динамика во времени: линия или столбцы

Линия помогает увидеть направление и поворотные точки в последовательности измерений: дневных визитов, недельной выручки, температуры. Точки должны идти в хронологическом порядке, а интервалы между ними — иметь смысл. Если между наблюдениями большие или неравные промежутки, соединённая линия создаёт впечатление непрерывных измерений, которых у вас нет.

Столбцы лучше работают для отдельных периодов, когда важны величина и сравнение периодов между собой. Для месяцев с разной длиной сравнивайте не только сумму: выручка за 31 день и за 28 дней несопоставима без контекста. Покажите количество дней, нормируйте показатель или отдельно объясните метод расчёта.

Связь двух величин: scatter plot

Диаграмма рассеяния размещает каждую запись по двум числовым осям. Она помогает увидеть скопления, необычные точки и возможную связь между величинами — например, временем ответа сервиса и объёмом запроса. Это не доказательство причинности: корреляция не объясняет, что именно повлияло на результат.

Если точек так много, что они сливаются в пятно, попробуйте прозрачность, агрегацию или тепловую карту плотности. Не кодируйте третью и четвёртую переменные цветом и размером автоматически: легенда должна оставаться читаемой, а большие круги визуально получают больше внимания, чем мелкие.

Распределение и состав: гистограмма или доли

Гистограмма показывает, сколько наблюдений попало в числовые интервалы. Она отвечает на вопрос «где сосредоточены значения», а не «какова доля каждой категории». Ширина интервалов влияет на вид результата: слишком широкие скрывают структуру, слишком узкие превращают шум в колебания. Укажите единицы измерения и выбранный интервал.

Круговую диаграмму оставьте для нескольких взаимоисключающих частей одного целого, сумма которых действительно составляет 100%. Если долей больше нескольких, значения близки или нужно сравнить их в нескольких периодах, используйте столбцы: сравнение длины обычно проще, чем сравнение углов. Если категорий много, объединение мелких долей допустимо только с ясной подписью, а не под безликим названием «прочее».

Сравнение вариантов

Термин: выброс — наблюдение, которое заметно отличается от основной массы данных. Выброс может быть ошибкой ввода, редким реальным событием или следствием другой методики измерения; удалять его только потому, что он портит вид графика, нельзя.

Что чаще всего ломает визуализацию

• Неподходящая шкала. Для столбцов с нулевым основанием сравнение обычно честнее. Для линии диапазон иногда можно сузить, чтобы показать небольшие колебания, но отметьте границы шкалы и не выдавайте малое изменение за резкий скачок.
• Сравнение несопоставимых чисел. До построения проверьте единицы измерения, валюту, период и знаменатель. «Заказов» и «заказов на тысячу посетителей» — разные показатели, даже если числа выглядят похоже.
• Скрытые пропуски. Ноль означает измеренное отсутствие значения, пропуск — отсутствие наблюдения. Подмена одного другим меняет вывод. Покажите пробел, отметьте период или объясните, как обработаны неполные данные.
• Слишком много серий. Если на линии десятки цветов, легенда перестаёт помогать. Оставьте ключевые серии, разделите график на панели или дайте читателю фильтр.
• Цвет без запасного сигнала. Не полагайтесь только на красный и зелёный: часть аудитории может не различать эти цвета, а график могут распечатать в оттенках серого. Добавьте подписи, маркеры или разные типы линий.

Хорошая диаграмма не делает данные убедительнее. Она делает видимым, что именно данные позволяют утверждать — и чего они не доказывают.

Когда подход перестаёт работать

Линейный график обманывает, если точки соединяют через периоды, в которых измерений не было. Круговая диаграмма теряет смысл, когда части не складываются в одно целое. Гистограмма меняет впечатление при смене ширины интервала. А среднее значение может скрывать два разных скопления данных — тогда полезнее показать распределение целиком.

Отдельная проблема — агрегирование. Сводка по месяцу способна спрятать резкий дневной провал, а среднее по регионам — различия между ними. Если на решение влияют локальные пики, проверьте данные на более детальном уровне до того, как публиковать общий график.

Как выбрать и проверить график

1. Сформулируйте одно предложение-вопрос. Например: «В каких регионах среднее время доставки выше?» Если ответ требует двух разных сравнений, сделайте два графика.
2. Назовите единицу наблюдения и период. Проверьте, что каждая точка, столбец или строка означает одно и то же.
3. Выберите визуальную форму по вопросу. Сравнение — длина или положение, динамика — последовательность, связь — пары чисел, распределение — интервалы.
4. Добавьте контекст. Укажите заголовок с выводом, подписи осей, единицы, период и источник данных. Не заставляйте читателя угадывать, что именно измерено.
5. Проверьте граничные случаи. Посмотрите на нули, пропуски, экстремумы, длинные подписи и мобильный экран. Спросите коллегу, какой вывод он сделал за пять секунд.

Для веб-графиков практическая реализация зависит от инструмента. В Chart.js 4.x доступны распространённые типы диаграмм, но конкретный способ настройки и доступность расширенных вариантов сверяйте с документацией именно той версии, которая установлена в проекте. Здесь важен не каталог библиотеки, а проверка того, что выбранная форма передаёт данные без потерь.

Что проверить перед публикацией

Следующий шаг — возьмите один график из своего отчёта и подпишите вопрос, на который он отвечает. Затем проверьте единицы, шкалу и пропуски, а после сравните исходный вариант с альтернативой из таблицы. Если вывод меняется только из-за выбора масштаба или группировки, сначала разберитесь с данными и методом агрегации, а потом публикуйте диаграмму.