5 експериментів по візуалізації даних

Цієї весни ми в лабораторії експериментували з різними даними: характеристиками танків в грі World of Tanks, статистикою правильних і неправильних відповідей на тренажері ПДР, температурними рекордами в містах Росії, порушеннями в роботі маршрутних таксі Нижнього Новгорода, історією зміни цін на авіаквитки. Результатом експериментів стали 5 наочних інтерактивних візуалізацій:



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


Загальні принципи
Ми починаємо роботу над візуалізацією з виділення «цеглинки», мінімальної неподільній одиниці інформації, потім будуємо з цеглинок наочну макрокартину і підсилюємо результат інтерактивністю.

Цеглинка — це атом даних, щоб виділити його необхідно вивчити дані під мікроскопом. Тривіальний приклад цеглинки — тисяча загиблих під вражаючою візуалізації втрат Другої світової війни (автор: Neil Halloran). Після виділення цеглинки ми вибираємо наочний спосіб візуалізації його властивостей таким чином, щоб цеглинки відрізнялися між собою (порівнянність) і візуально «складалися» один з одним (адитивність). У згаданій візуалізації цеглинка позначається чоловічком з рушницею або без, національність кодується кольором. Німецького солдата легко відрізнити від радянського мирного жителя:



А складаючи фігурки отримуємо сумарні втрати — в конкретній битві, або певної країни, або всіх країн за час війни:



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

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

Звернемося до наших експериментів.

Танки
Завдання: порівняти характеристики танків в грі World of Tanks. Джерело даних: tanks vs.com

Як цеглинки ми вибрали танк, найбільш наочний і природний спосіб візуалізації — зображення танка (див. приклад з автомобілями). Головні характеристики танків — це мобільність, «атака» та «захист». Покажемо фортеця різних ділянок броні кольором, так відразу видно рівень захисту танка в цілому, і слабкі місця. Швидкість і атаку проявимо на двовимірному графіку:



Живий прототип: http://tanks.datalaboratory.ru/
Швидкість відкладена по горизонталі, а максимальний збиток за 10 сек., який був обраний в якості параметра атаки, по вертикалі. Точки на графіку — танки на полі бою, можна порівняти їх зовнішній вигляд, розмір і ключові характеристики. Ще одна пряма аналогія: чим далі від початку координат танк розташований по горизонталі, тим він швидше (далі поїде) в життя. Країни, типи та рівні танків налаштовуються в фільтрах над графіком, на осях можна вибрати будь-які інші параметри. При наведенні на танки показані всі характеристики списком.

Порівняємо, наприклад, важкі танки СРСР і Німеччини вище 5 рівня. Найшвидші танки ІС-7, ИС-8 (СРСР) і VK 36.01 (Німеччина), останній сильно програє в максимальному рівні. E 100 хоч і повільний, зате чемпіон з втратами і міцності. На графіку міцності і базового утрати спостерігається майже лінійна залежність між параметрами. Тільки німецький Tiger I (більше міцний, ніж ударний) і радянський КВ (більше ударний, ніж міцний) відрізняються за співвідношенням цих параметрів від інших танків вибірки.

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

ПДР
Завдання: отримати користь з статистики тренажера квитків по ПДР. Дані надані тренажером «Атрена»: pdd.atrena.org

В даних прихований відповідь на питання, скільки потрібно тренуватися, щоб успішно скласти іспит. В цьому їх головний інтерес та користь. Цеглинка в даному випадку — це спроба, відповідь конкретним користувачем на конкретне питання в N-й раз і результат («правильно» або «помилка»). Щоб оцінити складність конкретного питання, обчислимо відсоток помилок в залежності від номера спроби.

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



Живий прототип: pdd.datalaboratory.uk


Бачимо, що без підготовки здати іспит майже нереально, в кожному квитку в середньому допущено від 3 до 5 помилок. Зате після першого тренувального кола ситуація сильно покращується: 23 квитка 40 здані з другої спроби. З третьої спроби не піддалися лише найскладніші: 11-ї, 27-ї і 38-ї квитки, причому видно, які саме питання викликають найбільші труднощі. В 11-м і 27-м квитках, є кілька питань, в яких відбуваються помилки. А в 38-му 13-й питання викликає проблеми у третини студентів, з-за чого середня кількість помилок на людину залишається вище двох. Починаючи з четвертої спроби всі квитки в середньому здані, але 13-й питання 38-го квитка викликає труднощі у третини студентів аж до п'ятнадцятої спроби!

