Skvot

Mag

Skvot Mag
Курсы по теме:

6 графиков для сложных данных

Луковые кольца, тепловая карта и другие необычные типы графиков.
card-photo
card-photo
Аня
Сидельникова

Автор в SKVOT

29 сентября, 2021 / Дизайн / Статья

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

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

Ленточная диаграмма

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

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

HOW IT WORKS. Globalance World — это интерактивный realtime-ресурс, который анализирует ценность твоего инвестиционного портфеля — если деньги уже куда-то вложены. Или подсказывает, какая инвестиция будет перспективной, — если только собираешься деньги вложить. 

В отличие от других похожих платформ, Globalance World делает анализ компаний по четырем показателям: прибыль, мегатренды, влияние на климат и экологический след. И становится источником крутых инсайтов, даже если инвестиции — самый последний пункт в твоем списке задач на 5 лет.

Данные по каждому из четырех показателей можно смотреть в разных вариантах: интерактивный столбиковый график с обзором в 360°, мэп-график и ленточная диаграмма:

Что здесь хорошо:

#1. Видна удаленность от «идеала». Сразу понятно, к примеру, насколько далека от устойчивого влияния на климат самая левая точка (Canadian Natural Resources Limited) или как на самом деле много компаний сосредоточено справа — оказывается, реально вложить деньги выгодно и для себя, и для планеты. 

#2. Есть движение от «плохого» к «хорошему». Цветовая шкала тоже помогает сразу определить, куда вкладывать опасно (красный цвет), куда — сносно (светло-оранжевый), а куда — полностью безопасно (синий). 

#3. Удобно для диджитал-формата. В экранной версии (в отличие от печатной, например) есть возможность спрятать все надписи — и вызывать их кликом мыши или тапом.

Посмотреть курс
 

Лепестковая диаграмма

Лепестковая диаграмма идеально подходит для визуализации изменений, скажем, на отрезке времени (час, месяц, год, тысячелетие) и поиска закономерностей.

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

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

Свою вариацию лепестковой диаграммы Винсент назвал «диаграммой луковых колец»: он не закрашивает каждый лепесток, а просто обводит их верхние точки плавной линией. 

Что здесь хорошо:

#1. Цветовая визуализация. Для каждого типа жилья — луковое кольцо своего цвета: желтое — отели, бирюзовое — трейлеры, зеленое — палатки, оранжевое — пригород.

#2. Дополнительные значения. Кроме круговой временной шкалы (с января по декабрь), на графиках белым цветом отмечены зоны низкой температуры (ниже 10°), розовым — зоны высокой (выше 21°).

#3. Практичная символичность. Каждый концентрический круг равен 5 тыс. ночей, проведенным туристами в это время в парке.

Тепловая карта

Принцип работы тепловой карты для визуализации данных — тот же, что и у классической тепловой карты: теплыми цветами обозначены высокие значения (тепло), холодными — низкие значения (холодно).

HOW IT WORKS. Графический редактор The New York Times Джош Кац разработал интерактивную тепловую карту по результатам Олимпиады-2020. От страны с наибольшим количеством медалей — к стране с наименьшим. 

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

Что здесь хорошо:

#1. Живой контакт с data. Олимпийская тепловая карта Каца становится ключом к интерактивному взаимодействию с данными: двигаешься в пределах ячейки — меняются все текстовые данные и обновляется общий рейтинг.

#2. Очевидность. Даже не углубляясь в точные расшифровки, легко понять, как в зависимости от подхода меняется рейтинг страны. Например, при одном раскладе Украина оказывается на 16 месте, при другом — на 44. При этом лидеров и аутсайдеров не сдвигают с их позиций никакие манипуляции.

#3. Опора на символические цвета. Понятная цветовая маркировка помогает быстро вычислить первых, последних — и тех, для кого все не так однозначно.

Органиграмма

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

HOW IT WORKS. Студия R2D3 — это экспериментальный дуэт, который превращает статистику в интерактивные дизайнерские проекты. Одна из их работ — статья, объясняющая принципы машинного обучения: в тексте и в графиках.

Что здесь хорошо:

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

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

Пузырьковая диаграмма

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

HOW IT WORKS. National Geographic использовали пузырьковую диаграмму в скроллителлинг-материале What Happens to the Plastic We Throw Out, чтобы показать, сколько пластика и из каких рек попадает в мировой океан.

Что здесь хорошо:

#1. Цветовая лаконичность. Когда одна часть света поставляет в мировой океан критическую массу загрязнений, нет смысла использовать много цветов для маркировки континентов. Достаточно двух оттенков: розовый — для Азии, фиолетово-серый — для всего остального мира.

#2. Минимум текста. В графике использовали данные по 3 тыс. самых грязных рек, но подписывать каждую из них не нужно, если одна только Янцзы отвечает за тот же объем пластика, что водоемы Европы, обеих Америк, Африки и Австралии вместе взятые.

#3. Качественная условность. «Легенду» графика и точные процентные соотношения можно вынести в отдельный текстовый блок — а визуализация отвечает только за общее впечатление.

Фигурная диаграмма

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

HOW IT WORKS. В апреле 2020 года Reuters выпустили графический отчет о количестве людей, которые потеряли работу за первый месяц локдауна. 

20,5 млн человек в США стали безработными — и за этой огромной цифрой разработчики отчета постарались всеми способами показать реальных людей: отдельно по отраслям и сферам занятости.

Что здесь хорошо:

#1. Сторителлинг. Единица измерения в диаграмме Reuters — 10 тыс. рабочих мест. И человеческая фигурка для визуализации этой единицы переводит числовые данные в разряд живых, почти драматических.

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

#3. Наглядность. Даже при таком огромном масштабе (1:10000) размер самого длинного столбика в скролинге воспринимается как бесконечный. Хоспиталити-сфера пострадала сильнее всех остальных — 46% от общего количества безработных.

Поделиться материалом