Делал сравнительную таблицу для моделей аэротруб. Типа такой:

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

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

Отельный вызов, который не победил — расположение параметров не в строках, а в столбцах. Цифры удобнее сравнивать, когда они друг под другом — в столбцах и выровнены по разрядам. Тогда в строках будут модели. Само по себе оно несложно, но на веб-странице с заливающими заголовками моделей и адаптацией под разные экраны становится сложно.

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

Работа «Время в пути» Виллема Тулпа показывает автотрафик в Нидерландах за 1 ноября 2016-го:

Данные собирали датчиками на дорогах. Замеряли время, за которое автомобиль проходит от датчика до датчика. Потом поминутно сравнивали собранные данные с нормой. За норму считали усреднённые значения для этих же датчиков в ночное время, когда движение максимально быстрое. Пропуски в данных интерполировали, а выбросы больше, чем в 3 раза, заменили на среднее соседних значений.

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

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

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

Автор пишет, что участки без данных — серые, а с маленьким отклонением — синие (голубые). По-русски назвал бы «сизым». Эти цвета почти неразличимы на видео. Среднее отклонение красное, сильное — белое. Почему такой набор? Может, в честь Нидерландского флага, но зачем? Светофорный градиент сработает лучше.

Цвет и толщина линии — это плюс-минус понятно, а как работает смещение может быть не очевидно. Предполагаю, что так. Ровная дорога с датчиками:

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

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

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

Автор ссылается на модель «Дорожных волн», которая объясняет поведение визуализированного типа пробок. И вот тут, мне кажется, главная ловушка. Классно же прям волнами показать эти «дорожные волны»:

Because of the displacement based on the deviation from the assumed normal travel time, the visualization shows clearly that traffic jams can move in waves. These waves move backwards, opposite of the driving direction of the cars.

Но визуализация получается сложная и не наглядная.

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

Чтобы перемещаться во времени, добавил бы слайдер с получасовыми отметками. Чтобы смотреть, как текут «волны», оставил бы плей, но выключил по умолчанию. Перетекание «волн» будет за счёт движения градиента. Ещё попробовал бы под дорогой рисовать тень, интенсивность которой повторно закодирует отклонение от нормы. Так можно добиться эффекта, которого искал автор, только без искажений топографии. «Волны» будут видны не сбоку, а сверху. Дальше можно добавить выбор дня.

В школе знакомят с общим видом двумерного графика функции и его полной версией:

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

Гэпмайндер

Нью-Йоркский марафон 2014 года

Мнение американцев о пользе продуктов против мнения экспертов по питанию

Хиты к выплатам бейсболистам в 2013-м

Рост безработицы в долгой перспективе

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

Но не в случае со временем. Большинство данных описывают прошлое. Мизерная их часть — расчётные прогнозы. А настоящее на оси икс описано одной точкой — нолём:

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

Почему так не знаю. Аргумент о направлении чтения слева на право, слабее аргумента о первичном распознании всего изображения. Возможно, дань традиции. Верю, что традиции тленны. Естественным образом они уступают место новым. Поэтому считаю, что тайм-серии придут к своему естественному виду: