4 заметки с тегом

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

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

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

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

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

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

После окончания 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   дизайн   представление информации
Подписаться на блог…