- PVSM.RU - https://www.pvsm.ru -

Алгоритм визуализации сложных данных

За три года существования Лаборатория данных [1] выпустила около тридцати интерактивных визуализаций, в формате заказных, собственных проектов и бесплатных советов. Мы в лаборатории визуализируем финансовые и научные данные, данные городской транспортной сети, результаты забегов, эффективность маркетинговых кампаний и многое другое. Весной мы получили бронзовую медаль на престижной премии Malofiej 24 [2] за визуализацию результатов Московского марафона.

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

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

Алгоритм визуализации сложных данных - 1

Постановка задачи

Цель алгоритма: визуализировать конкретный набор данных с максимально пользой для зрителя. Первичный сбор данных остаётся за кадром, у нас на входе всегда есть данные. Если нет данных, то и задачи по визуализации данных нет.

Реальность данных

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

Реальность данных — это совокупность процессов и объектов, которые порождают данные. Мой рецепт качественной визуализации: перенести реальность данных на интерактивную веб-страницу с минимальными потерями (неизбежными из-за ограничений носителя), отталкиваться при создании визуализации от полной картины, а не от набора срезов и слоёв. Поэтому первый шаг алгоритма — вообразить и описать реальность данных.

Пример описания:

Автобусы перевозят пассажиров по маршрутам общественного транспорта. Маршрут состоит из остановок, за день на маршруте выполняется несколько рейсов. Расписание движения по маршруту для каждого рейса задано временем прибытия на остановку. В каждый момент о каждой «машине» известны координаты, скорость и количество пассажиров на борту, а также какой рейс по какому маршруту она выполняет, и какой водитель за рулём.

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

Алгоритм визуализации сложных данных - 2

Часть данных идеального набора будет недоступна, поэтому мы «добываем» — ищем в открытых источниках или рассчитываем — те, что можно «добыть» и работаем с ними.

Алгоритм визуализации сложных данных - 3

Масса данных и каркас

Самое большое моё открытие и центральная идея алгоритма Δλ в разделении визуализации на массу данных и каркас. Каркас жёсткий, он состоит из осей, направляющих, областей. Каркас организует пространство пустого экрана, он передаёт структуру данных и не зависит от конкретных величин. Масса данных — концентрат информации, она состоит из элементарных частиц данных. Благодаря этому она пластична и «облепляет» любой заданный каркас. Масса данных без каркаса — бесформенная груда, каркас без массы данных — голый скелет.

В примере с Московским марафоном [3], элементарная частица данных — это бегун, масса — толпа бегунов. Каркас основной визуализации составляет карта с маршрутом забега и временным слайдером.
Алгоритм визуализации сложных данных - 4

Та же масса на каркасе, образованном осью времени, даёт диаграмму финишей:

Алгоритм визуализации сложных данных - 5

Эта важная особенность визуализации, так как она служит отправной точкой для поиска идей. Масса данных состоит из частиц данных, которые легко увидеть и выделить в реальности данных.

Частицы данных и визуальные атомы

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

Поиск элементарной частицы данных на примере городского бюджета:

Поиск элементарной частицы начинайте снизу вверх: ищите разные потенциальные частицы и примеряйте их к данным. «Деньги?» — хорошее начало, единица измерения бюджета, рубль, но слишком универсальная. Подойдёт, если не найдём чего-то более характерного для городского бюджет. «Мероприятия» не подходят, потому что не все бюджетные траты связаны с мероприятиями, есть и другие расходы, а элементарная частица должна описать всю массу данных. «Учреждения?» — с одной стороны, да, все бюджетные деньги можно разбить на отчисления тому или иному бюджетному учреждению. С другой стороны, это уже слишком крупная единица, ведь внутри учреждения может быть несколько транзакций, в том числе периодических. Если мы возьмём учреждение в качестве элементарной частицы, то будем оперировать только общим бюджетом этого учреждение и потеряем временной срез, а также возможный срез по целевому назначению средств.

