90-60-90. Визуализируем пропорции

Перед тем, как перейти к теме визуализации пропорций, поговорим ещё немного о визуализации непрерывных временных рядов. Если ты не читал(-а) первую часть, то рекомендую – она здесь.

Непрерывные временные ряды

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

Предположим, мы строим график изменения ключевой ставки ЦБ РФ:

Вроде, неплохо. Это уже знакомые нам точки, соединенные линией. И как в случае с графиком подписчиков на канале, здесь достаточно вранья. Да, ключевая ставка может двигаться плавно, изменяясь не только в процентах, но и в процентных, и даже базисных пунктах. Но в реальности этого не происходит: каждый раз, когда случается изменение ставки, (не)умные люди в ЦБ предварительно собираются и решают, на сколько процентных пунктов её сдвинуть.

Мы за правду, поэтому нам важно отобразить реальное движение ключевой ставки. Для этого мы используем ступенчатый график. И сразу же столкнёмся с проблемой – горячо любимый Excel по умолчанию таких графиков не выдаёт. Так умеет, например, R или Python с mathplotlib. Но мы лёгких путей не ищем – сделаем это в Excel.

Ниже имеющийся у нас набор данных:

И для того, чтобы у нас всё получилось, нужно этот набор преобразовать в следующий:

Т.е. мы удваиваем кол-во всех строк, кроме первой (изначально у нас их было 5, а теперь 9). И если попытаться построить график на данном сете, то мы получим следующий вид:

Суть этого способа в создании двух значений для одного и того же временного периода – так мы заставляем Excel показывать вертикальные линии. А горизонтальные у нас есть по умолчанию :)

Вот теперь можно переходить к визуализации пропорций.

Визуализация пропорций

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

Круговые диаграммы

Круговые диаграммы – один из самых популярных вариантов визуализации. И, если судить по личному опыту, именно с кругами люди допускают наибольшее количество ошибок. Мы уже затрагивали эту тему здесь, но я всё же напомню о распространённых ошибках:

• Сумма секторов больше 100% o_O
• Избыточное количество секторов;
• Сравнение сложных структур производится с помощью двух, трёх и т.д. круговых диаграмм;
• Использование объёмных круговых диаграмм;
• Перечисление секторов в легенде не по часовой стрелке.

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

Как избежать возможных ошибок:

1. Пусть сумма секторов и будет больше 100%, на графике этого всё равно не будет видно. Конфуз случается, когда данные выносятся на сам график. Это, кстати, важно, несмотря на отсутствие числовых данных на схеме выше. Ведь никакой оси значений здесь нет, а рассчитывать угол для каждого сегмента аудитория не будет. Просто перепроверяй данные перед тем, как показать их аудитории;
2. Избыточное количество секторов на круговой диаграмме технически не является ошибкой, но всё же сильно затрудняет восприятие информации. Используй не более 4-5 секторов. Помни: меньше – больше;
3. Как я уже заметил, высчитывать угол, чтобы понять какую долю занимает каждый из сегментов, аудитория не будет. Т.е. сравнивать что-либо с использованием нескольких круговых диаграмм контрпродуктивно. Лучше используй стакнутые бары. В этом случае у тебя хотя бы будет ось значений;
4. Не устаю повторять, что за использование псевдотрёхмерных графиков, в которых третье измерение не играет функциональной роли, нужно сажать на кол и сжигать на костре;
5. Помимо самого перечисления элементов по часовой стрелке важно соблюдать цветовой паттерн – самым ярким цветом выделяется самый важный сектор, менее ярким – менее важный, и т.д.

Кольцевые диаграммы

Если в круге проделать дырку, то получится кольцо, которое мало чем отличается от своего целого прародителя. И всё же я предпочитаю кольцевые диаграммы – они и смотрятся «легче», и в свободное пространство в центре можно вписать какую-нибудь важную цифру или поместить иконку. Аминь.

Тримап (treemap), древовидная диаграмма

В 1990 г., когда нас с тобой не существовало (меня – точно), некий Бен Шнайдерман озаботился вопросом визуализации забитого под завязку пространства жёсткого диска. Первое, что он попробовал, – древовидная иерархическая структура. Очень скоро Бен осознал, что такое древо «разрастается» слишком сильно и не способствует лёгкому восприятию. Тогда Шнайдерману пришло в голову более элегантное решение – тримап:

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

Если твой диск забит порно, то теперь ты знаешь, как определить наиболее «прожоливый» жанр :>

Дитя пропорций и времени

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

Обрати внимание – я поместил название категорий на сам график. Это позволяет пользователю не отвлекаться (как это было бы в случае с легендой) для того, чтобы понять, о каких категориях идёт речь.

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

Бонус

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

Пиши мне и делись ссылкой на канал с друзьями и близкими – мир заслуживает больше классных презентаций ^^