Таня Мисютина, заметки с тегом: визуальные атомы

Алгоритм Δλ: визуальные атомы, часть 3

Mon, 04 Jul 2016 12:24:34 +0300

Заключительная заметка о визуальных атомах (первая и вторая части). Сегодня поговорим о мини-графиках и картографических атомах.

Мини-графики
Иногда смысловой частицей данных, которую мы изучаем и сравниваем, является не единичное значние, а набор или серия значений. На прошедшем в апреле учебном курсе один из студентов визуализировал показания датчиков, контролирующих производственные процессы. Десятки датчиков измеряли различные величины иногда с частотой раз в секунду. В такой ситуации формально квантом информации является отдельное измерение, но осмысленной частицей данных будет «поток», то есть последовательность значений с каждого датчика. Потоки визуализируются мини-графиками, из которых складывается общая картина и которые можно сравнивать между собой. Вот грубая иллюстрация на примере схемы Регуляра — реальное расположение приборов и визуализация:

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

На визуализации занятости жителей Миннесоты хорошо видна сезонность в одних отраслях, рост и спад в других:

Видно появление и исчезновение таинственной отрасли Animal Aquaculture и космической программы — Space Research and Technology, в полной версии на сайте

Для удобства чтения все графики имеют одинаковую высоту в максимальной точке, соответсвенно разный масштаб. Конкретные значения показаны при наведении.

Частота употребления слов в официальных обращениях американских политиков:

Резкие пики сопровождаются пояснениями редакции

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

Активность у своих и чужих ворот, слабые и сильные стороны команд на визуализации голевых моментов:

Мини-графики хороши для больших наборов значений со стройной иерархией внутри. Осмелившись показать все значения, не усредняя и не обедняя выборку, вы получите информационно насыщенную, интересную для изучения визуализацию.

Географические атомы: точка, объект, область, маршрут

Визуальные атомы на карте могут быть точечными (точки, круги, объекты), площадными (области) и протяжёнными (линии).

Точки на карте — это места, события и объекты с конкретными координатами. В зависимости от масштаба карты точка может быть квартирой в доме на конкретной улице или целым городом.

Например, квартиры, сдающиеся через «Эйрбнб»:

Уже знакомые нам землетрясения:

И полезные/вредные приёмы пищи, слившиеся в облака:

Сложенные стопками смертельные случаи заболевания холерой на знаменитой карте Джона Сноу:

Дома Москвы, родом из разных эпох:

Достопримечательности на карте-путеводителе:

Точечные объекты на карте передают информацию своим положением, цветом, размером, а также засчёт подписей и картинок. Если данных для каждого объекта слишком много, располагать их на карте будет не лучшим решением. Карта диктует жёсткую топологию, и экранное пространство используется неэффективно. В таком случае я советую показать данные в виде мини-графиков, а карту использовать как дополнительный справочный элемент:

При наведении на мини-график город на карте подсвечивается красным.

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

Однотонная показывает один параметр, например, высоту застройки или стоимость земли на Манхэттене:

Двухцветная — близость к полюсам шкалы:

Заливка полупрозрачными слоями делает акцент на пересечении накладывающихся друг на друга областей:

Границы районов Бостона, как их видят жители

На карте затопления Венеции площадная заливка улиц и площадей сочетается с точечной окраской пострадавших от наводнений зданий:

Карта может быть настоящим произведением искусства, с большим количеством цветов и оттенков:

Геологическая карта Пенсильвании

На «карте здоровья» части света покрыты паттерном человеческих тканей и клеток, поражаемых самой распространённой там болезнью:

Северная Америка покрыта жировой тканью, Европа — мозговыми нейронами (слабоумие), Африка — кровяными тельцами (малярия и СПИД), на страдающей от бесплодия Гренландии изображены сперматозоиды

Вместо заливки иногда используются изолинии, как на этой карте запахов Эдинбурга:

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

Классическая карта Шарля Минара показывает объёмы экспорта угля Англией:

Поток делится на крупные рукава, потом на более мелкие — в соответствии с морскими путями доставки угля

Суточное движение швейцарских поездов:

Цветом линии показана скорость поездов, толщиной — их загруженность

Ветра в Токио в режиме реального времени:

Чем длиннее линии, тем сильнее дует

Воздушные пути на разной высоте над городами мира:

Высота полёта закодирована цветом

Поток беженцев из разных стран:

Чем больше поток, тем ярче луч

Вся пресная вода земного шара, как на ладони:

Сразу видно, где густо, а где пусто

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

Следующая теоретическая заметка выйдет 8 августа.

Алгоритм Δλ: визуальные атомы, часть 2

Mon, 20 Jun 2016 11:54:48 +0300

Продолжение заметки о визуальных атомах. Сегодня поговорим о прямоугольниках, отрезках и линиях.

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

