За три года существования Лаборатория данных выпустила около тридцати интерактивных визуализаций, в формате заказных, собственных проектов и бесплатных советов. Мы в лаборатории визуализируем финансовые и научные данные, данные городской транспортной сети, результаты забегов, эффективность маркетинговых кампаний и многое другое. Весной мы получили бронзовую медаль на престижной премии Malofiej 24 за визуализацию результатов Московского марафона.
Последние полгода я работаю над алгоритмом визуализации данных, который систематизирует этот опыт. Моя цель — дать рецепт, который позволит разложить любые данные по полочкам и решать задачи по визуализации данных также чётко и последовательно, как математические задачи. В математике не важно, складывать яблоки или рубли, распределять кроликов по ящикам или бюджеты на рекламные кампании — есть стандартные операции сложения, вычитания, деления и т.д. Я хочу создать универсальный алгоритм, который поможет визуализировать любые данные, при этом учитывает их смысл и уникальность.
Я хочу поделиться с читателями Хабра результатами своих исследований.
![](https://habrastorage.org/files/7f1/358/461/7f13584611ff45c9ae4fac94c637be15.png)
Цель алгоритма: визуализировать конкретный набор данных с максимальной пользой для зрителя. Первичный сбор данных остаётся за кадром, у нас на входе всегда есть данные. Если нет данных, то и задачи по визуализации данных нет.
Обычно данные хранятся в таблицах и базах, объединяющих множество таблиц. Все таблицы выглядят одинаково, как и круговые/столбиковые диаграммы, построенные на их основе. Все данные — уникальны, они наделены смыслом, подчинены внутренней иерархии, пронизаны связями, содержат закономерности и аномалии. В таблицах показаны срезы и слои полной целостной картины, которая стоит за данными — её я называю реальностью данных.
Реальность данных — это совокупность процессов и объектов, которые порождают данные. Мой рецепт качественной визуализации: перенести реальность данных на интерактивную веб-страницу с минимальными потерями (неизбежными из-за ограничений носителя), отталкиваться при создании визуализации от полной картины, а не от набора срезов и слоёв. Поэтому первый шаг алгоритма — вообразить и описать реальность данных.
Пример описания:
Данные, с которых мы начинаем работу, — это всего лишь отправная точка. После знакомства с ними, мы представляем породившую их реальность, где данных гораздо больше. В реальности данных, без оглядки на первоначальный набор мы выбираем данные, из которых могли бы сделать максимально полную и полезную для зрителя визуализацию.
![](https://habrastorage.org/files/15e/3ad/582/15e3ad5822eb48c480f2684da3f315a1.png)
Часть данных идеального набора будет недоступна, поэтому мы «добываем» — ищем в открытых источниках или рассчитываем — те, что можно «добыть» и работаем с ними.
![](https://habrastorage.org/files/fb6/e1b/9e3/fb6e1b9e33d743fd802354ed3948e2de.png)
Самое большое моё открытие и центральная идея алгоритма ?? в разделении визуализации на массу данных и каркас. Каркас жёсткий, он состоит из осей, направляющих, областей. Каркас организует пространство пустого экрана, он передаёт структуру данных и не зависит от конкретных величин. Масса данных — концентрат информации, она состоит из элементарных частиц данных. Благодаря этому она пластична и «облепляет» любой заданный каркас. Масса данных без каркаса — бесформенная груда, каркас без массы данных — голый скелет.
В примере с Московским марафоном, элементарная частица данных — это бегун, масса — толпа бегунов. Каркас основной визуализации составляет карта с маршрутом забега и временным слайдером.
![](https://habrastorage.org/files/7f1/358/461/7f13584611ff45c9ae4fac94c637be15.png)
Та же масса на каркасе, образованном осью времени, даёт диаграмму финишей:
![](https://habrastorage.org/files/898/8bd/d20/8988bdd203474acfa530ed7518574df2.png)
Эта важная особенность визуализации, так как она служит отправной точкой для поиска идей. Масса данных состоит из частиц данных, которые легко увидеть и выделить в реальности данных.
Элементарная частица данных — сущность достаточно крупная, чтобы обладать характерными свойствами данных, и при этом достаточно мелкая, чтобы все данные можно было разобрать на частицы и собрать заново, в том же или ином порядке.
Поиск элементарной частицы данных на примере городского бюджета:
После ответа на вопрос о том, что является элементарной частицей данных, задумайтесь, как её лучше всего показать. Элементарная частица данных — это атом, и её визуальное воплощение должно быть атомарным. Основные визуальные атомы: пиксель, точка, круг, черта, квадрат, ячейка, объект, прямоугольник, отрезок, линия и мини-график, а также картографические атомы — точки, объекты, области и маршруты. Чем лучше визуальный передаёт свойства частицы данных, тем нагляднее будет итоговая визуализация.
В примере с городским бюджетом, у отчисления есть два ключевых параметра — сумма (количественное) и назначение — качественное. Для этих параметров хорошо подойдёт прямоугольный атом с единичной шириной: высота столбика закодирует сумму, а его цвет — целевое назначение платежа. Получится картина, похожая на нашу визуализацию личного бюджета:
![](https://habrastorage.org/files/ca9/197/59c/ca919759ca754ae1b368964d8a118a00.png)
Одна и та же частица на разных каркасах: вдоль временной оси, по категориям или в осях время суток/день недели.
![](https://habrastorage.org/files/095/bb4/192/095bb4192a88421c895c6e5a5ffb1c0b.png)
![](https://habrastorage.org/files/2d8/10d/f90/2d810df906c44c239aa48f8e5bc64dd4.png)
Вот другие примеры частиц данных и соответствующих им визуальных атомов.
Землетрясение в истории землетрясений, визуальный атом — картографическая точка:
![](https://habrastorage.org/files/33b/2b8/331/33b2b8331cdd42d7be25762e0b7db056.png)
Доллар и его степени на логарифмической мани-грамме, атом — пиксель:
![](https://habrastorage.org/files/953/87b/7f0/95387b7f05a54edebb528fa0934bbf85.png)
Солдат и мирный житель в визуализация потерь «Fallen.io», атом — объект — изображение человечка с ружьём и без:
![](https://habrastorage.org/files/de8/1df/81f/de81df81f8704fc4adbef8ad1347e203.png)
Флаг на визуализации, посвящённой флагам, атом — объект — изображение флага:
![](https://habrastorage.org/files/a4c/a33/4c3/a4ca334c3eb24731b7b9ba1f6a415e7b.png)
Час суток (активности или сна) на диаграмме о ритме жизни городов, атом — ячейка с двуцветным кодированием:
![](https://habrastorage.org/files/897/cc0/d51/897cc0d51fe746d9936c64ba79e18eda.png)
Попытка ответа на вопрос в статистике тренажёра ПДД, визуальный атом — ячейка со светофорным градиентом:
![](https://habrastorage.org/files/597/302/a6c/597302a6c930488eab8648d0a757699e.png)
Компания на диаграмме разброса налоговых ставок, атом — круг:
![](https://habrastorage.org/files/9c6/2de/04a/9c62de04ae5b445ead020fefea5ebf51.png)
Гол и голевой момент в футбольной аналитике, атом — отрезок — траектория удара на футбольном поле:
![](https://habrastorage.org/files/cf9/9eb/10a/cf99eb10ab194552a89a80b71ba48917.png)
Кандидат на визуализации процесса найма «Хантфлоу», атом — линия единичной толщины — путь кандидата по воронке:
![](https://habrastorage.org/files/fec/95d/af0/fec95daf028c4003b6ed258ba3f92a5a.png)
Штат, изменяющий свои политические настроения, атом — линия с толщиной:
![](https://habrastorage.org/files/9c8/04f/306/9c804f3060a642caa77e75b48b74200c.png)
Отрезки между станциями на маршрутах швейцарских поездов, атом — картографическая линия с толщиной:
![](https://habrastorage.org/files/6e7/851/3e1/6e78513e19cd42ff87641568633cd9d7.png)
Динамика занятости в разных отраслях жителей Миннесоты, атом — мини-график:
![](https://habrastorage.org/files/a3d/2e2/467/a3d2e24671a3401f8b7d3bbf2c21c460.png)
Подробнее о визуальных атомах и их свойствах — здесь.
Интерактивная визуализация живёт в двух измерениях плоскости экрана. Именно эти два измерения придают массе данных «жёсткость», систематизируют визуальные атомы и служат каркасом визуализации. От того, как использованы эти два измерения, зависит насколько интересной, информативной и полезной получится визуализация.
На хорошей визуализации каждому измерению соответсвует ось, которая выражает значимый параметр данных. Я делю оси на непрерывные (включая оси пространства и времени), интервальные, слоистые и вырожденные.
С непрерывными осями мы знакомимся в школе, когда строим параболы:
![](https://habrastorage.org/files/fad/06b/cf2/fad06bcf226a43a2ac3b4fa7fc17e746.png)
Вообще, под графиком обычно понимают именно такой каркас — из двух непрерывных осей. Зачастую график показывает зависимость одной величины от другой, в таком случае по сложившейся традиции независимая величина откладывается по горизонтали, а предположительно зависимая — по вертикали:
![](https://habrastorage.org/files/7b9/e7c/61c/7b9e7c61cd6e4c28a5ca988abaf6ea0a.png)
График из двух непрерывных осей с точками-объектами:
![](https://habrastorage.org/files/9d1/3bd/7e8/9d13bd7e8b064f0292e3699b3d2d383f.png)
Иногда на осях отмечают средние значения, и график делится на осмысленные квадранты («дорогие результативные игроки», «дешёвые результативные» и т. д.):
![](https://habrastorage.org/files/464/a5c/149/464a5c1493ff4393bc16ed05aa03d1b3.png)
Также на графике можно провести лучи, они покажут соотношение параметров, отложенных по осям, которое само по себе может оказаться значимым параметром (в данном случае, конкуренция в отрасли):
![](https://habrastorage.org/files/57a/761/532/57a76153281c417c9632eeb36e78857a.png)
Для наглядного отображения параметра с большим разбросом значений используют ось с логарифмической шкалой:
![](https://habrastorage.org/files/dca/52a/6da/dca52a6da5e64f71a42d1fd7c8f20e74.jpg)
Важный частный случай непрерывных осей — оси пространства и времени, например, географическая координата или линия времени. Карта, вид футбольного поля или баскетбольной площадки, схема производства — примеры комбинации двух пространственных осей.
![](https://habrastorage.org/files/c80/72e/e76/c8072ee76a7447c9a1508458b90a45be.png)
![](https://habrastorage.org/files/93b/59f/160/93b59f1600f144d48476dbd4a06858b0.png)
Графики с временной осью — первые абстрактные графики, которые положили начало визуализации данных:
![](https://habrastorage.org/files/619/e88/85f/619e8885fd3e47ae92834007db81e88d.png)
И с успехом применяются до сих пор:
![](https://habrastorage.org/files/73d/92e/f6a/73d92ef6a054428b95e366cd842326ec.png)
Ещё один способ показать временное измерение — дополнить пространственную картину слайдером:
![](https://habrastorage.org/files/76b/4d2/301/76b4d2301ca44bb58c61ce59823088c7.png)
В исключительных случаях пространство и время можно совместить на плоской карте или вдоль одной пространственной оси:
![](https://habrastorage.org/files/8de/7af/0a9/8de7af0a924f4e36b767428406603d7a.png)
![](https://habrastorage.org/files/884/240/6f6/8842406f61a049c4816d7c672aa3d50e.png)
Интервальная ось разделена на отрезки (равные или неравные), которым ставится в соответствие значение параметра по определённым правилам. Интервальная ось подходит как для качественных, так и для количественных параметров.
Хитмеп — классический пример комбинации двух интервальных осей. Например, количество случаев заболевания по штатам и годам, показанных на соответствующем каркасе:
![](https://habrastorage.org/files/c59/3c7/60f/c593c760f5a444d58b4331c4b17264af.png)
Столбиковая диаграмма является примером комбинации интервальной (промежуток времени) и непрерывной (значение) оси:
![](https://habrastorage.org/files/8ee/10e/65c/8ee10e65c0f84d52b1a27c36b7177e0d.png)
Две интервальные оси не обязаны превращаться в хитмеп:
![](https://habrastorage.org/files/e70/4d0/eae/e704d0eae6364c0cb524e637188d9ad6.png)
Слоистая ось укладывает сразу несколько параллельных осей (непрерывных и интервальных) в одно измерение. Чаще всего этот приём работает с таймланами, когда на одну временную ось накладываются слои с данными, текстами и графикой:
![](https://habrastorage.org/files/f55/46f/73b/f5546f73bef64b4d968bd63ecfa5b4e4.png)
Иногда визуализации требуется вырожденная ось, к которой не привязан конкретный параметр, либо на которой показано всего два значения. Чаще всего такое случается, когда визуализация иллюстрирует связи — чтобы проявить связь, необходимо пространство между объектами.
![](https://habrastorage.org/files/6c8/040/ea9/6c8040ea95f546ebac112fdb97163418.png)
Данные формата «было-стало» чаще всего требуют вырожденной оси:
![](https://habrastorage.org/files/80c/e60/96e/80ce6096ef16486385b2523869486ee5.png)
Но она не обязательно «съедает» экранное измерение:
![](https://habrastorage.org/files/3d8/fd7/ed0/3d8fd7ed070640c5a8e13721a1fe6c90.png)
Вырожденная ось допустима, если проявляет важные особенности данных и таким образом «окупает» потерю целого экранного измерения. Но использовать её стоит только в крайнем случае. К сожалению, в эффектных популярных форматах инфографики часто вырождена одна или даже обе экранных оси.
Ещё один способ использовать пространство экрана — заполненить его последовательными блоками равномерной сетки. Объекты внутри сетки упорядочены линейно, например, по алфавиту:
![](https://habrastorage.org/files/a3d/2e2/467/a3d2e24671a3401f8b7d3bbf2c21c460.png)
Или по размеру города:
![](https://habrastorage.org/files/5d5/d64/081/5d5d640816f64d80b91ab660681e9221.png)
Сетка подстраивается под размер экрана и не имеет ярко выраженной горизонтальной и вертикальной направляющих.
В большинстве случаев каркас визуализации складывается из перечисленных выше осей. Редким исключением являются трёхмерные визуализации, ещё более редким — удачные их примеры:
![](https://habrastorage.org/files/075/e0c/9af/075e0c9afd7946fbaf8afaa49caeba7b.png)
В тех случаях, когда выбор каркаса неочевиден, я комбинирую оси с важными параметрами более-менее случайным образом, формулирую, на какой вопрос отвечает то или иное сочетание осей, выбираю самые удачные сочетания. Интересные картины получаются на стыке предположительно зависимых параметров данных:
![](https://habrastorage.org/files/b54/f08/924/b54f08924a244b43becef7a150b54caa.png)
Поведение стран на аналитических графиках «Гэпмайндера»
И из распределения частиц данных вдоль разных осей:
![](https://habrastorage.org/files/443/5fe/790/4435fe790034406b963ae04154d35979.png)
Результаты пилотов «Формулы 1» по времени, количеству гонок и возрасту пилотов
В интерактивных сочетаниях простых каркасов рождаются по-настоящему мощные визуализации. Таймлайн + карта:
![](https://habrastorage.org/files/5af/cc9/6f3/5afcc96f3dd14d19bff267979ac71387.png)
Оборот наличности в РФ
Карта + хитмеп:
![](https://habrastorage.org/files/3f5/f82/d8d/3f5f82d8dad64548b3acacaef2ceb6d8.png)
Карта резистентности для НИИ ФХМ
Несколько однотипных графиков:
![](https://habrastorage.org/files/e2b/283/789/e2b283789c5146d4bffecef0086d0910.png)
Анализ цен авиабилетов для Туту.ру
Итак, вот как я вижу процесс создания визуализации от начала до конца.
1. Перейти от таблиц и срезов к реальности данных.
2. Найти частицу или частицы данных, из которых строится масса данных.
3. Подобрать визуальные атомы для воплощения частиц данных. Визуальные атомы подбираются таким образом, чтобы полно и наглядно раскрывать свойства частицы данных. Чем ближе визуальное воплощение к физическому смыслу атрибута, тем лучше.
4. На экране масса данных выражена визуальной массой. Бывает, что в визуальной массе различимы отдельные атомы, в других случая они усредняются и складываются.
5. Помимо массы данных, в реальности данных есть набор измерений, в котором живут данные.
6. Эти измерения на экране схлопываются в плоский каркас. Каркас систематизируют визуальные атомы, придаёт массе данных «жёсткость» и расскрывает её с определённой стороны.
7. Визуализацию дополняют интерфейсом для управления массой данных (например, выборки и поиск) и каркасом (например, настройка осей).
Алгоритм ?? пока находится в процессе работы, постоянно уточняется, дополняется и совершенствуется. Я постаралась изложить его лаконично и последовательно, но рамки одного хабрапоста для этого тесноваты, и многое осталось за кадром. Я буду рада комментариям, с удовольствием поясню непонятные моменты и отвечу на вопросы.
Чтобы познакомиться с алгоритмом «из первых рук» и научиться его применять, приходите на курс по визуализации данных, который я проведу в Москве, 8 и 9 октября. На курсе, помимо алгоритма, участники знакомятся с D3.js — мощным инструментом реализации нестандартных решений визуализации данных.
Последние полгода я работаю над алгоритмом визуализации данных, который систематизирует этот опыт. Моя цель — дать рецепт, который позволит разложить любые данные по полочкам и решать задачи по визуализации данных также чётко и последовательно, как математические задачи. В математике не важно, складывать яблоки или рубли, распределять кроликов по ящикам или бюджеты на рекламные кампании — есть стандартные операции сложения, вычитания, деления и т.д. Я хочу создать универсальный алгоритм, который поможет визуализировать любые данные, при этом учитывает их смысл и уникальность.
Я хочу поделиться с читателями Хабра результатами своих исследований.
![](https://habrastorage.org/files/7f1/358/461/7f13584611ff45c9ae4fac94c637be15.png)
Постановка задачи
Цель алгоритма: визуализировать конкретный набор данных с максимальной пользой для зрителя. Первичный сбор данных остаётся за кадром, у нас на входе всегда есть данные. Если нет данных, то и задачи по визуализации данных нет.
Реальность данных
Обычно данные хранятся в таблицах и базах, объединяющих множество таблиц. Все таблицы выглядят одинаково, как и круговые/столбиковые диаграммы, построенные на их основе. Все данные — уникальны, они наделены смыслом, подчинены внутренней иерархии, пронизаны связями, содержат закономерности и аномалии. В таблицах показаны срезы и слои полной целостной картины, которая стоит за данными — её я называю реальностью данных.
Реальность данных — это совокупность процессов и объектов, которые порождают данные. Мой рецепт качественной визуализации: перенести реальность данных на интерактивную веб-страницу с минимальными потерями (неизбежными из-за ограничений носителя), отталкиваться при создании визуализации от полной картины, а не от набора срезов и слоёв. Поэтому первый шаг алгоритма — вообразить и описать реальность данных.
Пример описания:
Автобусы перевозят пассажиров по маршрутам общественного транспорта. Маршрут состоит из остановок, за день на маршруте выполняется несколько рейсов. Расписание движения по маршруту для каждого рейса задано временем прибытия на остановку. В каждый момент о каждой «машине» известны координаты, скорость и количество пассажиров на борту, а также какой рейс по какому маршруту она выполняет, и какой водитель за рулём.
Данные, с которых мы начинаем работу, — это всего лишь отправная точка. После знакомства с ними, мы представляем породившую их реальность, где данных гораздо больше. В реальности данных, без оглядки на первоначальный набор мы выбираем данные, из которых могли бы сделать максимально полную и полезную для зрителя визуализацию.
![](https://habrastorage.org/files/15e/3ad/582/15e3ad5822eb48c480f2684da3f315a1.png)
Часть данных идеального набора будет недоступна, поэтому мы «добываем» — ищем в открытых источниках или рассчитываем — те, что можно «добыть» и работаем с ними.
![](https://habrastorage.org/files/fb6/e1b/9e3/fb6e1b9e33d743fd802354ed3948e2de.png)
Масса данных и каркас
Самое большое моё открытие и центральная идея алгоритма ?? в разделении визуализации на массу данных и каркас. Каркас жёсткий, он состоит из осей, направляющих, областей. Каркас организует пространство пустого экрана, он передаёт структуру данных и не зависит от конкретных величин. Масса данных — концентрат информации, она состоит из элементарных частиц данных. Благодаря этому она пластична и «облепляет» любой заданный каркас. Масса данных без каркаса — бесформенная груда, каркас без массы данных — голый скелет.
В примере с Московским марафоном, элементарная частица данных — это бегун, масса — толпа бегунов. Каркас основной визуализации составляет карта с маршрутом забега и временным слайдером.
![](https://habrastorage.org/files/7f1/358/461/7f13584611ff45c9ae4fac94c637be15.png)
Та же масса на каркасе, образованном осью времени, даёт диаграмму финишей:
![](https://habrastorage.org/files/898/8bd/d20/8988bdd203474acfa530ed7518574df2.png)
Эта важная особенность визуализации, так как она служит отправной точкой для поиска идей. Масса данных состоит из частиц данных, которые легко увидеть и выделить в реальности данных.
Частицы данных и визуальные атомы
Элементарная частица данных — сущность достаточно крупная, чтобы обладать характерными свойствами данных, и при этом достаточно мелкая, чтобы все данные можно было разобрать на частицы и собрать заново, в том же или ином порядке.
Поиск элементарной частицы данных на примере городского бюджета:
Поиск элементарной частицы начинайте снизу вверх: ищите разные потенциальные частицы и примеряйте их к данным. «Деньги?» — хорошее начало, единица измерения бюджета, рубль, но слишком универсальная. Подойдёт, если не найдём чего-то более характерного для городского бюджет. «Мероприятия» не подходят, потому что не все бюджетные траты связаны с мероприятиями, есть и другие расходы, а элементарная частица должна описать всю массу данных. «Учреждения?» — с одной стороны, да, все бюджетные деньги можно разбить на отчисления тому или иному бюджетному учреждению. С другой стороны, это уже слишком крупная единица, ведь внутри учреждения может быть несколько транзакций, в том числе периодических. Если мы возьмём учреждение в качестве элементарной частицы, то будем оперировать только общим бюджетом этого учреждение и потеряем временной срез, а также возможный срез по целевому назначению средств.
В моих рассуждениях уже несколько раз промелькнула элементарная частица — отчисление, однократное перечисление бюджетных средств в определённом размере (те самые рубли) в определённую организацию на определённые цели (например, на мероприятия), привязанное ко времени. Отчисления бывают периодические и нерегулярные, цель может состоять из нескольких уровней иерархии: на мероприятие > на организацию концерта > гонорар исполнителя. Из отчислений состоит вся расходная статья городского бюджета, при этом отчисления можно складывать между собой, сравнивать, отслеживать динамику. Если нужно визуализировать приход бюджета, используйте частицу-близнеца — поступление. Из поступлений можно составить картину формирования городского бюджета так же, как из отчислений — картину его использования.
Начинайте с низов (с единиц измерения), примеряйте на роль частицы данных всё более крупные сущности и рассуждайте, почему та или иная сущность подходит или не подходит. В рассуждениях непременно проявятся новые сущности и намёки на частицу данных. Для найденной частицы обязательно выберите подходящее слово или термин, так легче в дальнейшем думать о ней и решать задачу.
После ответа на вопрос о том, что является элементарной частицей данных, задумайтесь, как её лучше всего показать. Элементарная частица данных — это атом, и её визуальное воплощение должно быть атомарным. Основные визуальные атомы: пиксель, точка, круг, черта, квадрат, ячейка, объект, прямоугольник, отрезок, линия и мини-график, а также картографические атомы — точки, объекты, области и маршруты. Чем лучше визуальный передаёт свойства частицы данных, тем нагляднее будет итоговая визуализация.
В примере с городским бюджетом, у отчисления есть два ключевых параметра — сумма (количественное) и назначение — качественное. Для этих параметров хорошо подойдёт прямоугольный атом с единичной шириной: высота столбика закодирует сумму, а его цвет — целевое назначение платежа. Получится картина, похожая на нашу визуализацию личного бюджета:
![](https://habrastorage.org/files/ca9/197/59c/ca919759ca754ae1b368964d8a118a00.png)
Одна и та же частица на разных каркасах: вдоль временной оси, по категориям или в осях время суток/день недели.
![](https://habrastorage.org/files/095/bb4/192/095bb4192a88421c895c6e5a5ffb1c0b.png)
![](https://habrastorage.org/files/2d8/10d/f90/2d810df906c44c239aa48f8e5bc64dd4.png)
Вот другие примеры частиц данных и соответствующих им визуальных атомов.
Землетрясение в истории землетрясений, визуальный атом — картографическая точка:
![](https://habrastorage.org/files/33b/2b8/331/33b2b8331cdd42d7be25762e0b7db056.png)
Доллар и его степени на логарифмической мани-грамме, атом — пиксель:
![](https://habrastorage.org/files/953/87b/7f0/95387b7f05a54edebb528fa0934bbf85.png)
Солдат и мирный житель в визуализация потерь «Fallen.io», атом — объект — изображение человечка с ружьём и без:
![](https://habrastorage.org/files/de8/1df/81f/de81df81f8704fc4adbef8ad1347e203.png)
Флаг на визуализации, посвящённой флагам, атом — объект — изображение флага:
![](https://habrastorage.org/files/a4c/a33/4c3/a4ca334c3eb24731b7b9ba1f6a415e7b.png)
Час суток (активности или сна) на диаграмме о ритме жизни городов, атом — ячейка с двуцветным кодированием:
![](https://habrastorage.org/files/897/cc0/d51/897cc0d51fe746d9936c64ba79e18eda.png)
Попытка ответа на вопрос в статистике тренажёра ПДД, визуальный атом — ячейка со светофорным градиентом:
![](https://habrastorage.org/files/597/302/a6c/597302a6c930488eab8648d0a757699e.png)
Компания на диаграмме разброса налоговых ставок, атом — круг:
![](https://habrastorage.org/files/9c6/2de/04a/9c62de04ae5b445ead020fefea5ebf51.png)
Гол и голевой момент в футбольной аналитике, атом — отрезок — траектория удара на футбольном поле:
![](https://habrastorage.org/files/cf9/9eb/10a/cf99eb10ab194552a89a80b71ba48917.png)
Кандидат на визуализации процесса найма «Хантфлоу», атом — линия единичной толщины — путь кандидата по воронке:
![](https://habrastorage.org/files/fec/95d/af0/fec95daf028c4003b6ed258ba3f92a5a.png)
Штат, изменяющий свои политические настроения, атом — линия с толщиной:
![](https://habrastorage.org/files/9c8/04f/306/9c804f3060a642caa77e75b48b74200c.png)
Отрезки между станциями на маршрутах швейцарских поездов, атом — картографическая линия с толщиной:
![](https://habrastorage.org/files/6e7/851/3e1/6e78513e19cd42ff87641568633cd9d7.png)
Динамика занятости в разных отраслях жителей Миннесоты, атом — мини-график:
![](https://habrastorage.org/files/a3d/2e2/467/a3d2e24671a3401f8b7d3bbf2c21c460.png)
Подробнее о визуальных атомах и их свойствах — здесь.
Каркас и оси
Интерактивная визуализация живёт в двух измерениях плоскости экрана. Именно эти два измерения придают массе данных «жёсткость», систематизируют визуальные атомы и служат каркасом визуализации. От того, как использованы эти два измерения, зависит насколько интересной, информативной и полезной получится визуализация.
На хорошей визуализации каждому измерению соответсвует ось, которая выражает значимый параметр данных. Я делю оси на непрерывные (включая оси пространства и времени), интервальные, слоистые и вырожденные.
С непрерывными осями мы знакомимся в школе, когда строим параболы:
![](https://habrastorage.org/files/fad/06b/cf2/fad06bcf226a43a2ac3b4fa7fc17e746.png)
Вообще, под графиком обычно понимают именно такой каркас — из двух непрерывных осей. Зачастую график показывает зависимость одной величины от другой, в таком случае по сложившейся традиции независимая величина откладывается по горизонтали, а предположительно зависимая — по вертикали:
![](https://habrastorage.org/files/7b9/e7c/61c/7b9e7c61cd6e4c28a5ca988abaf6ea0a.png)
График из двух непрерывных осей с точками-объектами:
![](https://habrastorage.org/files/9d1/3bd/7e8/9d13bd7e8b064f0292e3699b3d2d383f.png)
Иногда на осях отмечают средние значения, и график делится на осмысленные квадранты («дорогие результативные игроки», «дешёвые результативные» и т. д.):
![](https://habrastorage.org/files/464/a5c/149/464a5c1493ff4393bc16ed05aa03d1b3.png)
Также на графике можно провести лучи, они покажут соотношение параметров, отложенных по осям, которое само по себе может оказаться значимым параметром (в данном случае, конкуренция в отрасли):
![](https://habrastorage.org/files/57a/761/532/57a76153281c417c9632eeb36e78857a.png)
Для наглядного отображения параметра с большим разбросом значений используют ось с логарифмической шкалой:
![](https://habrastorage.org/files/dca/52a/6da/dca52a6da5e64f71a42d1fd7c8f20e74.jpg)
Важный частный случай непрерывных осей — оси пространства и времени, например, географическая координата или линия времени. Карта, вид футбольного поля или баскетбольной площадки, схема производства — примеры комбинации двух пространственных осей.
![](https://habrastorage.org/files/c80/72e/e76/c8072ee76a7447c9a1508458b90a45be.png)
![](https://habrastorage.org/files/93b/59f/160/93b59f1600f144d48476dbd4a06858b0.png)
Графики с временной осью — первые абстрактные графики, которые положили начало визуализации данных:
![](https://habrastorage.org/files/619/e88/85f/619e8885fd3e47ae92834007db81e88d.png)
И с успехом применяются до сих пор:
![](https://habrastorage.org/files/73d/92e/f6a/73d92ef6a054428b95e366cd842326ec.png)
Ещё один способ показать временное измерение — дополнить пространственную картину слайдером:
![](https://habrastorage.org/files/76b/4d2/301/76b4d2301ca44bb58c61ce59823088c7.png)
В исключительных случаях пространство и время можно совместить на плоской карте или вдоль одной пространственной оси:
![](https://habrastorage.org/files/8de/7af/0a9/8de7af0a924f4e36b767428406603d7a.png)
![](https://habrastorage.org/files/884/240/6f6/8842406f61a049c4816d7c672aa3d50e.png)
Интервальная ось разделена на отрезки (равные или неравные), которым ставится в соответствие значение параметра по определённым правилам. Интервальная ось подходит как для качественных, так и для количественных параметров.
Хитмеп — классический пример комбинации двух интервальных осей. Например, количество случаев заболевания по штатам и годам, показанных на соответствующем каркасе:
![](https://habrastorage.org/files/c59/3c7/60f/c593c760f5a444d58b4331c4b17264af.png)
Столбиковая диаграмма является примером комбинации интервальной (промежуток времени) и непрерывной (значение) оси:
![](https://habrastorage.org/files/8ee/10e/65c/8ee10e65c0f84d52b1a27c36b7177e0d.png)
Две интервальные оси не обязаны превращаться в хитмеп:
![](https://habrastorage.org/files/e70/4d0/eae/e704d0eae6364c0cb524e637188d9ad6.png)
Слоистая ось укладывает сразу несколько параллельных осей (непрерывных и интервальных) в одно измерение. Чаще всего этот приём работает с таймланами, когда на одну временную ось накладываются слои с данными, текстами и графикой:
![](https://habrastorage.org/files/f55/46f/73b/f5546f73bef64b4d968bd63ecfa5b4e4.png)
Иногда визуализации требуется вырожденная ось, к которой не привязан конкретный параметр, либо на которой показано всего два значения. Чаще всего такое случается, когда визуализация иллюстрирует связи — чтобы проявить связь, необходимо пространство между объектами.
![](https://habrastorage.org/files/6c8/040/ea9/6c8040ea95f546ebac112fdb97163418.png)
Данные формата «было-стало» чаще всего требуют вырожденной оси:
![](https://habrastorage.org/files/80c/e60/96e/80ce6096ef16486385b2523869486ee5.png)
Но она не обязательно «съедает» экранное измерение:
![](https://habrastorage.org/files/3d8/fd7/ed0/3d8fd7ed070640c5a8e13721a1fe6c90.png)
Вырожденная ось допустима, если проявляет важные особенности данных и таким образом «окупает» потерю целого экранного измерения. Но использовать её стоит только в крайнем случае. К сожалению, в эффектных популярных форматах инфографики часто вырождена одна или даже обе экранных оси.
Ещё один способ использовать пространство экрана — заполненить его последовательными блоками равномерной сетки. Объекты внутри сетки упорядочены линейно, например, по алфавиту:
![](https://habrastorage.org/files/a3d/2e2/467/a3d2e24671a3401f8b7d3bbf2c21c460.png)
Или по размеру города:
![](https://habrastorage.org/files/5d5/d64/081/5d5d640816f64d80b91ab660681e9221.png)
Сетка подстраивается под размер экрана и не имеет ярко выраженной горизонтальной и вертикальной направляющих.
В большинстве случаев каркас визуализации складывается из перечисленных выше осей. Редким исключением являются трёхмерные визуализации, ещё более редким — удачные их примеры:
![](https://habrastorage.org/files/075/e0c/9af/075e0c9afd7946fbaf8afaa49caeba7b.png)
В тех случаях, когда выбор каркаса неочевиден, я комбинирую оси с важными параметрами более-менее случайным образом, формулирую, на какой вопрос отвечает то или иное сочетание осей, выбираю самые удачные сочетания. Интересные картины получаются на стыке предположительно зависимых параметров данных:
![](https://habrastorage.org/files/b54/f08/924/b54f08924a244b43becef7a150b54caa.png)
Поведение стран на аналитических графиках «Гэпмайндера»
И из распределения частиц данных вдоль разных осей:
![](https://habrastorage.org/files/443/5fe/790/4435fe790034406b963ae04154d35979.png)
Результаты пилотов «Формулы 1» по времени, количеству гонок и возрасту пилотов
В интерактивных сочетаниях простых каркасов рождаются по-настоящему мощные визуализации. Таймлайн + карта:
![](https://habrastorage.org/files/5af/cc9/6f3/5afcc96f3dd14d19bff267979ac71387.png)
Оборот наличности в РФ
Карта + хитмеп:
![](https://habrastorage.org/files/3f5/f82/d8d/3f5f82d8dad64548b3acacaef2ceb6d8.png)
Карта резистентности для НИИ ФХМ
Несколько однотипных графиков:
![](https://habrastorage.org/files/e2b/283/789/e2b283789c5146d4bffecef0086d0910.png)
Анализ цен авиабилетов для Туту.ру
Резюме
Итак, вот как я вижу процесс создания визуализации от начала до конца.
1. Перейти от таблиц и срезов к реальности данных.
2. Найти частицу или частицы данных, из которых строится масса данных.
3. Подобрать визуальные атомы для воплощения частиц данных. Визуальные атомы подбираются таким образом, чтобы полно и наглядно раскрывать свойства частицы данных. Чем ближе визуальное воплощение к физическому смыслу атрибута, тем лучше.
4. На экране масса данных выражена визуальной массой. Бывает, что в визуальной массе различимы отдельные атомы, в других случая они усредняются и складываются.
5. Помимо массы данных, в реальности данных есть набор измерений, в котором живут данные.
6. Эти измерения на экране схлопываются в плоский каркас. Каркас систематизируют визуальные атомы, придаёт массе данных «жёсткость» и расскрывает её с определённой стороны.
7. Визуализацию дополняют интерфейсом для управления массой данных (например, выборки и поиск) и каркасом (например, настройка осей).
Алгоритм ?? пока находится в процессе работы, постоянно уточняется, дополняется и совершенствуется. Я постаралась изложить его лаконично и последовательно, но рамки одного хабрапоста для этого тесноваты, и многое осталось за кадром. Я буду рада комментариям, с удовольствием поясню непонятные моменты и отвечу на вопросы.
Чтобы познакомиться с алгоритмом «из первых рук» и научиться его применять, приходите на курс по визуализации данных, который я проведу в Москве, 8 и 9 октября. На курсе, помимо алгоритма, участники знакомятся с D3.js — мощным инструментом реализации нестандартных решений визуализации данных.
Поделиться с друзьями
kachkaev
Интересные у вас мысли, на выходе получается некий визуализационный ТРИЗ :–)
Сам занимаюсь визуальной аналитикой, делал в этой области Пи-эйч-ди. Мне нравятся чистота и аккуратность ваших работ, а ещё круто, что вы пытаетесь ввести новые термины в русский язык. Многие понятия циркулируют в сообществах «визуализаторов данных» исключительно на английском, и редко кто парится об их качественном переводе :–)
infotanka
Спасибо за приятные слова :-)
Поделитесь, какая тема была у вашей «диссертации»?
kachkaev
Visual Analytic Extraction of Meaning from Photo-Sharing Services for Leisure Pedestrian Routing