Алгоритм візуалізації складних даних

За три роки існування Лабораторія даних випустила близько тридцяти інтерактивних візуалізацій, у форматі замовних, власних проектів і безкоштовних рад. Ми в лабораторії пропонуємо фінансові та наукові дані, дані міської транспортної мережі, результати забігів, ефективність маркетингових кампаній і багато іншого. Навесні ми отримали бронзову медаль на престижній премії Malofiej 24 за візуалізацію результатів Московського марафону.

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

Я хочу поділитися з читачами хабра результатами своїх досліджень.



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

Реальність даних
Зазвичай дані зберігаються в таблицях бази, що об'єднують множину таблиць. Всі таблиці виглядають однаково, як і кругові/стовпчикові діаграми, побудовані на їх основі. Всі дані — унікальні, вони наділені змістом, підпорядковані внутрішньої ієрархії, пронизані зв'язками, містять закономірності та аномалії. У таблицях показані зрізи і шари повної цілісної картини, яка стоїть за даними — її я називаю реальністю.

Реальність даних — це сукупність процесів і об'єктів, які породжують дані. Мій рецепт якісної візуалізації: перенести реальність даних на інтерактивну веб-сторінку з мінімальними втратами (неминучими з-за обмежень носія), відштовхуватися при створенні візуалізації від повної картини, а не від набору зрізів і шарів. Тому перший крок алгоритму — уявити і описати реальність даних.

Приклад опису:
Автобуси перевозять пасажирів за маршрутами громадського транспорту. Маршрут складається із зупинок, за день на маршруті виконується кілька рейсів. Розклад руху по маршруту для кожного рейсу задано часом прибуття на зупинку. У кожен момент про кожній «машині» відомі координати, швидкість і кількість пасажирів на борту, а також який рейс за яким маршрутом вона виконує, і який водій за кермом.

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



Частина даних ідеального набору буде недоступна, тому ми видобуваємо» — шукаємо у відкритих джерелах або розраховуємо — ті, що можна «добути» і працюємо з ними.



Маса даних і каркас
Найбільше моє відкриття і центральна ідея алгоритму Δλ в поділі візуалізації на масу даних і каркас. Жорсткий Каркас, він складається з осей, направляючих, областей. Каркас організовує простір порожнього екрана, він передає структуру даних і не залежить від конкретних величин. Маса даних — концентрат інформації, вона складається з елементарних частинок даних. Завдяки цьому вона пластична і «обліплює» будь-який заданий каркас. Маса даних без каркасу — безформна купа, каркас без маси даних — голий скелет.

У прикладі з Московським марафоном, елементарна частинка даних — це бігун, маса — натовп бігунів. Каркас основної візуалізації становить карта з маршрутом забігу і тимчасовим слайдером.


Та ж маса на каркасі, утвореному віссю часу, дає діаграму фінішів:


Ця важлива особливість візуалізації, так як вона служить відправною крапкою для пошуку ідей. Маса даних складається з частинок даних, які легко побачити і виділити в реальності даних.

Частинки даних і візуальні атоми
Елементарна частинка даних — сутність достатньо велика, щоб володіти характерними властивостями даних, і при цьому досить дрібна, щоб усі дані можна було розібрати на часточки і зібрати наново, в тому ж або іншому порядку.

Пошук елементарної частинки даних на прикладі міського бюджету:

Пошук елементарної частинки починайте знизу вгору: шукайте різні потенційні частинки і приміряйте їх до даних. «Гроші?» — гарний початок, одиниця виміру бюджету, рубль, але дуже універсальна. Підійде, якщо не знайдемо чогось більш характерного для міського бюджету. «Заходи» не підходять, тому що не всі бюджетні витрати пов'язані з заходами, є й інші витрати, а елементарна частинка повинна описати всю масу даних. «Установи?» — з одного боку, так, все бюджетні гроші можна розбити на відрахування тій чи іншій бюджетній установі. З іншого боку, це вже занадто велика одиниця, адже всередині установи може бути декілька транзакцій, у тому числі періодичних. Якщо ми візьмемо установа як елементарної частинки, то будемо оперувати лише загальним бюджетом цього закладу і втратимо часовий зріз, а також можливий зріз за цільовим призначенням коштів.

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

