Rose debug info
---------------

Позднее Ctrl + ↑

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подписаться на блог…

Что почитать и посмотреть — 12

Более важные-интересные отмечены значком Highlight. [Видео] — видео.

Дизайн

Создание навигации в подуличных переходах Московского метро Highlight
Студия рассказывает как делала один из самых больших недавних проектов

Артемий Лебедев — магистр мата и отец 10 детей [Видео] Highlight
Лебедев у Дудя

Dive into the details of iOS 11: Is Apple still detail-oriented?
Чувак разбирает айОС 11 на предмет мелких нестыковок в интерфейсе

Whoever designed the Coke Christmas bottle deserves a pay rise [Видео]
Новогодняя бутылка Колы

In Search Of The Perfect Writing Font
Компания iA (автор редактора iA Writer) рассказывает о своем двуширинном шрифте

Занимательная метеорология
На Яндекс.Погоде появились погодные карты. Какая красота

80-Year-Old Wooden Escalators Repurposed as Interlooping Ceiling Sculptures
Арт-инсталляция из старых эскалаторов. Завораживающе, но должно быть страшновато стоять внизу

Instagram удалил китайскую рекламу кроссовок с «волосом» на экране
Отличная история про рекламу в интаграме и психологию людей

Пять сотен агитматериалов без армии дизайнеров за три недели
Евгений Решетнёв рассказывать про оптимизация в Индизайне

https://www.odetothings.com/shop/
Невероятно красивые предметы

Разбитые окна в интерфейсе
Сергей Соловьев из Контура делится наблюдением

Догадливый интерфейс бета
Антон Жиянов делится подборкой библиотек и сервисов

Перспективлялка
Сергей Николаев сделал инструмент для тестирования навигации

Nintendo Labo Official Site
Сумашедшие из Нинтендо делают картонные аксессуары к Нинтендо Свитчу

Поиск по вопросам этноэкспов Артемия Лебедева
Чувак разобрал все вопросы-ответы Лебедева, сделал сайт с поиском

Создание логотипа компании «Эксклюзивная логистика» Highlight
Один из лучших процессов логотипа

Julius Tarng — Facebook
Интервью с дизайнером из Фейсбука — загляните посмотрите на инструменты, но больше ничего особенного

Организация работы

Корпоративно-культурный тур (1/3)
Алексей Каптерев рассказывает про компании. Интересно про Амазон и Безоса

Корпоративно-культурный тур (2/3)
А здесь клево про Morning Star

Корпоративно-культурный тур (3/3)
В третьей части — Оракл

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

Разработка