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

Мы выделили и разобрали следующие типы визуальных атомов:

У каждого типа визуальных атомов свой набор свойств, который можно задействовать для проявления свойств частицы данных. Если у точки нам доступен только цвет (но даже в него можно упаковать два свойства, как пол и возраст марафонцев), то изображение танка на диаграмме сравнения танков игры Word of tanks передаёт 6 значений брони, физический размер танка и бесчисленное количество параметров «формы», которые позволяют сравнить внешний вид совершенно разных моделей. Плюс к каждому танку цепляется флажок нации и подпись с названием модели.

Во‑первых, перенося данные на экран за счёт визуальных атомов, мы буквально «материализуем» их. Данные, которые раньше были абстрактными строками и столбцами, становятся объектами на экране, которые находятся в нашем поле зрения и которыми мы можем управлять.

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

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

Например, на этой карте отставание или опережение по времени появления первых листочков в разных районах США по сравнению с прошлым временным периодом показано буквально, распустившимися листочками:

У отрезков и линий тоже ограниченная и понятная область применения: связи между объектами, состояния «было‑стало» и переходы между дискретными этапами (например, воронки).

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

Помните наш бизнес‑кейс об очередях в банковских отделениях? Там частицей данных был талон, которых в системе десятки и сотни тысяч. Это как раз тот случай, когда мы обозначим талон просто точкой, а цветом закодируем важный параметр талона. Как думаете, какой?

Об этом речь пойдёт на следующем шаге, в следующей серии советов.