Точка — это самый «фундаментальный» атом и самый простой. Он подходит для большинства задач и чаще всего встречается на визуализациях. Самый распространённый сценарий использования точки в качестве визуального атома, это ситуация, когда частиц очень много, тысячи и десятки тысяч. У точки есть одно единственное графическое свойство «цвет», а значит, своим внешним видом точка умеет проявить только одно свойство частицы данных. В редких случаях, в цвет точки можно упаковать два измерения, вспомните пол и возраст марафонцев.

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

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

Ещё один классный пример, где столбики составлены из отдельных визуальных атомов, — это статистика заездов гонщиков Формулы‑1. Здесь вместо точек чёрточки, которые удобно складывать в стопки, но сути дела это не меняет.

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

Если пролистать ниже, увидим небольшие столбики с сериями побед. Это звёзды Формулы‑1 из 50‑х и 60‑х, где заезды проходили реже, чем сейчас.

А здесь точками показаны бегуны на стометровке и отставание в метрах от финиша Усейна Болта в 2012 году:

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

Один из моих любимых примеров использования точек на карте — это визуальное исследование работы такси от Александра Кукушкина:

Цветом здесь закодировано время вызова такси. Обратите внимание, как по‑разному окрашены улицы в центре, с каких‑то по вечерам разъезжаются офисные сотрудники, а с других полуночные тусовщики :‑)

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

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

Занятно наблюдать, как за сто лет эволюционировала физическая форма игроков. В 2000‑х даже появились ярко выраженные кластеры!

А здесь частица данных — бросок конкретного игрока из конкретной позиции на баскетбольной площадке, с определённым результатом:

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

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

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

Круги можно расположить вдоль одной оси, как на этой визуализации налоговой ставки для разных компаний в штатах:

Здесь частица данных — компания, её капитализация показана размером кружка, а эффективная налоговая ставка цветом.

Круги хорошо работают на графике разброса. Канонический пример тут — проект «Гэпмайндер» Ганса Рослинга:

Каждая страна показана кружком, размер которого соответствует численности населения и меняется во времени, а цветом показана принадлежность к континентам. Если вы ещё не видели, как Ганс Рослин с помощью этого графика за 4 минуты показывает 200 лет мировой истории, посмотрите прямо сейчас, не пожалеете!

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

Но даже на этом примере видно, что в какой‑то момент странам там становится тесно и они уезжают от своего реального географического расположения:

Другие примеры использования кругов встречаются крайне редко. Мне приходит в голову разве что диаграмма экономической зависимости стран от китайского импорта, которую я недавно уже показывала в советах:

Здесь кружками снова показаны страны. Цвет тем ярче, чем сильнее экономика страны завязана на экспорт товаров в Китай. А площадь показывает ВВП страны, а также маленьким кружком внутри объём экспорта в Китай — заодно сразу видно соотношение экспорта с ВВП. Нестандартная и в то же время наглядная визуализация!

Мы разобрали два вида визуальных атомов: точку и круг. Продолжение следует.