В моих рассуждениях уже несколько раз промелькнула элементарная частица — отчисление, однократное перечисление бюджетных средств в определённом размере (те самые рубли) в определённую организацию на определённые цели (например, на мероприятия), привязанное ко времени. Отчисления бывают периодические и нерегулярные, цель может состоять из нескольких уровней иерархии: на мероприятие → на организацию концерта → гонорар исполнителя. Из отчислений состоит вся расходная статья городского бюджета, при этом отчисления можно складывать между собой, сравнивать, отслеживать динамику. Если нужно визуализировать приход бюджета, используйте частицу-близнеца — поступление. Из поступлений можно составить картину формирования городского бюджета так же, как из отчислений — картину его использования.

Начинайте с низов (с единиц измерения), примеряйте на роль частицы данных всё более крупные сущности и рассуждайте, почему та или иная сущность подходит или не подходит. В рассуждениях непременно проявятся новые сущности и намёки на частицу данных. Для найденной частицы обязательно выберите подходящее слово или термин, так легче в дальнейшем думать о ней и решать задачу.

После ответа на вопрос о том, что является элементарной частицей данных, задумайтесь, как её лучше всего показать. Элементарная частица данных — это атом, и её визуальное воплощение должно быть атомарным. Основные визуальные атомы: пиксель, точка, круг, черта, квадрат, ячейка, объект, прямоугольник, отрезок, линия и мини-график, а также картографические атомы — точки, объекты, области и маршруты. Чем лучше визуальный передаёт свойства частицы данных, тем нагляднее будет итоговая визуализация.

В примере с городским бюджетом, у отчисления есть два ключевых параметра — сумма (количественное) и назначение — качественное. Для этих параметров хорошо подойдёт прямоугольный атом с единичной шириной: высота столбика закодирует сумму, а его цвет — целевое назначение платежа. Получится картина, похожая на нашу визуализацию личного бюджета [4]:

Алгоритм визуализации сложных данных - 6

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

Алгоритм визуализации сложных данных - 7

Алгоритм визуализации сложных данных - 8

Вот другие примеры частиц данных и соответствующих им визуальных атомов.

Землетрясение в истории землетрясений [5], визуальный атом — картографическая точка:

Алгоритм визуализации сложных данных - 9

Доллар и его степени на логарифмической мани-грамме [6], атом — пиксель:

Алгоритм визуализации сложных данных - 10

