Кирилл Беляев: заметки с тегом разбор

Экспресс-разбор графиков о связи стратегических задач утром и уровня счастья

Кирилл Беляев — Thu, 31 Jan 2019 12:26:22 +0300

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

Максим провёл эксперимент:

Я являюсь адептом стратегии «начать утро с пусть небольшой, но стратегически значимой задачи». [...]

Буквально перед новым годом я запускаю очередной опрос, чтобы в частности проверить гипотезу: есть ли связь между уровнем счастья (измерялся по шкале из одного элемента: «В общем и целом на сколько вы счастливы?» [...]) и тем, как часто респонденты (по их словам) начинают день с чего-то важнго. Измерялось уровнем согласия с утверждением: «Я стараюсь начинать свой день пусть с небольших, но стратегически-важных задач» по шкале от 1 до 5 (в картинках для наглядности я свернул ее в шкалу из трех элементов: 1,2 — редко, 3 — иногда, 4,5 — часто). [...]

Уровень счастья я тоже свернул в два элемента: :-( — это меньше 6 из 10, а :-) — все остальное.

Эксперимент выглядит сомнительно, потому что большинство прошедших его счастливы минимум на 6 из 10. В это сложно поверить. Предполагаю, что тут присутствует ошибка выжившего. «Несчастные» просто не читают Максима :-)

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

Женщины и мужчины отдельно:

Я нашёл ещё несколько затупивших, чтобы убедиться, что дело не только в профдивормации, и пошёл перерисовывать. На моих графиках хорошо бросается в глаза разница в характере ступенек у мужчин и женщин. Чем «длиннее» ступеньки, тем сильнее зависимость уровня счастья от важности задачи, с которой начинается день. У женщин зависимость явная, и именно эта женщины выправляют общий график, хотя количественно их в опросе меньше. Количество опрошенных на моих графиках кодируется высотой столбиков.

Спасибо Роме Бунину, который помогает мне помнить хоть что-то о визуализации данных.

Цвета для кодирования полов

Кирилл Беляев — Tue, 11 Dec 2018 09:28:47 +0300

Всех с чего-то да подрывает. Меня расстраивает плохой дизайн. Иногда так свербит, что беру и переделываю. Но в этот раз расстроил не дизайн, а призыв делать плохой дизайн.

Прочитал статью Лизы Шарлотты Рост «Альтернатива розовому и синему: цвета для кодирования полов». Статья не всеобъемлющая, но глубоко освещает тему. Тут приведено 33 цветовые пары из реальных статей — вполне наглядно.

Что не так

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

So what’s the problem with pink & blue? In our western culture, these colors come with the whole gender stereotype baggage. Pink means weak, shy girls who play with dolls and don’t deserve as much as boys. Blue stands for boys who need to be strong & rough. When we create a chart with pink & blue, we endorse gender stereotypes. Especially when we chart gender (pay) gaps, that’s often the opposite of what we want to achieve.

Сами по себе стереотипы ускоряют распознование образов, а значит делают коммуникацию эффективней. К выделению опасности красном претензий не встречал.

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

It’s not even necessary to explain the colors first.

Как можно такое писать в контексте визуализации данных?

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

Отдельно не понимаю, почему сила обязательно холодная, а слабость — тёплая.

Что так

1. Лиза пишет, что вредно менять стереотипные цвета местами — красить розовым мужчин и синим женщин:

I’m afraid that this is dangerous. Charts that flip the stereotypical colors can be hard to read: If readers see pink & blue in a chart about sexes, they won’t be very likely to consult the legend.

Не удивлюсь, если «Кварц» тестирует гипотезы. Тесты, конечно, не оправдываю дискомфорт читателей.

2. История выбора цветов в «Телеграфе» хороша тем, что показывает, как можно решать задачу. Кусочек:

The colors are inspired by the “Votes for Women” campaign in the UK as part of the initial suffrage movement in the early 20th century.

“When deciding which gender aligned with which color, it was more a case of trying to prioritize women in the order of genders. Against white, purple registers with far greater contrast and so should attract more attention when putting alongside the green, not by much but just enough to tip the scales. In a lot of the visualisations men largely outnumber women, so it was a fairly simple method of bringing them back into focus.” —Fraser Lyness

