Легенда в визуализации данных: как один элемент определяет судьбу вашего графика

Легенда — один из самых недооценённых элементов визуализации данных. Именно легенда превращает набор цветных линий, точек и столбцов в осмысленное сообщение, связывая визуальные элементы с теми категориями и значениями, которые они представляют.

Когда последний раз смотрели прогноз погоды на Яндексе?

Легенды как таковой в графике нет. Но здесь всего 2 категории данных: День/Ночь и линии подписаны, график понятен.

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

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

Есть легенда, всего один дополнительный шаг, и ясность в подаче информации гарантирована.

Блог Syncfusion, пример построения графика на основе данных Министерства сельского хозяйства США (USDA).

Иллюстрация того, как продуманная легенда превращает сложные данные в доступную историю, позволяя пользователю сразу увидеть тренды и сравнения, не отвлекаясь на расшифровку.

Легенда в этом примере работает безупречно по нескольким причинам:

Данные сложные, временная динамика, 5 стран, но легенда делает их понятными

Источник:

Возможны ситуации, когда параметр “Категории”, который помещается в поле “Условные обозначения” содержит не 3-5 значений, а больше, при этом нет возможности растягивать виджет, тогда появление прокрутки неизбежно.

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

Вот наглядные примеры нагромождения категорий в графиках, когда легенда не спасет.

Источник:

Источник:

Но что делать, если данных действительно много?

Стратегия 1: Прямые подписи вместо легенды

Вместо того чтобы выносить расшифровку в отдельный блок, можно подписать линии (Погода в Яндексе) или столбцы напрямую. Это снимает необходимость постоянно "прыгать" взглядом между графиком и легендой. Если вынести название прямо к линии или столбцу, легенда становится не нужна.

Стратегия 2: Группировка данных

Объединение категорий в более крупные группы. Вместо 15 отдельных категорий можно выделить 3–4 группы через создание условного столбца в источнике и показать их разными цветами, а для детализации дополнительно поместить в отчёт таблицу или матрицу.

Стратегия 3: Использование паттернов и маркеров

Если цветов не хватает, можно сочетать цвет с формой маркера (круги, треугольники, квадраты) или типом линии (сплошная, пунктир, точка-тире). Это увеличивает количество различимых элементов без добавления новых цветов.

Стратегия 4: Интерактивная легенда

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

Стратегия 5: Сортировка в легенде

Упорядочивание категории в легенде так, как пользователь ожидает их встретить на графике. Если линии упорядочены сверху вниз по значению, легенда должна следовать тому же порядку. Это снижает когнитивную нагрузку и упрощает сопоставление.

Стратегия 6: Вынос в подписи

Вместо отдельной легенды можно вынести категории в подписи осей или в заголовки фасетов при использовании фасетной сетки — отдельные маленькие графики для каждой категории.

В источнике больше примеров:

Стратегия 7: Смена типа визуализации

Возможно, линейный график с 21 линией — это просто неправильный выбор, и вместо одного графика с 21 линией стоит использовать тепловую карту, фасетную сетку или дашборд с фильтрацией.

Как правило легенды с 20+ элементами становятся бесполезными. В таких случаях лучший выход — пересмотреть подход к визуализации, а не пытаться уместить всё в одну диаграмму.

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

В Jira Cloud легенда на графике сгорания спринта (Sprint Burndown) перекрывает красную линию фактического сгорания задач. В результате скрам-мастер не может видеть, как на самом деле идёт работа — линия просто скрыта за элементами легенды.

Источник:

Эдвард Тафти, один из самых влиятельных специалистов в области статистической графики, назвал Диаграмму Шарля Минара "probably the best statistical graphic ever produced" — возможно, лучшим статистическим графиком из когда-либо созданных.

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

Вместо того чтобы выносить объяснения в отдельный блок, Миньяр сделал так, что каждый элемент графика говорит сам за себя. Ширина полосы наглядно демонстрирует, как тает армия; цвет мгновенно показывает движение вперёд или отступление; температурный график внизу объясняет причины катастрофы.

Минималистичный дизайн, где каждый элемент несёт смысл, а не требует расшифровки.

Источник, там же французский оригинал:

Какую роль должна играть хорошая легенда?

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

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

Подписывайтесь на мой телеграмм канал