Починайте з низів (з одиниць вимірювання), приміряйте на роль частинки даних все більш великі сутності та міркували, чому та або інша сутність підходить чи не підходить. У міркуваннях неодмінно виявляться нові сутності і натяки на частку даних. Для знайденої частинки обов'язково виберіть підходяще слово або термін, так легше надалі думати про неї і вирішувати завдання.


Після відповіді на питання про те, що є елементарною часткою даних, задумайтеся, як її краще всього показати. Елементарна частинка даних — це атом, і її візуальне втілення повинно бути атомарним. Основні візуальні атоми: піксель, точка, коло, риска, квадрат, клітинка, об'єкт, прямокутник, відрізок, лінія і міні-графік, а також картографічні атоми — точки, об'єкти та маршрути. Чим краще візуальний передає властивості частинки даних, тим наочніше буде підсумкова візуалізація.

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



Одна і та ж частка на різних каркасах: вздовж часової осі, за категоріями або в осях час доби/день тижня.





Ось інші приклади частинок даних і відповідних їм візуальних атомів.

Землетрус в історії землетрусів, візуальний атом — картографічна точка:

Долар та його ступеня на логарифмічній мані-грамі, атом — піксель:


Солдатів і мирний житель ((http://www.fallen.io/ww2/ в візуалізація втрат «Fallen.io»)), атом — об'єкт — зображення чоловічка з рушницею і без:


Прапор ((http://flagstories.co/ на візуалізації, присвяченій прапорів), атом — об'єкт — зображення прапора:


Годину доби (активності або сну) на діаграмі про ритмі життя міст, атом — комірка з двокольоровий кодуванням:


Спроба відповіді на питання у статистиці тренажера ПДР, візуальний атом — осередок зі світлофорним градієнтом:


Компанія діаграма розкиду податкових ставок, атом — коло:


Гол і гольовий момент футбольної аналітики, атом — відрізок — траєкторія удару на футбольному полі:


Кандидат на візуалізації процесу найму «Хантфлоу», атом — лінія одиничної товщини — шлях кандидата по воронці:


Штат, змінює свої політичні настрої, атом — лінія з товщиною:


Відрізки між станціями на маршрутах швейцарських поїздів, атом — картографічна лінія з товщиною:


Динаміка зайнятості в різних галузях жителів Міннесоти, атом — міні-графік:


Детальніше про візуальних атомах та їх властивості — тут.

Каркас і осі
Інтерактивна візуалізація живе у двох вимірах площині екрану. Саме ці два виміри надають масі даних «жорсткість», систематизують візуальні атоми і служать каркасом візуалізації. Від того, як використано ці два виміри, залежить наскільки цікавою, інформативною і корисною вийде візуалізація.

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

З безперервними осями ми знайомимося в школі, коли будуємо параболи:


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


Графік з двох безперервних осей з точками-об'єктами:


Іноді на осях відзначають середні значення, і графік ділиться на осмислені квадранти («дорогі результативні гравці», «дешеві результативні» і т. д.):


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


Для наочного відображення параметра з великим розкидом значень використовують вісь з логарифмічною шкалою:


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




Графіки з тимчасової віссю — перші абстрактні графіки, які поклали початок візуалізації даних:


І з успіхом застосовуються до цих пір:


Ще один спосіб показати часовий вимір — доповнити просторову картину слайдером:


У виняткових випадках простір і час можна поєднати на плоскій карті або вздовж однієї просторової осі:





Інтервальна вісь розділена на відрізки (рівні чи нерівні), яким ставиться у відповідність значення параметра за певними правилами. Інтервальна вісь підходить як для якісних, так і кількісних параметрів.

Хитмеп — класичний приклад комбінації двох інтервальних осей. Наприклад, кількість випадків захворювання по штатах і контингентах років, показаних на відповідному каркасі:


Стовпчикову діаграму є прикладом комбінації інтервальної (проміжок часу) і безперервної (значення) осі:


Дві інтервальні осі не повинні перетворюватися в хитмеп:


Шарувата вісь укладає відразу кілька паралельних осей (неперервних та інтервальних) в один вимір. Найчастіше цей прийом працює з таймланами, коли на одну тимчасову вісь накладаються шари з даними, текстом і графікою:



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



Дані формату «було-стало» найчастіше вимагають вырожденной осі:


Але вона не обов'язково «з'їдає» екранне вимір:


Вироджене вісь допустима, якщо виявляє важливі особливості даних і таким чином «окуповує» втрату цілого екранного вимірювання. Але використовувати її варто лише в крайньому разі. На жаль, в ефектних популярних форматах інфографіки часто выроджена одна або навіть обидві екранних осі.

Ще один спосіб використовувати простір екрану — заповнити його послідовними блоками рівномірної сітки. Об'єкти всередині сітки лінійно впорядковані, наприклад, за алфавітом:


Або за розміром міста:

Сітка підлаштовується під розмір екрану і не має яскраво вираженої горизонтальної і вертикальної направляючих.

У більшості випадків каркас візуалізації складається з перерахованих вище осей. Рідкісним винятком є тривимірні візуалізації, ще більш рідкісним — вдалі їх приклади:



У тих випадках, коли вибір каркаса неочевидний, я комбіную осі з важливими параметрами більш-менш випадковим чином, формулюю, на яке питання відповідає те чи інше поєднання осей, вибираю найбільш вдалі поєднання. Цікаві картини виходять на стику імовірно залежних параметрів даних:


Поведінка країн на аналітичних графіках «Гэпмайндера»

Та з розподілу частинок даних вздовж різних осей:


Результати пілотів «Формули 1» за часом, кількістю гонок і віком пілотів

В інтерактивних поєднаннях простих каркасів народжуються по-справжньому потужні візуалізації. Таймлайн + карта:


Оборот готівки в РФ

Карта + хитмеп:


Карта резистентності для НДІ ФХМ

Кілька однотипних графіків:


Аналіз цін авіаквитків для Туту.ру

Резюме
Отже, ось як я бачу процес створення візуалізації від початку до кінця.

1. Перейти від таблиць і зрізів до реальності.
2. Знайти частку або частинки даних, з яких будується маса даних.
3. Підібрати візуальні атоми для втілення частинок даних. Візуальні атоми підбираються таким чином, щоб повно і наочно розкривати властивості частинки даних. Чим ближче візуальне втілення до фізичного змістом атрибута, тим краще.
4. На екрані маса даних виражена візуальної масою. Буває, що у візуальній масі помітні окремі атоми, в інших випадку вони усереднюються і складаються.
5. Крім маси даних, в реальності даних є набір вимірювань, в якому живуть дані.
6. Ці вимірювання на екрані відображаються в плоский каркас. Каркас систематизують візуальні атоми, надає масі даних «жорсткість» і розкриває її з певної сторони.
7. Візуалізацію доповнюють інтерфейсом для управління масою даних (наприклад, вибірки і пошук) і каркасом (наприклад, настройка осей).

Алгоритм Δλ поки знаходиться в процесі роботи, постійно уточнюється, доповнюється та вдосконалюється. Я постарався викласти його лаконічно і послідовно, але рамки одного хабрапоста для цього тіснуваті, і багато чого залишилося за кадром. Я буду рада коментарям, з задоволенням поясню незрозумілі моменти і відповім на питання.

Щоб познайомитися з алгоритмом «з перших рук» і навчитись його застосовувати, приходьте на курс по візуалізації даних, який я проведу в Москві, 8 і 9 жовтня. На курсі, крім алгоритму, учасники знайомляться з D3.js — потужним інструментом реалізації нестандартних рішень візуалізації даних.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.