Блог Михаила Озорнина: заметки с тегом инфодизайн

Улучшение визуализации про выборы

Михаил Озорнин — Tue, 07 Jul 2020 02:56:56 +0300

Переделываю график по голосованию

Максим Кац выложил выложил вчера сводный график по голосованиям:
twitter.com/max_katz/status/1280143683434811395
У меня сразу сработала профдеформация и желание его переделать.

Теория

Есть такой тип визуализации «Регулярные карты», они сохраняют узнаваемость карты и дают при этом возможность визуализировать данные в удобном формате.

Примеры:

Иммиграция в США, pmcruz.com/dendrochronology/, фантастически красивая, посмотрите

Наступление весны в США, washingtonpost.com/graphics/2018/national/early-spring/

Ожирение в разных штатах, flowingdata.com/2016/09/26/the-spread-of-obesity

Доминирующие партии в разных штатах, graphics.wsj.com/elections/2016/field-guide-red-blue-america/

Районы Лондона, informationisbeautifulawards.com/showcase/842-london-squared-map-making-the-city-easier-to-read, оригинальная ссылка сломалась, держите эту

Результаты выборов в США, нашел у Кирилла Беляева

Картинку Максима Каца нужно переделать в карту, так станет понятно, где больше фальсификаций, а где меньше, да и просто будет проще найти свой регион.

Редизайн

Самый сложный момент — составить узнаваемую регулярную карту, для США такого полно, для России я не встречал. Оказалось уже были попытки сделать, я воспользовался готовой картой Ивана Дианова (medium.com/kompany/the-step-by-step-story-of-making-a-tile-grid-map-of-russia-92190d14e41e)

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

Upd. Женя Софронов принес ссылку на конкурс регулярных карт для России, на котором как раз победила карта Ивана Дианова. Посмотрите, там много интересного: telegra.ph/Uchastniki-i-ih-raboty-12-03.

Итог:

Собрал в фигме, чтобы вы могли себе скопировать: figma.com/file/eflJ42NaaPY8kcyc7ZetKJ/russia-regular-vote-map

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

Не скрывать, а показать сразу

Михаил Озорнин — Fri, 01 Mar 2019 08:00:28 +0300

Расскажу об одном простом принципе в информационном дизайне и дизайне вообще

ТАСС сделало интерактивный рассказ про дирижабль «Италия»:

Не собираясь оценивать их рассказ, я расскажу об одном моменте рассказа.

На странице есть схема устройства дирижабля:

Все детали скрыты за красными точечками, нужно навести мышку, чтобы узнать что это за деталь. Чтобы посетители справились, пришлось даже сделать мини-онбординг (↑ справка). Я бы предположил, что он не очень помогает.

Но даже те, кто по каким-то причинам знают, что делать, будут мучиться: навел — прочитал — навел — забыл, что только что было — навел — прочитал. Это неудобно, желание изучать схему почти сразу пропадает.

Лучше сразу всё подписать:

Особенно глупо точки смотрятся на этой фотографии:

Чтобы не заставлять читателя страдать, есть простое правило:

Если можно не прятать, лучше не прятать.

Когда будете подписывать схемы и скриншоты почитайте на что обращать внимание: Как подписывать скриншоты

Как делать подписи для таймсерий

Михаил Озорнин — Mon, 04 Jun 2018 02:21:35 +0300

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

В чем проблема

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

Библиотека отрисовки почему-то решила не подписывать даты и подписала только время. На самом деле пеньки 3:00 21 мая, 15:00 23 мая, 3:00 26 мая, 15:00 28 мая, 3:00 31 мая, 15:00 2 июня. Понять это из подписей почти невозможно.

Я перерисую скриншот, чтобы можно было менять и иллюстрировать:

Первое, что нужно сделать — всегда писать даты:

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

Пурпурные линии — границы дней

В посте я расскажу что с этим всем делать.

Общие правила

Подписи отметок соотносятся с масштабом. При показе данных за год показывать время с точностью до минут не имеет смысла.
Всегда выбирается максимально детальный разумный масштаб. Если без проблем указывается с точностью до дней, то не надо укрупнять отметки до 5-дневных просто так.
Отметки должны быть регулярны. Разный шаг не позволит удобно прикинуть промежуточное значение. Если регулярные метки не получаются, то основную часть отметок лучше сделать регулярными, а нерегулярные остатки сложить к одному из концов интервала.
Смысловые отметки лучше несмысловых. Отметка 22:12 — странно, 22:30 — норм. Вряд ли имеет смысл использовать что-то, не попадающее в этот список:
1, 5, 10, 15, 30 секунд,
1, 5, 10, 15, 30 минут,
1, 2, 4, 6, 12, 24 часов,
1, 2, 5, 10, 15 дней,
1, 2 недели (если нужны именно календарные недели),
1, 2, 3, 6 месяцев,
1, 2 года, 5, 10 лет.
Дробными числами, не подходящими под указанные выше, допустимо подписывать только начало и конец.

Информативность

Дублировать одно и то же — плохо. Не надо писать у отметок так: 01.01.2015, 01.02.2015, 01.03.2015, 01.05.2015. Но и 01.01, 01.02, 01.03, 01.05 тоже плохо (см. следующий пункт). Кстати, кто-нибудь заметил, что я пропустил апрель?
Для дат лучше всего использовать формат 1 мая, 2 июня, 13 ноя. Месяцы сокращаются до трех букв без точки (кроме мая, июня и июля), ведущий ноль у числа не пишется.

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

Секунды у времени не пишутся, если не сказано обратного — 22:12. Любое время, кроме полуночи лучше писать без ведущих нулей: 6:25, 9:13, 12:56, но 00:00. Для секунд, там где они нужны, допускается писать только секунды: 10:55, :56, :57, :58, :59, 11:00, :01, :02.