Что было бы полезно

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

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

3. Не использовал бы для одного из полов чёрно-белые оттенки. Они тоже приводят к визуальному неравенству. В зависимости от фона могут приводить к ситуации из 2-го пункта. Чёрный с чёрным же текстом превратит пол в базовый, а второй цветной пол будет уже чем-то отличаться.

Серый легко превращается в выключенный или в не наполненный данными на фоне цветного.

Мелочи важные при визуализации данных

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

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

Кирилл Беляев — Tue, 16 Oct 2018 23:19:16 +0300

Пока это самый большой мой разбор. Написать его получилось только по частям, публикуя в телеграм-канале. Соавтор пересланного решения — Роман Бунин, без которого я провозился бы раз в 5 дольше, и не факт, что нашёл бы все удачные ходы.

Предмет разбора

Меня привлекла работа Стива Левина для Аксионс об оцифровке профессий, изменении зарплат и числа рабочих мест в США:

Привлекла внешней простотой, аккуратностью и тем, что в ней легко копаться. Закопавшись, понял, что она иллюстрирует только заголовок «People in highly digitized jobs earn more...» (Люди с высоко оцифрованный работой зарабатывают больше). Это видно из положения оранжевого и фиолетового облаков стрелок. Мне связь зарплаты с оцифровки очевидна, поэтому полез разбираться, что в визуализации ещё интересного.

Визуализация построена на данных исследования Брукингского института. Вместе с отчётом институт опубликовал визуализации. Можно посмотреть на те же данные под другим углом. Тут акцент на степень оцифровки, но совсем не показаны зарплаты:

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

Устройство и ошибки

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

Сначала — каркас. Тут два измерения со степенными шкалами: икс — средняя годовая зарплата, и игрек — число рабочих мест. Каждая стрелка — профессия. Основание стрелки — зарплата и число мест в 2012-м, остриё — в 2016-м.

Толщина штриха (и размер острия) кодирует число рабочих мест в 2016-м. Число рабочих мест закодировано дважды — положением по игреку и толщиной штриха. Двойное кодирование — рабочее решение, но тут оно выглядит случайностью. Возможно, если толщина штриха будет меняться вслед за изменением числа рабочих месть, падение и рост будут нагляднее.

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

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

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

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

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

Описывая недочёты, я думал, что их исправление улучшит визуализацию. Так сделаны некоторые прошлые разборы. Умозрительно понимал, что исправления не изменит общую картину, поэтому переделал полностью.

Cвой подход

Вспомнил работу Нью-Йорк Таймс о профессиях и соотношении полов на рынке труда среднего класса США в 1980 и 2012. C визуализацией данных тоже помогает насмотрелось, мозг сам вспоминает похожие форматы и структуры данных.

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

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

Гипотеза 1.0. Показывать зарплаты графиком наклонов (slope chart) — так называют графики из примера выше. Разбить профессии на группы по одной оси, чтобы упорядочить кашу.

Гипотеза 2.0. Смотрю, какие ещё классифицированные графики работают с похожими «вводными» (блок «Input» справа). Показывать зарплаты горизонтальными гантелями (dumbbell plot).

Гантели не работают. По иксу — зарплата. Вершины гантели — зарплаты за 2002 и 2016 года. Но понять, где какой год не получится, потому что зарплата могла как расти, так падать:

А графики наклонов выглядят перспективно. Тут 2002 всегда слева. Сразу видно, что реальное падение зарплат только у двух профессий — в колонках с номерами 29 и 27:

Проработка

Пробуем для оцифровки градиент насыщенности, но с ним ничего не видно. Поэтому вернёмся к комплементарным цветам.

Оказалось, что в данных группы профессий заданы только цифрами (они и видны в колонках сверху). Нахожу соответствие на сайте Аксионс. Переворачиваем всё на 90°, чтобы нормально читать названия групп. Экспериментируем с цветом.

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

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

