Короткий гайд по різним графікам та рекомендації по їх вибору

Численні дослідження в галузі когнітивної нейронауки показують, що мозок любить візуальний контент більше, ніж простий текст.
Науковці в сфері медицини встановили: якщо в інструкції до ліків знаходиться тільки текст, людина засвоює з неї лише 70% інформації. А якщо в ту ж інструкцію додати малюнки, то цей відсоток (або показник) зросте до 95%.

Людина схильна обробляти саме візуальну інформацію. Крім того, візуалізація даних має кілька переваг:

• акцентування уваги на різних аспектах даних;
• аналіз великого набору даних зі складною структурою;
• зменшення інформаційного перевантаження людини і утримування її уваги;
• однозначність та ясність виведених даних;
• виділення взаємозв’язків і відносин, що містить в інформація.

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

Для візуалізації даних можна використовувати багато типів діаграм. Тож давайте розберемося в них, щоб швидко вибрати потрібний тип.
Розділимо всі графіки умовно за тим, яка фігура буде відображена (точка, лінія, коло і тд).

Діаграми розсіювання (точки)

Якщо точку помістити на площину, то ми отримаємо наш перший графік – діаграму розсіювання:

Точкова діаграма показує взаємозв'язок між двома різними змінними або демонструє розподіляючі тенденції. Вона підходить, якщо у вас багато різних точкових даних, і ви хочете знайти загальне в їх наборі. Така візуалізація добре працює в пошуку винятків або закономірності розподілу даних. Це найпростіший і найефективніший спосіб показати взаємозв'язок між двома змінними у певний момент.
Але є і недоліки. Зазвичай це перевантаження даними (це стосується і усіх наступних графіків) через що він стає нечитабельним:

Як це виправити?
Щоб виправити це необхідно необхідна заміна на інший вид графіка (розглянемо далі) або ж інший підтип точкового графіка.

1. Бульбашкова (Bubble chart) - це тип діаграми, який відображає три виміри даних. Додається розмір точки (віднині диск). Бульбашкові діаграми можуть полегшити розуміння соціальних, економічних, медичних та інших наукових зв’язків.
2. Смугова діаграма (Strip Plot) — це діаграма розсіювання по одній осі. Значення відображаються точками вздовж однієї унікальної осі, де точки з однаковим значенням можуть накладатися. Для відображення значень, що перекриваються, можна змінити непрозорість або колір точок або замість цього можна використати графік тремтіння чи графік підрахунків. Як правило, кілька смужкових графіків розміщуються поруч, щоб порівняти розподіл точок даних між кількома значеннями, категоріями чи діапазонами.
3. Діаграма тремтіння (Jitter plot) - це варіант смужкової діаграми з кращим переглядом точок даних, що перекриваються. Вона використовується для візуалізації розподілу багатьох окремих одновимірних значень.
Значення відображаються як точки вздовж однієї осі. Потім ці точки випадковим чином зміщуються вздовж іншої осі, що само собою не має значення для даних, дозволяючи точкам не накладатися.
Як правило, кілька графіків тремтіння розміщуються поруч, щоб порівняти розподіл точок даних між кількома значеннями, категоріями чи діапазонами.
4. Карта зв'язків (Network Visualisation) - цей тип візуалізації показує, як речі взаємопов’язані за допомогою вузлів і ліній зв’язків.

Лінійні графіки

Лінійні графіки допомагають орієнтуватися в складних наборах даних і зрозуміти всю історію. Це один з найкращих інструментів візуального аналізу для відстеження та порівняння даних у часі.
Лінійна діаграма або лінійний графік відображає зміну однієї чи кількох числових змінних. Точки даних з'єднані прямими відрізками. Віна подібна до діаграми розсіювання, але тут точки вимірювання впорядковані (зазвичай за значенням на осі Х) і з’єднані прямими відрізками. Лінійна діаграма часто використовується для візуалізації тенденції в даних за проміжки часу, тому лінію часто малюють у хронологічному порядку.

Варіації лінійних графіків

1. Мультилайн - кілька графіків на одній площині.
2. Спарклайн (Sparkline) — це, по суті, невелика лінійна діаграма, створена для розміщення в рядку з текстом або поруч із значеннями в таблиці. Головна мета спарклайну — показати зміни за певний період часу. Його часто можна побачити у фінансовому контексті.
Окрім лінійних графіків спарклайном можуть бути стовпчики або колонки.
3. Діаграма Ridgeline (іноді її називають Joyplot) показує розподіл числового значення для кількох груп. Розподіл можна представити за допомогою гістограм або графіків щільності, вирівняних за однаковою горизонтальною шкалою та представлених із невеликим перекриттям.
4.Діаграма нахилу (Slope chart) є чудовою заміною лінійній діаграмі. Вона підкреслює прогресію між двома значеннями, використовуючи кут нахилу для передачі різниці. Як приклад, за допомогою діаграми нахилу можна візуалізувати зміни рівня зайнятості між різними галузями.
5. Лінійна діаграма кроків і стрибків. Різниця між лінією кроку та лінією стрибка полягає у вертикальних сегментах лінії, що з’єднують «кроки» лінії стрибка. Лінійні діаграми стрибків зазвичай використовуються для демонстрації ставок.