Оформление

Если отметок много и они переносятся в две строки, лучше снизить число отметок, а не переносить.

Текст подписи выравнивает по центру, сама подпись — по пеньку.
Между отметками должен быть минимальный отступ в 16 пк, если отступ будет меньше, то отметки слипнутся.

Края интервала

Когда левая и правая границы важны, нужно подписать эти отметки явно. Скорей всего для этого придется убрать подписи у ближайших отметок: отметки 6:00 (между 3:52 и 8:00) и 2:00 (между 00:00 и 3:12) как бы должны быть, но не влезли:

Если явно задана только левая, а правая — сейчас, то правую можно не подписывать:

Если края не принципиальны, то можно не подписывать оба конца:

Примеры

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

Если применить все рекомендации к примеру из начала поста, то получится как-то так:

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

От таблицы к визуализации

Михаил Озорнин — Fri, 02 Feb 2018 12:53:57 +0300

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

На самом деле таблица достаточно удачный формат:

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

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

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

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

Расскраска по процентилям: 0,95 · 0,9 · 0,75 · 0,4 · 0,1

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

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

Такой способ часто называется скользящим окном:

Получилась такая таблица:

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

Аркадий отлично сдал вступительное, оно дало ему большой запаc. Я понемногу обгонял Андрея и Аркадия в тестах, но слил накопленное в курсовой. Леонид начал не с самых сильных позиций, но методичная работа подняла его в рейтинге. Евгений шел неравномерно: некоторые тесты лучше всех, а некоторые ощутимо хуже соседей.

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

Вот несколько примеров:

Даже график ниже — тоже таблица, хотя и не очень похоже, просто ячеек очень много и они очень мелкие:

Не стесняйтесь таблиц, это нормальный формат. Вот два совета бюро как сделать таблицы лучше:

Посмотрите ещё визуализацию прогресса студентов у Михаила Капанаги: http://burostat.ru

Что делать с масштабом временных рядов

Михаил Озорнин — Wed, 24 Jan 2018 11:18:34 +0300

Хочу рассказать про один способ отображения временных рядов (time series — графиков, где ось абсцисс — время).

Например, есть такой график:

Представим, что нам нужно отслеживать состояние какой-то сложной системы со многими параметрами: загрузкой ЦПУ, сетью, трафиком и чем-то ещё. В этом случае графики должны помогать нам:

замечать выбросы, отличающиеся от нормального поведения системы: какая-то аномальная загрузка ЦП в датацентре Амстердама, большой исходящий трафик в Сингапуре;
отмечать какие-то паттерны: в датацентрах какая-то периодическая дисковая активность в середине дня;
видеть при этом каждый из параметров: здесь наблюдается плавный рост, а потом резкое падение — сработало масштабирование нагрузки, а во втором случае рост был быстрый, системы масштабирования не успели отреагировать;
сравнивать параметры между собой: серверы в Сингапуре почти всегда загружены, а в Европе простаивают, не дотягивают и трети сингапурских;

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

Если графиков будет много, то получится нечитаемая каша:

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

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

Исходный график:

Сначала поделим наш график по оси ординат на несколько групп:

Потом раскрасим их по возрастанию значения:

И сложим их одну на другую:

Весь процесс (гифка):

И как раз такие графики можно снова сложить стопкой:

Такой график отлично показывает наличие пиков и нулей: пики — яркие, нули — пустоты. Кроме этого он не портит вертикальный масштаб: не сжимает его и не растягивает.
Оптимальный вертикальный масштаб графика, Илья Бирман

И с нашими ожиданиями от графика стало все лучше, вот с этими:

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

Ещё раз было-стало:

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

http://square.github.io/cubism/

Ссылки по теме:

Time on the Horizon, Stephen Few и Perceptual Edge, PDF Оригинальная статья, по которой я писал пост
Мы решили объединить эти значения в один график Совет бюро, в котором рассказывается почему не надо накладывать графики друг на друга
Color Brewer Специальный инструмент для составления цветовых шкал
Оптимальный вертикальный масштаб графика, Илья Бирман

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

Михаил Озорнин — Thu, 26 Nov 2015 03:00:02 +0300

Оригинал в ЖЖ: http://withoutbrains.livejournal.com/91246.html

Я и визуализация Лаборатории данных

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

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

Иллюстрации (они же слайды): https://yadi.sk/d/nxuEjqSCkhxRk

Оглавление видео
Сам рассказ до 1:28:00

05:09 визуальные манипуляции

13:30 информативность

14:30 визуальный мусор

20:30 случайные искажения

28:05 неудачные примеры

36:20 как надо делать графики: оси, масштаб, цвета

45:20 информационные слои

51:45 микро- и макро-

56:25 рассказываю про форматы

  56:32 текст
  57:15 таблица
  1:01:50 пирожковые диаграммы
  1:03:40 искрографики
  1:06:03 фоновые диаграммы
  1:08:26 карты
  1:13:40 уклонограммы
  1:15:20 удавы
  1:20:50 графические расписания
  1:24:30 quality control chart

1:26:20 что ещё почитать

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

С 1:31:00 ответы на вопросы.

Пишите, если что-то неясно.

Напишите на почту mike.ozornin@gmail.com, если хотите позвать меня с рассказом себе в компанию.

Статистика по задачам

Михаил Озорнин — Tue, 28 May 2013 01:26:00 +0300

Оригинал в ЖЖ: http://withoutbrains.livejournal.com/78773.html

Некоторое время назад я нарисовал на работе картинку по числу создаваемых в трекере задач (и багов, но и не только). Попытался подчеркнуть некоторые факты и тенденции.

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