Как сделать круговую диаграмму понятной, а не просто «красивой»: разбор для новичков

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

Взгляните на две картинки:

Слева — визуальный шум, справа — прозрачный сигнал

В чем секрет правильного варианта? Давайте разложу всё по косточкам.

Промах №1. Легенда оторвана от данных

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

Мой железный принцип: безжалостно сношу легенду и прямо на секторах проставляю названия контрагентов и суммы.

Размещаем подписи внутри графика: забываем о легенде, как о страшном сне

Промах №2. Каша из микроскопических долей

Обилие мелких кусков превращает диаграмму в лоскутное одеяло, а подписи в зоне их скопления наезжают друг на друга. Мой лайфхак: отправляю всех поставщиков с долей менее 10% в общий котел под названием «Другие».

Собираем «пыль» в один массив: мелкие доли объединяем в категорию «Другие»

Промах №3. Хаос в цветовой гамме

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

В этом кейсе мне нужно столкнуть лбами ключевого гиганта «Снабстрой» и всех остальных. Поэтому сначала заливаю прочие компании строгими оттенками синего.

Задаем строгую систему: второстепенные игроки уходят в градиенты синего

Промах №4. Анонимность данных

Без конкретных цифр сравнивать доли всё равно что гадать на кофейной гуще. Рядом с названиями я обязательно вывожу объемы поставок в миллионах рублей.

Добавляем мясо: подписываем суммы, чтобы не заставлять зрителя играть в угадайку

Промах №5. Отсутствие драматургии

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

Создаем визуальный конфликт: акцентируем проблемную зону негативным цветом

Промах №6. Немой график

Я без конца талдычу: диаграмма без вывода бесполезна. Хорошая визуализация сама транслирует идею в мозг.

Я хочу заявить: «Зависимость от "Снабстрой" стала критически огромной».

Как заставить график «заговорить»?

Уравниваю всех «серой мышью», оставляя «Снабстрой» гореть контрастом.
Зеленый (позитив) или красный (тревога) передают эмоцию. Здесь явный негатив — выбираю красный.
Для железобетонного аргумента высчитываю долю в цифрах. Это целых 45%.
Помним физиологию восприятия: мозг оценивает дуги. Поэтому вырезаю надоевшую середину и в образовавшейся пустоте размещаю вердикт: «доля Снабстрой 45%».
Раньше я сгруппировал мелочь в «Других» — было бы нечестно оставлять им яркие цвета. Показываю их «невесомость» через безликий серый.

Смотрите, что вышло в остатке:

Идеальный итог: диаграмма сама кричит о проблеме без ваших словесных пояснений

Если нужно, наоборот, выпятить роль небольшого игрока — крутите диаграмму по часовой стрелке на 90 градусов, чтобы нужный объект встал справа (в зоне старта чтения).

📥 Скачать готовый шаблон в Excel, чтобы просто вставить свои цифры.

Хотите собрать это руками?

🤍 Ставьте закладку — в работе с отчетами пригодится стопроцентно.

Пройдем путь от нуля до финала. Для тренировки качайте учебный файл.

1. Строим стандартную круговую диаграмму.

Этап первый

2. Самый жирный сегмент заливаем тревожным тёмно-красным.

Этап второй

3-6. Оставшиеся сектора проводим через градиенты голубого: от глубокого тона к едва заметному.

Этап третий

Этап четвертый

Этап пятый

Этап шестой

🕒 Полная пошаговая инструкция здесь.

Много таких приемов и дизайнерских хитростей собрал в своей книге «Магия диаграмм».