Солдат и мирный житель (http://www.fallen.io/ww2/ в визуализация потерь «Fallen.io»), атом — объект — изображение человечка с ружьём и без:

Алгоритм визуализации сложных данных - 11

Флаг (http://flagstories.co на визуализации, посвящённой флагам), атом — объект — изображение флага:

Алгоритм визуализации сложных данных - 12

Час суток (активности или сна) на диаграмме о ритме жизни городов [7], атом — ячейка с двуцветным кодированием:

Алгоритм визуализации сложных данных - 13

Попытка ответа на вопрос в статистике тренажёра ПДД [8], визуальный атом — ячейка со светофорным градиентом:

Алгоритм визуализации сложных данных - 14

Компания на диаграмме разброса налоговых ставок [9], атом — круг:

Алгоритм визуализации сложных данных - 15

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

Алгоритм визуализации сложных данных - 16

Кандидат на визуализации процесса найма «Хантфлоу» [11], атом — линия единичной толщины — путь кандидата по воронке:

Алгоритм визуализации сложных данных - 17

Штат, изменяющий свои политические настроения [12], атом — линия с толщиной:

Алгоритм визуализации сложных данных - 18

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

Алгоритм визуализации сложных данных - 19

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

Алгоритм визуализации сложных данных - 20

Подробнее о визуальных атомах и их свойствах — здесь [14].

Каркас и оси

Интерактивная визуализация живёт в двух измерениях плоскости экрана. Именно эти два измерения придают массе данных «жёсткость», систематизируют визуальные атомы и служат каркасом визуализации. От того, как использованы эти два измерения, зависит насколько интересной, информативной и полезной получится визуализация.

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

С непрерывными осями мы знакомимся в школе, когда строим параболы:

Алгоритм визуализации сложных данных - 21

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

Алгоритм визуализации сложных данных - 22 [15]

График из двух непрерывных осей с точками-объектами:

Алгоритм визуализации сложных данных - 23 [16]

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

Алгоритм визуализации сложных данных - 24 [17]

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

Алгоритм визуализации сложных данных - 25 [18]

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

Алгоритм визуализации сложных данных - 26

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

Алгоритм визуализации сложных данных - 27 [19]

Алгоритм визуализации сложных данных - 28 [20]

Графики с временной осью — первые абстрактные графики, которые положили начало визуализации данных:

Алгоритм визуализации сложных данных - 29 [21]

И с успехом применяются до сих пор:

Алгоритм визуализации сложных данных - 30 [22]

Ещё один способ показать временное измерение — дополнить пространственную картину слайдером:

Алгоритм визуализации сложных данных - 31 [23]

В исключительных случаях пространство и время можно совместить на плоской карте или вдоль одной пространственной оси:

Алгоритм визуализации сложных данных - 32

Алгоритм визуализации сложных данных - 33 [24]

Интервальная ось разделена на отрезки (равные или неравные), которым ставится в соответствие значение параметра по определённым правилам. Интервальная ось подходит как для качественных, так и для количественных параметров.

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

Алгоритм визуализации сложных данных - 34 [25]

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

Алгоритм визуализации сложных данных - 35 [26]

Две интервальные оси не обязаны превращаться в хитмеп:

Алгоритм визуализации сложных данных - 36 [27]

Слоистая ось укладывает сразу несколько параллельных осей (непрерывных и интервальных) в одно измерение. Чаще всего этот приём работает с таймланами, когда на одну временную ось накладываются слои с данными, текстами и графикой:

Алгоритм визуализации сложных данных - 37 [28]

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

Алгоритм визуализации сложных данных - 38

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

Алгоритм визуализации сложных данных - 39 [29]

Но она не обязательно «съедает» экранное измерение:

Алгоритм визуализации сложных данных - 40 [30]

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

Ещё один способ использовать пространство экрана — заполненить его последовательными блоками равномерной сетки. Объекты внутри сетки упорядочены линейно, например, по алфавиту:

Алгоритм визуализации сложных данных - 41 [13]

Или по размеру города:

Алгоритм визуализации сложных данных - 42 [31]
Сетка подстраивается под размер экрана и не имеет ярко выраженной горизонтальной и вертикальной направляющих.

В большинстве случаев каркас визуализации складывается из перечисленных выше осей. Редким исключением являются трёхмерные визуализации, ещё более редким — удачные их примеры:

Алгоритм визуализации сложных данных - 43 [32]

В тех случаях, когда выбор каркаса неочевиден, я комбинирую оси с важными параметрами более-менее случайным образом, формулирую, на какой вопрос отвечает то или иное сочетание осей, выбираю самые удачные сочетания. Интересные картины получаются на стыке предположительно зависимых параметров данных:

Алгоритм визуализации сложных данных - 44

Поведение стран на аналитических графиках «Гэпмайндера» [33]

И из распределения частиц данных вдоль разных осей:

Алгоритм визуализации сложных данных - 45
Результаты пилотов «Формулы 1» [34] по времени, количеству гонок и возрасту пилотов

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

Алгоритм визуализации сложных данных - 46
Оборот наличности в РФ [35]

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

Алгоритм визуализации сложных данных - 47
Карта резистентности [36] для НИИ ФХМ

Несколько однотипных графиков:

Алгоритм визуализации сложных данных - 48
Анализ цен авиабилетов [37] для Туту.ру

Резюме

Итак, вот как я вижу процесс создания визуализации от начала до конца.

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

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

Чтобы познакомиться с алгоритмом «из первых рук» и научиться его применять, приходите на курс по визуализации данных [38], который я проведу в Москве, 8 и 9 октября. На курсе, помимо алгоритма, участники знакомятся с D3.js — мощным инструментом реализации нестандартных решений визуализации данных.

Автор: Лаборатория данных

Источник [39]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/interfejsy/193419

Ссылки в тексте:

[1] Лаборатория данных : http://datalaboratory.ru/

[2] премии Malofiej 24: http://www.malofiejgraphics.com/

[3] с Московским марафоном: http://moscowmarathon.org/ru/moscowmarathon/2015/results/visualization/

[4] визуализацию личного бюджета: http://budget.datalaboratory.ru/

[5] в истории землетрясений: https://www.flickr.com/photos/idvsolutions/7439877658/in/photostream

[6] на логарифмической мани-грамме: http://xkcd.com/980/huge/#x=-6432&y=-4480&z=2

[7] на диаграмме о ритме жизни городов: https://jawbone.com/blog/jawbone-up-data-by-city/#moscow

[8] в статистике тренажёра ПДД: http://pdd.datalaboratory.ru/

[9] на диаграмме разброса налоговых ставок: http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html

[10] в футбольной аналитике: http://big-chances.datalaboratory.ru/#/2014-2015

[11] на визуализации процесса найма «Хантфлоу»: http://huntflow.datalaboratory.ru/main

[12] изменяющий свои политические настроения: http://www.nytimes.com/interactive/2012/10/15/us/politics/swing-history.html

[13] Динамика занятости: http://mbostock.github.io/protovis/ex/minnesota-full.html

[14] здесь: http://blog.infotanka.ru/tags/vizualnye-atomy/

[15] Image: http://www.bloomberg.com/news/articles/2013-02-07/the-rise-of-long-term-joblessness#r=nav-img

[16] Image: http://tanks.datalaboratory.ru/

[17] Image: http://www.nytimes.com/interactive/2013/08/02/sports/baseball/bang-for-your-buck.html

[18] Image: http://blog.infotanka.ru/all/vopros-otvet-rynok-truda-v-dinamike/

[19] Image: http://insideairbnb.com/new-york-city/index.html?neighbourhood=&filterEntireHomes=false&filterHighlyAvailable=false&filterRecentReviews=false&filterMultiListings=false

[20] Image: http://www.nytimes.com/interactive/2012/06/11/sports/basketball/nba-shot-analysis.html

[21] Image: https://en.wikipedia.org/wiki/William_Playfair

[22] Image: http://www.nytimes.com/interactive/2015/11/17/health/wiredwell-food-diary-super-tracker.html

[23] Image: http://www.nytimes.com/interactive/2013/09/25/sports/americas-cup-course.html

[24] Image: http://artgorbunov.ru/projects/amundsen-and-scott/

[25] Image: http://graphics.wsj.com/infectious-diseases-and-vaccines/

[26] Image: http://www.artlebedev.ru/studio/stat/demography/

[27] Image: http://www.nytimes.com/interactive/2012/01/24/us/politics/0124-words.html?_r=0

[28] Image: http://infograms.ru/

[29] Image: http://nbremer.github.io/urbanization/

[30] Image: http://www.nytimes.com/interactive/2015/02/23/business/economy/the-changing-nature-of-middle-class-jobs.html

[31] Image: http://weather-records.datalaboratory.ru/

[32] Image: http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html

[33] на аналитических графиках «Гэпмайндера»: http://www.gapminder.org/tools/bubbles#_state_time_value=1992

[34] Результаты пилотов «Формулы 1»: http://charts.animateddata.co.uk/f1/

[35] Оборот наличности в РФ: http://cashflow.datalaboratory.ru/

[36] Карта резистентности: http://resistomap.datalaboratory.ru/

[37] Анализ цен авиабилетов: http://ticket-prices.datalaboratory.ru/

[38] на курс по визуализации данных: http://datalaboratory.ru/course/

[39] Источник: https://habrahabr.ru/post/311210/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best