Діаграми площин (area chart)

Це унікальний підвид лінійного графіку. Загалом це той же лінійний чарт, але з залитою областю між лінією та віссю. Головна мета цього графіка - привернути увагу саме до ВЕЛИЧИНИ зміни у певний період часу.

Види діаграм площин

1. Одиночні та множинні. Так само як і в лінійному графіку (одна або декілька графіків на системі координат).
2.Діаграма накопичення та 100% складені графіки (Stacked and 100% stacked). Весь графік представляє загальну суму всіх нанесених даних. Графи з накопиченими площами також використовують площі для передачі цілих чисел, тому вони не працюють для від’ємних значень. Загалом вони корисні для порівняння кількох змінних, що змінюються з часом. Особливість 100% складеного графіка в тому, що всі зміни відображаються у відсотковому еквіваленті і їх сума на кожному відтинку часу не може бути більше або менше 100%.
3. Потоковий (Stream Graph). Ця візуалізація є різновидом діаграми із накопиченням, але замість відображення значень на фіксованій прямій осі потоковий графік має значення, зміщені навколо змінної центральної базової лінії. Графіки потоків відображають зміни даних з часом для різних категорій за допомогою плавних органічних форм, які дещо нагадують річковий потік. Це робить Stream Graphs естетично більш привабливим.
4. Воронкові діаграми (Funnel chart) - це різновид діаграм, які часто використовуються для представлення етапів процесу продажу та відображення суми потенційного доходу на кожному етапі. Цей тип діаграми також може бути корисним для визначення потенційних проблемних областей у процесах продажів.
5. Діаграма Санкея (Sankey diagram). Спосіб візуалізації потоку з одного стану в інший з плином часу. Товщини стрічок пропорційні обʼємам руху в даному напрямку. Діаграми такого типу акцентують увагу на головних напрямках передач в системі. Вони допомагають визначити найбільш важливі внески в потік.

Круговий графік (pie chart)

Кругові діаграми доволі популярні хоч і мають досить вузький варіант використання, який особливо добре інкапсульовано за їх визначенням. Для того, щоб використовувати кругову діаграму, ви повинні мати якусь цілу суму, розділену на кілька окремих частин. Головною метою кругової діаграми має бути порівняння внеску кожної групи в ціле, а не порівняння груп між собою. Якщо наведені вище пункти не виконуються, то цей вид графіку не підходить, і замість нього слід використовувати інший тип діаграми.

Види кругових діаграм

1. Пончик (Doughnut chart) - по суті той же графік, що і круговий, тільки має пусту область в середині. Крім того, пончики більш інфовмісткі ніж секторні, оскільки порожній простір усередині круглої діаграми можна використовувати для відображення інформації в ній.
2. Напівкільце (Half circle chart) - половинка пончика. Іноді може зекономити місце на вашому дашборді та виглядає оригінально.
3. Полярний (Polar chart) - схожа на кругову діаграму, але кожен сегмент має однаковий кут - радіус сегмента відрізняється залежно від значення.
4. Діаграма сонячних променів (Sunburst Chart). Це схоже на вкладені круглі діаграми, однак з ієрархічною природою, яка означає, що кожен рівень представляє деталізацію попереднього. Іншими словами, дочірні сегменти на кожному рівні складають весь батьківський фрагмент.
5. Радар (radar chart) - щось середнє між круговим графіком та графіком площин. Це графічний спосіб відображення багатовимірних даних у вигляді двовимірної діаграми з трьома або більшою кількістю змінних. Ці змінні представлені на осях, що мають спільний початок. Кожна вісь цієї діаграми це певна характеристика зі своєю градацією.

Стовпчикова діаграма

Стовпчикові діаграми дуже універсальні і можуть використовуватися майже усюди і для всього. Це найбільш популярний і зручний графік.
Стовпчаста діаграма використовує горизонтальні або вертикальні стовпчики (стовпчаста діаграма) для показу дискретних числових порівнянь між категоріями. Одна вісь діаграми показує конкретні категорії, які порівнюються, а інша вісь представляє дискретну шкалу значень.

