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

представление информации

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

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

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

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

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

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

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

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

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

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

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

  1. Подписи отметок соотносятся с масштабом. При показе данных за год показывать время с точностью до минут не имеет смысла.
  2. Всегда выбирается максимально детальный разумный масштаб. Если без проблем указывается с точностью до дней, то не надо укрупнять отметки до 5-дневных просто так.
  3. Отметки должны быть регулярны. Разный шаг не позволит удобно прикинуть промежуточное значение. Если регулярные метки не получаются, то основную часть отметок лучше сделать регулярными, а нерегулярные остатки сложить к одному из концов интервала.
  4. Смысловые отметки лучше несмысловых. Отметка 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 лет.
    Дробными числами, не подходящими под указанные выше, допустимо подписывать только начало и конец.

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

  1. Дублировать одно и то же — плохо. Не надо писать у отметок так: 01.01.2015, 01.02.2015, 01.03.2015, 01.05.2015. Но и 01.01, 01.02, 01.03, 01.05 тоже плохо (см. следующий пункт). Кстати, кто-нибудь заметил, что я пропустил апрель?
  2. Для дат лучше всего использовать формат 1 мая, 2 июня, 13 ноя. Месяцы сокращаются до трех букв без точки (кроме мая, июня и июля), ведущий ноль у числа не пишется.
  1. Если год на отметках повторяется, то лучше подписать его у первой отметки этого года, а у следующих не подписывать. Год стоит продублировать у крайних отметок, чтобы было проще понять, какая это дата.
  1. Секунды у времени не пишутся, если не сказано обратного — 22:12. Любое время, кроме полуночи лучше писать без ведущих нулей: 6:25, 9:13, 12:56, но 00:00. Для секунд, там где они нужны, допускается писать только секунды: 10:55, :56, :57, :58, :59, 11:00, :01, :02.

Оформление

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

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

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

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

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

Примеры

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

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

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

2018   гайдлайны   представление информации   таймсерии
Подписаться на блог…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2018   визуализация данных   представление информации   таблица
Подписаться на блог…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2018   cubism.js   представление информации   таймсерии
Подписаться на блог…

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

Оригинал в ЖЖ: 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, если хотите позвать меня с рассказом себе в компанию.

2015   представление информации   рассказываю
Подписаться на блог…

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

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

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

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

2013   дизайн   представление информации
Подписаться на блог…