9 заметок с тегом

разбор

Экспресс-разбор визуализации налоговых ставок

В ноябре 2017-го Нью-Йорк Таймс выпустил работу Алисии Парлапиано и Адама Пирса об увеличениях и уменьшениях налоговых ставок в новом законопроекте Белого дома:

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

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

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

Столбикам предшествует такой экран:

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

Экспресс-разбор визуализации о пробках

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

Работа «Время в пути» Виллема Тулпа показывает автотрафик в Нидерландах за 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.

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

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

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

29 ноября   визуализация данных   карта   пробки   разбор

Разбор карты этнографического музея

Сначала — контекст. Круговая панорама для этого лучше описаний:

Музей — классный, пример остальным этнографическим музеям. На 84 гектарах лесопарка собраны 118 построек 17...20 веков. Гуляешь по парку и впитываешь историю. Или не впитываешь, всё равно пейзаж интереснее, чем в обычном парке: домики, дорожки, мельницы и музейная чистота. Поесть тоже дают, как в парке. На праздники устраивают реконструкции. Открыт для посетителей удивительно давно — в 1932-м, основан 1924-м.

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

Утвари внутри домов немного, но образцы выразительные. Телефон сел, поэтому покажу только «сундук» из бревна. А самое крутое там — купальня с устройством для ингаляции.

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

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

1. Чтобы рассматривать А3 нужен стол или обе руки. Чуть полегче, если согнуть пополам. Но тогда карту и легенду не видно одновременно — приходится помнить какие-то абстрактные цифры пока крутишь листовку. Это главная проблема. Решение понятное — расставить подписи рядом с объектами, но трудоёмкое, на него ушло основное время. Пока расставлял, раза три думал, что не сработает. Понимаю, почему авторы не стали усложнять себе жизнь и восхищаюсь ребятами, которые делали советские атласы. Не обошлось без уловок.

  • Чтобы разместить такую кучу текста, я погасил всю графику, кроме строений. Так вытянул на передний план домики и освободил место для текста. Это называют информационными слоями.
  • Часть зданий объединены в хозяйства и деревни. Часть хозяйств перевезена целиком, и другая собрана из нескольких мест с одной окрестности. Делаю это деление на уровне пятен и подписей жирным. В таких группах не подписываю каждое здание, а собираю подписи в блок с выноской. На каждом здании висит табличка с информацией идентичной листовке. Дойдя до хозяйства, интереснее живые строения, чем карта. Читают таблички только тех строений, что приглянулись. Это решение стоит тестировать. Если не то — вернуть цифры. И всё равно подписи рядом с объектами и собранные в блоки будут считываться проще.
  • В оригинале было семь строений помеченные «not re-erected» (нереконструированные), номера 35, 62, 71, 74, 77, 109 и 119. У меня их нет. В жизни нереконструированные строения, на которые обратил внимание, были грудой брёвен. К ним не подойти из-за высокой травы, табличек тоже не заметил
  • Ещё в оригинале указаны даты добавления в коллекцию музея. Пользы от них не увидел, ощутил вред — сбивался и путался между двумя датами, вдвойне тяжко, когда 1930-й у одного здания — дата постройки, а у другого —дата добавления в музей. У меня этих дат тоже нет.
  • Номера 122, 123 и 124 оставил сносками.

2. Понять, где жила какая народность нельзя. Просто добавляю карту современной Латвии с условными границами и подписями:

3. Шрифт Бенгет (ITC Benguiat) не подходит. Он лучше работает, как акцидентный. В небольшом кегле с такими межстрочными, читать его становиться совсем больно. Благодаря выразительной форме считывать цифры на карте тоже не удобно. И по стилю шрифт не подходит. Это антиква, основанная на шрифтах Модерна. Даты возведения и характер построек не о Модерне никак. Рабочее решение подсказывает сайт музея: характерные заголовки и читаемый текст спокойным гротеском. Я набрал основной текст системной Тахомой. Ещё лучше сработает шрифт, более читаемый при той же площади.

4. Цифры плохо объединяются в пятна, из-за чего сложно определять границы территорий народностей. Мои пятна решают задачу не полностью.

Моменты, которые ушли сами при решении предыдущих пунктов.

  • Цветовое кодирование связывает цифр на карте с иллюстраций снизу, но не с легендой, которая эти цифры расшифровывает.
  • Если сложить карту вдвое, народность Латгалов уходит за сгиб. И синие цифры на карте становятся неопознаваемыми.

В итоге карту без изменений можно печатать на А4 для острозрячих, и на А3 для остальных:

Добавка. Отдельная беда с географией. Живу в Латвии пять лет и знаю, где жили какие народности, а местные тем более. Эти названия историко-культурных областей используются до сих пор. Поэтому гуляя по музею, я не понял принцип расположения народностей.

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

