Чим більший масив даних, тим важливіше запакувати його в просту й зрозумілу візуалізацію. Наприклад, у податках, фінансах, інвестиціях, екологічній статистиці, політичній аналітиці дуже складно розібратися без магістерського диплома. Або виразного графіка.
Із десятків варіантів ми вибрали шість не найочевидніших типів графіків та діаграм (без стовпчиків та «пирога») — і знайшли круті кейси, щоби показати, як це працює в умовах складних тем та різномаштабних екранів.
Стрічкова діаграма
Стрічкова діаграма використовується, аби порівняти щось за одним показником: від меншого до більшого, від небезпечного до безпечного, від шкідливого до корисного, від дешевого до дорогого.
Точки можуть бути однаковими, а можуть відрізнятися за розміром — тоді їхня величина несе додаткове значення. У місцях скупчення самі точки можна робити напівпрозорими.
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% від загальної кількості безробітних.