Види стовпчикових діаграм

Через те, що різновидів стовпчикових графіків дуже багато, опишу лише деяку частину з них.

1. Складений (Staked bar chart) - стовпчик складається з декількох окремих стовпчиків, які наче стоять один на одному. В такому випадку показується загальний результат за декількома категоріями.
2. Згрупований (Сlusted bar chart). В цьому випадку стовпчики групуються і ця група розміщується на осі як покази за один вимір чи період. Добре підходить щоб порівнювати різні значення та одному графіку.
3. Перекриття (Overlapping) - щось середнє між складеним та згрупованим графіками. В цьому випадку накладається два стовпчика один на одного (один ширший за інший) і кожен з них зчитується окремо. Такий варіант займає менше місця на графіку.
4. Радіальний (Radial). Цей тип графіка відображає стовпчики в полярній системі координат. Концентричні кола використовуються для шкали значень, тоді як радіальні роздільники (лінії, що відходять від центру) використовуються для позначення кожної категорії. Виглядає цікаво і гарно.
5. Гістограма. В цьому випадку стовпчики знаходяться близько один до одного вздовж осі. Кожен стовпчик на гістограмі представляє табличну частоту для кожного інтервалу. Загальна картина виглядає як звичайний графік площин, але сфокусований на конкретних значеннях, тому дає як і картину в динаміці так і точність.
6. Каскадна діаграма (Waterfall) — це графічний інструмент, який переважно використовується для відображення спільного впливу послідовних позитивних і негативних змінних на початкову точку. По суті, це добре структурований і зрозумілий спосіб зображення поступових переходів, який наголошує на процесі, через який різноманітні фактори складаються в остаточне значення.
7. Діаграма інтервалів (Range column chart) - використовується для відображення діапазонів набору даних між мінімальним і максимальним значенням. Діаграми інтервалів ідеально підходять для порівняння діапазонів, як правило, між категоріями.
Майте на увазі, що діапазонні діаграми зосереджують увагу читача лише на екстремальних значеннях і не дають інформації про точки даних між мінімальними та максимальними значеннями.
8. Свічкова діаграма (Candlestick chart). Цей графік є більш просунутою версією діаграми інтервалів. Стовпчик має форму свічки і теж показує мінімальне та максимальне значення, але разом з тим дає інформацію про розподіл значень всередині.

Важливо розуміти, що в двох останніх випадках в одному стовпчику є певна кількість дискретних значень, а не якесь одне цифрове значення.

Ще деякі графіки

Давайте переглянемо ще деякі види, які зустрічаються не так часто і які читати не завжди просто.

1. Деревоподібна карта (Tree map chart)

Діаграма, яка представляє ієрархічні дані. Як видно з назви, деревоподібні карти мають дані, організовані як гілки та підгілки (це можна інтерпретувати як діаграму сонячних променів, яку оформили у прямокутному вигляді). Добре дає раду з інформацією, де велика кількість категорій та підкатегорій.

2. Теплова карта (Heat map)

Це прямокутна матриця, в якій окремі рядки та стовпці поділено на підкатегорії, які збігаються одна з одною в матриці. Комірки є перетинами рядків і стовпців, які можуть містити або категоричні дані, або числові дані.
Теплова карта показує зв’язок між двома елементами та надає інформацію про рейтинг. Наприклад, від високого до низького або від поганого до відмінного.
Ця діаграма відображає інформацію про оцінку за допомогою різних кольорів або насиченості. Через те, що для передачі значень вони покладаються на колір, теплові карти є діаграмою, яка краще підходить для відображення більш узагальненого вигляду числових даних, оскільки важче точно визначити різницю між відтінками кольорів і витягти з них конкретні точки даних. Однак цю проблему можна вирішити, відобразивши значення даних у клітинках.

3. Вафельна діаграма (Waffle chart)

Вафельна діаграма — це в основному квадратний дисплей, який зазвичай складається зі 100 менших квадратів, розташованих у форматі 10 на 10. Квадрати розфарбовані відповідно до пропорцій, які ви прагнете візуалізувати, подібно до того, як ви розфарбовуєте різні фрагменти кругової діаграми. Однак, порівняно з круговою діаграмою, вафельну діаграму набагато легше читати — наш мозок не дуже пристосований для порівняння різних кутів і зрізів, але ми можемо досить легко порівнювати різні області.

На останок

Додатково хочу додати табличку, згідно якої можна обрати потрібний графік в залежності від задач.

В цій статті я описав загальні графіки та способи їх використання та підвиди. Сподіваюсь, це була корисна інформація для вас. Дякую за увагу.
Миру всім!!!