Часть народностей «живут на своих местах», Рига в заливе, у земгалов нет выхода к воде, Латгалия и Курземе по краям.

Главное отличие — Латгали и Курземе поменены местами. Уверен, что доставал бы карту в два раза реже, будь они на местах. Работал бы принцип естественного соответствия (см. Нормана).

Минутка политики. Пытался объяснить себе эту невнимательность к родным краям. Допустим, география в порядке. Тогда, входя в музей через главный вход (у парковки снизу), посетитель встречает Латгалию, с которой у латышей неоднозначные отношения. А одним из первых хозяйств будет русское, потому что такие встречались на востоке Латвии (см. наверху карты). Отношения латышей и русских тоже неоднозначные. Поэтому проще всю эту неоднозначность задвинуть подальше. Тут я сильно надеюсь, что ошибаюсь.

2017   Земля   карта   Латвия   музей   разбор

Разбор приложения с задачами по математике для умственного счёта

Лет 5-6 назад, я узнал о приложении «Въ умѣ», которое советую, как тренировку для мозга.

Это набор из 1001 задачи для умственного счёта, которые составил Сергей Рачинский. Впервые задачи вышли в виде книги «1001 задача для умственного счёта. Пособие для учителей сельских школ» в 1891 году. Эти задачи решали крестьянские дети начальной и средней школы. При жизни автора книга переиздавалась три раза и стала известна по всей России.

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

Счёт в уме требует неслабой концентрации и тренирует её. Заметил, что 5 лет назад фокусировался лучше и решал быстрее. Сейчас часто сбиваюсь, забываю значения из условия задачи и отвлекаюсь.

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

Каждый раз при запуске пользователю показывают две заставки, экран с единственной кнопкой и экран с выбором из 4 вариантов. Напомню, что главное в приложении — задачи.

Авторы занимают только половину экрана, на второй половине — почти нечитаемый текст и неудобная клавиатура.

Самое важное — содержание задачи — набрано мелким кеглем со слишком узкими межстрочными и излишне большой длиной строки. Хорошо читается только номер задачи. Под текстом бывают дополнения оформленные серым курсивом. Там пишут как условия задачи, так и не влияющие на решение пояснения. Из-за одинакового внешнего вида в половине случаев приходится читать лишнее.

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

В разделе «О приложении» — бардак с вёрсткой:

В списке задачи разбиты по 70 на экран — не самое удобное число, чтобы на него делить, когда хочешь добраться к 495 задаче.

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

Отдельная проблема — кнопка «ѣ». Понять, что за ней невозможно. А там живёт встроенная покупка:

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

Теперь — моя версия ключевых экранов. Ей, конечно, не хватает тестирования. Предлагайте улучшения.

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

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

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

Рассказ о приложении уместил на один экран с прокруткой:

Список задач тоже собирал в один экран с прокруткой и дополнил его общим видом. На нём наглядно видно, что сложность задач нарастает:

Собрал всё это в 2-минутный ролик:

Если хотите, чтобы помог с этим или другим приложением, пишите на почту kirill@kipo.name. Если интересны детали, задавайте вопросы (лучше тоже на почту).

P. S. Разбор визуализаций пока на паузе, вместо них планирую писать разборы похожие на этот.

Разбор визуализации о смертности от огнестрела

Сегодня разберу работу Бена Кассельмана, Метью Козлина и Рубена Фишера-Баума для Файв Тсёти Эйт о смертности от огнестрельного оружия в США.

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

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

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

«Смертность от огнестрельного оружия» получила золотую медаль крупнейшего международного конкурса инфографики «Малофей». По-моему, оценка завышена.

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

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

Моя версия — вариация на тему, потому что я не знаю задачи авторов. Свою сформулировал так: «как сделать сравнение выборок интересным и увлечь больше зрителей?»

Сначала я меняю визуальный атом с квадратика на сердечко — оно символизирует потерянную жизнь. Показываю все данные сразу. Обучение и шаги больше не нужны.

Потом меняю работу фильтров так, чтобы всегда было видно причины смерти в выборке и состав оставшейся части. Использую силу каркаса: как не настраивай выборки, число погибших останется, поменяются только цвета. Так почему бы не покрасить точки антивыборки, повысив информативность? Например, 1) разделили по полу, 2) потом выбрали «белых» старше 35 лет, 3) убрали деление по полу:

Получается, один жест настаивает несколько выборок, которые интереснее сравнивать.

Следующий разбор — в июле. Ещё хотел позвать на курс «Визуализация данных», который начнётся в субботу, но оказалось, что мест уже нет.

2017   визуализация данных   разбор
Ранее Ctrl + ↓