Логарифмическая шкала нагляднее показыват, что относительно самих себя зарплаты растут более-менее одинаково. Например, одним платят 1000 $, а другим — 5000 $. С инфляцией в США с 2002 по 2016 происходит вот что:

Чтобы труд не дешевел и не дорожал из-за инфляции, зарплаты должны меняться вслед за инфляцией. В 2002-м зарплат в 1000 должна превратиться в 1023,8 (1000×(100+2,38)/100), в 2003-м 1023,8 — в 1043. И так до 1366,4 $ в 2016-м. А зарплата в 5000 за это время превратится в 6832,1 $. В долях это одно и то же, а в долларах 366,4 $ против 1832,1 $.

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

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

Подробнее о шкалах читайте у Ромы.

Гипотеза 1.1.0. Агрегировать зарплаты по группам. Идея плохая — теряется куча данных и сглаживаются все аномалии:

Гипотеза 1.2.0. Показывать количество рабочих мест кругами на концах линий. Сначала смотрим на уровне групп. Картина непоказательная:

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

Гипотеза 1.2.2. Может, вместо кружков горизонтальные столбики?

В Табло так не получится. Откладываем идею, но смотрим, что вообще выходит из столбиков. Направление кажется перспективным.

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

Убираем цвет. Сортируем по количеству рабочих мест:

Теперь столбики сливаются в одну массу. Придумываем красить их попарно цветом, который соответствует среднему между оцифровкой 2002-го и 2016-го. Это нечестные данные, потому что в промежуточные года данные были другими. Такие средние в целом не корректно считать, их нет в природе. Но тут оно помогает показать пары. К тому же у нас и так столбики — агрегация до групп, что тоже не очень корректно. В целом столбики показывают как дела на макроуровне, поэтому оставляем. Добавляем точные значения и подкручиваем цвета:

Чистовая вёрстка

Объясняю как устроена строка на примере первой группы. Рисую переключатель сортировки и поиск, который на деле был бы выпадающим списком с фильтром по введённым буквам:

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

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

Снова разбираемся с данными. Оказалось, что неправильно посчитали разницу. А спустя 2-3 попытки понимаем, что показывать разницу в процентах — плохая идея. Проценты считаются от исходного значения. Было 1000 мест, стало — 1100, это +10%. Если было 1100, а стало — 1000, это −9,1%. Количество мест одинаковое, а процентное изменение разное. Сравнивать такое некорректно. Вместо процентов, берём разы. Исхожу из того, что интересуют профессии, в которых были значительные изменения, поэтому предлагаю показывать кружок, только если изменение больше, чем в 1,5 раза.

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

Рома выложил прототип в Табло. Помимо описанного, там есть разбивка по образованию:

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

Кирилл Беляев — Thu, 25 Jan 2018 11:37:37 +0300

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

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

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

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

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

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

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

Кирилл Беляев — Wed, 29 Nov 2017 23:54:36 +0300

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

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

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

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

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

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

Кирилл Беляев — Mon, 30 Oct 2017 10:05:53 +0300

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

Музей — классный, пример остальным этнографическим музеям. На 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 для остальных:

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

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

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

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

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

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

Кирилл Беляев — Fri, 15 Sep 2017 12:29:45 +0300

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кирилл Беляев — Wed, 14 Jun 2017 18:05:46 +0300

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

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

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

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

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

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

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

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

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

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

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

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

Разбор графиков с реальными объектами

Кирилл Беляев — Tue, 02 May 2017 09:39:49 +0300

В этот раз снова посмотрим на приём.

Работа Кевина Квили и Марго Сенгер-Кац для Нью-Йорк Таймс о пользе продуктов с точки зрения американцев и диетологов

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

Теперь, когда хлопья нас увлекли, интересно разобрать каркас — основу графика.
У него две оси:

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

Сырые данные в таблице пришли бы в трёх колонках: продукты, мнение всех, мнение диетологов. В строках 1-й колонки — продукт, во 2-й и 3-й — оценки. И глядя на эту таблицу не всегда приходит в голову, что один и тот же параметр — оценки — можно разместить на перпендикулярных осях. Кажется, что их нужно ставить столбиками рядом.

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

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

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