Прямоугольники единичной ширны складываются в столбиковую диаграмму:

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

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

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

Например, если количество детей в возрастной группе задаёт высоту прямоугольника, а доступность садиков для этой группы — его ширину, то площадь прямоугольника соответсвует количеству детей этого возраста, попавшему в сад.

Видим, что проблема для группы 1,5-2 года стоит острее, чем для группы 2-2,5 года — хоть доступность садов в ней и выше, но нуждающихся в садике детей намного больше.

По такому же принципу прямоугольники образуют квадратные и тримэп-диаграммы:

Отрезок
Отрезок визуализирует частицу данных, состоящую из двух связанных элементов.

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

Связь «до и после» двух значений одного и того же параметра, например, количество высокооплачиваемых должностей в различных индустриях:

.
Связанные попарно значения, например, результаты ответов на вопросы теста, личный и средний по соотечественникам:

Или пара связанных пространственных координат, например, начальное и конечное положение мяча при ударе по воротам:

Линия
Линия показывает путь или историю объекта во времени. Для линии важны не только точка начала, точка конца и связь (как в отрезке), но и форма пути между ними. Линии сливаются в потоки и делятся на русла.

Частица данных — кандидат, проходящий этапы воронки собеседований

Частица данных — штат, изменяющий свои настроения во времени

Частица данных — поезд метро, движущийся между станциями

Частица данных — заключённый, проводящий срок в тюрьме Гуантанамо

Частным случаем линии является географический маршрут.

Частицы данных — французы армии Наполеона, наступающие на Москву и отступающие обратно

О мини-графике и географических атомах (точке, области, объекте и маршруте) я расскажу в третьей, заключительной заметке.

Следующая теоретическая заметка выйдет 4 июля.

Алгоритм Δλ: визуальные атомы, часть 1

Tue, 31 May 2016 18:13:34 +0300

Сегодня я расскажу о наглядном визуальном кодировании частиц, из которого естественным образом вырастает содержательная и наглядная визуализация.

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

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

Эффективность предприятия в прошлой заметке также складывается из пикселей — тонн продукции:

Точка
В отличие от пикселя, точка кодирует отдельные, явно различимые объекты: спортсменов, рядовых американцев, сотрудников, температурные рекорды, землетрясения, медалистов, приёмы пищи и т. п. Цвет точек отражает качественную или количественную характеристику.

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

Медалисты всех олимпиад в беге на 100 м

Годовая зарплата и результативность ведущих американских бейсболистов (по командам)

Активность американцев в разное время суток

Иногда точки соединяет кривая:

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

Для складывания элементов в стопки в одном измерении подходят чёрточки:

Для составления столбиковых диаграмм используют квадратики:

Иногда точки просто накладывают друг на друга с прозрачностью, в таком случае яркие точки показывают наиболее распространённые значения:

Температурные рекорды в РФ

Землетрясения с 1898 года

Большое количество точек сливают в круги, потоки и облака, в них точки перестают быть различимыми:

Визуальное сложение мы обсудим подробнее в следующих заметках.

Круг
Круг помимо цвета и расположения имеет радиус, который кодирует дополнительное измерение данных. Классический пример элементарных частиц-кругов — страны на Гэпмайндере, где изменяющийся со временем радиус круга показывает рост популяции:

Здесь частицей данных является страна, в отличие от рассмотренного выше примера с олимпийскими медалями, где элементарной частицей является медаль, и уже медали суммируются в круги-страны.

Другие примеры:

Круги — крупные американские компании, радиус показывает их «вес» (рыночную стоимость), цвет — размер налоговой ставки

Круги — картины Пабло Пикассо, радиус показывает стоимость проданных на аукционах картин, цвет — тип (масло/акварель-гуашь)

Ячейка
Ячейка — это элемент регулярной сетки, как правило, квадратной формы. Линейные размеры ячейки не имеют значения. Частицы данных распределяются по сетке, а их свойства суммируются или усредняются и отображаются цветом ячейки.

Суммирование может быть примитивным (чем больше, тем ярче):

Или оценочным, например, с использованием светофорного градиента «хорошо-плохо»:

В этом примере на одной сетке просуммированы сон и ходьба городских жителей:

Объект
Роль точки на графике может играть реальный объект. В этом случае к свойствам, показанным на графике, добавляется наглядная информация с изображения объекта.

Классический пример Эдварда Тафти — график соотношения массы мозга и массы тела с животными вместо точек. Легенда не требуется:

Точки-воины и мирные жители в визуализации потерь Второй мировой войны:

Лабораторная визуализация характеристик танков из игры WoT, размеры танков на графике соответствуют реальным размерам:

Диаграммы и графики о флагах мира, собранные из флагов:

График изменения шерсти амурского тигра из шерстинок показывает не только длину, но и густоту шерсти, и появление подшёрстка:

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

Следующая теоретическая заметка выйдет 20 июня.