«Подвійна галочка» зазначає квитки, середня кількість помилок в яких падає нижче одиниці, тобто які здані з великою ймовірністю. До п'ятнадцятої спробі таких 11 з 40. Взагалі, картина між п'ятою-п'ятнадцятою спробою змінюється незначно. Найбільш помітний ефект від першого тренувального кола, а проходити квитки більше 5 разів практично безглуздо.

Ми також додали угруповання за темами. Видно, що складні і прості питання розподілені за темами більш-менш рівномірно.

Погода
Завдання: показати щоденні температурні рекорди, щоб було цікаво їх вивчати. Джерело даних: rp5.uk

Ми показали річний графік температур точковим графіком з «тепловим» градієнтом, зробили акцент на сьогоднішній температурі і рекорди, доповнили кліматичної зведенням (кількість сонячних і похмурих днів, річні опади) та населенням міста — це наш хліб. Акцент на сьогоднішній температурі і рекорди додає релевантності: «Зараз в Москві +22°С, а в 2014 в цей день було +10°С — ого!».

З цеглинок ми зібрали макрокартину для міст-мільйонників Росії і додали Севастополь і Сочі для контрасту:



Живий прототип: weather-records.datalaboratory.uk
Виявляється, температурний профіль Новосибірська не так вже значно відрізняється від Москви. Взимку температура регулярно піднімається вище нуля в Ростові, Волгограді і Воронежі, в Севастополі розкид від +20 до -20, і тільки Сочі нижче нуля не опускається в принципі. Рекордсмени за сонячним дням — Севастополь, Сочі і, несподівано, Омськ, антирекордсмены — Пітер, Москва, Воронеж і Челябінськ. У Москві більше опадів, ніж у Петербурзі, Омську в два рази більше, ніж в Новосибірську, у Воронежі в три рази більше, ніж у Волгограді.

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

Маршрутки
Завдання: візуалізувати порушення маршрутних таксі (відхилення від розклад і перевищення швидкості). Дані надані компанією Baseride: baseride.com

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



Конкретні запізнення і перевищення можна показати при наведенні:



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



Живий прототип: minibus.datalaboratory.uk
Бачимо, що останні чотири зупинки сильніше за інших страждають від порушень розкладу, а швидкість перевищують найчастіше на початку і на довгому перегоні в кінці маршруту. Завдяки інтерактивності видно, як маршрутки, що стартували в різний час дня, розподіляються за маршрутом: хто і де відстає і, навпаки, випереджає загальну масу.

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

Ціни авіаквитків
Завдання: показати зміни цін на авіаквитки в залежності від дати вильоту й дати покупки. Дані Туту.ру: tutu.uk

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

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



Живий прототип: ticket-prices.datalaboratory.uk
В цілому підтверджується гіпотеза, що чим ближче виліт, тим дорожче квитки: в правій частині графіка дорогих покупок більше, мережа щільніше. Але і винятків з цього правила — низхідних графіків з заблаговременными дорогими покупками — досить багато.

Уважно вивчимо найбільш докладні і однорідні дані про переліт Москва → Сімферополь (тільки Аерофлот):



Квитки в минулому літньому сезоні купувалися і заздалегідь, і напередодні вильоту, в середньому за 5 тис. руб з випадковими відхиленнями до 7-10 тис. Восени щільність «хвоста» зліва зменшилася, покупки здійснювалися ближче до дати вильоту, при цьому рання ціна в середньому трохи менше пізньої. Взимку квитки ніхто не купував раніше, ніж за півтора місяці до вильоту, зате ціни покупок в останні дні помітно скачуть до 10-15 тис. Навесні видно яскраво виражені сходинки (фіксовані тарифи): сині березневі сходинки до зниження цін за вказівкою президента, зелені квітневі — після.

Якісна візуалізація виявляє закономірності і аномалії в даних, дозволяє побачити їх неозброєним оком. Це інструмент вивчення даних без громіздкого софта і складної математики. Ми впевнені, що візуалізація корисна в найрізноманітніших завданнях, і наші експерименти тому підтвердження. Щоб взяти участь в експерименті, надсилайте цікаві дані на data@datalaboratory.ru з позначкою в рубрику «Питання-відповідь».

Джерело: Хабрахабр

0 коментарів

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