График соотношения массы мозга и тела, который переоформил Эдвард Тафти для своей книги «Beautiful Evidence»

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

Визуализация характеристик танков из игры «Ворлд оф тенкс», которую сделали в Лабораторнии данных

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

«Истории флагов» датского агентства «Фердио»

Приём с трудом подойдёт для сложных и плотных данных, из-за сложной формы объектов. Но если у объектов формы простых геометрических фигур, их можно собирать в графики достаточно плотно:

Диаграмма длиннейших рек и высочайших гор 1854 года

Тут автор идёт дальше и собирает из объектов столбчатые диаграммы, подчёркивая их природу:

Работа Тима Меко, Денисе Лу, Лазаро Гамио и Криса Алкантары для Вашингтон Пост о олимпийском инвентаре

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

Концентрирую: изображения реальных объектов делают визуализации увлекательнее и информативнее.

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

техника (размер, размер и форма видимых деталей),
деревья (высота, форма кроны, размер и форма листьев),
мебель (размер и форма),
смартфоны (размер, диагональ экрана),
здания (высота, форма, площадь фундамента, площадь остекления фасада)...

Следующий разбор — в мае, если успею.

P. S. Читайте Таню Бибикову о визуальных атомах: 1-я часть, 2-я и 3-я.

Разбор изохронов

Кирилл Беляев — Wed, 29 Mar 2017 08:32:15 +0300

В этот раз разберу нe отдельную работу, а прием.

Люди часто смотрят на географические карты и более-менее научились их считывать. Поэтому карты — понятный контекст для данных. Зритель мгновенно считывает, что карта — это карта, и переходит к изучению данных. Поэтому рассматривать карты так увлекательно.

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

Одно из применений хороплета — обозначить цветом время. Шаги получившейся шкалы называют изохронами. 1-м применением изохронов считают карту Френсиса Гальтона 1881 года:

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

Рик Ноак и Лазаро Гамио визуализировали развитость сети пассажирских железных дорог в Европе для Вашингтон Пост:

В этом примере минимумом выразительных средств (6 оттенков одного цвета на контурной карте), которые легко считать. Видно, что в западной Европе и Скандинавии сообщение лучше, чем на востоке. А в Прибалтике и на востоке бывшей Югославии ситуация особенно грустная.

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

Работа Бетси Мейсона для Нешинал Джиографик о плотности автодорог на Земле:

Тут много цветов:

отдельный бордовый цвет для зон с дорогами, между которыми по 1 км.
и градиент от оранжевого к синему для зон с 1-й дорогой на площадь от 0,01 до 4 816 087,1 км².

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

На карте хорошо видно, что высокая плотность дорог в Европе, Японии и на востоке США. На фоне базового бездорожья отчётливо выделяются города в Африке, Южной Америке, Австралии и Канаде. Интересно, что при сравнимом климате, в Скандинавии дорог намного больше, чем в России, Канаде и на Аляске.

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

Проект московской студии «Урбика» о пешей и автомобильной доступность в мегаполисах, названный в честь Гальтона:

Эта работа похожа на 1-й пример, но гораздо функциональнее благодаря интерактивности. Два оттенка голубого показывают, куда можно дойти за 10 и 20 минут из текущего положения. Ещё есть автомобильный режим, который, увы, не учитывает пробки.

Следующий разбор — в апреле.

Разбор визуализации о партиях, доминирующих в разных штатах

Кирилл Беляев — Tue, 07 Feb 2017 14:05:33 +0300

Сегодня разберу работу Ренди Йеипа, Стюарта Томпсона и Вилла Уэлша из Уолл Стрит Джорнал. Посмотрим, как менялось отношение жителей США к партиям с 1980 по 2012:

Визуализация состоит из 51 мини-графика, расположенные на регулярной сетке. Каждый график отражает ситуацию в одном штате. Вместе они образуют «регулярную» карту США. Авторы используют особенность данных — равномерную нарезку штатов. Из России или Европы такую карту сделать гораздо сложнее. Этот приём Дональд Норман назвал естественным соответствием. Он ускоряет поиск. Сначала считывается общая форма карты страны. А где какие штаты читатели Уолл Стрит Джорнала более-менее знают. Когда понятно, что перед глазами карта, интересующий штат легко найти в предсказуемом месте.

Реальная карта для сравнения. Смотрите, как «регулярная» карта помогает сохранить компактность, оставив Аляску и Гавайи на местах:

Посмотрим на сами графики. У них — одинаковые оси с одинаковыми шагами, что позволяет сравнивать штаты:

по иксу отложено время: один столбик — один год (всего — 9 лет),
по игреку — Индекс предпочтений избирателей.

Индекс считают немного замысловато. Берут данные последней пары президентских выборов. И сравнивают среднюю долю голосов за кандидата от той партии, которая набрала больше голосов в штате, и долю голосов той же партии для всей страны. Получаются значения от 0 до 20-30 с буквой D или R. Ноль говорит, что штат голосует, как страна в целом. А D+15, что доля голосов за Демократов на 15% больше, чем в среднем по стране.

У оси игрек нет шкалы, что затрудняет точное сравнение. Это приемлемо, когда задача — сравнить общие векторы. Положительные значения игрека (выше ноля) показывают доминирование Республиканцев, отрицательные — Демократов. Об этом говорят цвета традиционные для партий. Ниже в статье есть легенда, но интересующимся политикой цвета понятны и без неё:

Ещё заметил, что авторы используют не привычные мне сокращения названий штатов. Гугл и другие пишут аббревиатуры штатов по стандарту ИСО. Здесь же — Стайлбук Ассошиейтед Пресс. По-моему, такой формат понятнее 2-буквенного ИСО.

Теперь о визуальной части. Крупный заголовок и карта вместе выглядят эффектно — 1-е впечатление от статьи приятное:

Но можно лучше. Главная проблема — размытые границы. Не понял, почему авторы позиционируют графики не кратно пикселям. Но понял, что показывают высоту столбиков с точностью до 15 знаков после запятой. Высокая точность — обычно плюс, но тут она добавляет шума. К тому же, видя разницу в пол пикселя в высоте столбика, зритель не может узнать точные значения. Ещё мешает жирная линейка оси икс, которая закрывает низкие столбики и полностью скрывает нулевые значения. Если убрать линейку совсем, визуализация ничего не потеряет — ось сформируют основания столбиков.

Переделываю, округляя столбики до пикселей и уменьшая площадь белого. Умещаю почти полные названия. Легенду селю в Мэне. Добавляю максимальные значения игрека и точные значения при наведении на столбик:

Оригинал и моя версия одной картинкой в новом окне

Следующий разбор — в марте.

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

Кирилл Беляев — Mon, 09 Jan 2017 14:09:18 +0300

В Лаборатории данных мы визуализируем данные: работаем над проектами, создаём методологию, проводим курс. Для вдохновения изучаем чужие визуализации, а лучшие публикуем в рубрике #Δλlikes.

Раньше я плохо отличал стоящие работы от проходных. И пропускал изящные решения, потому что не знал, куда смотреть. За полтора года в лаборатории подучился видеть важное. В 2017-м буду разбирать примеры и рассказывать о их плюсах и минусах. Формат намечаю максимально свободный, развлекательный.

Сегодня — работа Ноя Вельтмана о росте и весе игроков НФЛ США:

Тут график с двумя осями:

по иксу — вес в фунтах (примерно от 73 до 154 кг),
по игреку — рост в футах и дюймах (примерно от 1,6 до 2 м).

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

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

Если взять крайние 1920-й и 2014-й, видно, что игроки в целом подросли и потяжелели. Видно, что распределение стало «размазанное» — стало больше игроков с разными параметрами. Ещё появились группы, скорее всего, это специализация (защита, нападение и пр.).

Но как это происходило по двум кадрам не видно. Анимация проявляет скорость изменений. С 1935 по 1945 — нет больших изменений, предположу, что мешала война. Группировка начинается около 75-го. А с 1990 начинается «размазывание».

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

Графическая составляющая у проекта слабая, поэтому переработал её на свой вкус. Убрал шумящую сетку, добавил информативность шкале времени.

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