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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А инфографика — готовые выводы. Оформленные и структурированные показатели и закономерности.

Из этого следует, что визуализация подходит «анализирующей» аудитории, а инфографика — любой (охват второй шире).

Метафора для закрепления: визуализация — топор, инфографика — дрова.

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

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

3. Визуализация данных и инфографика — это разные вещи. Слова говорят сами за себя, если задуматься. Инфографика — это информационная графика. Графикой иллюстрируют, оформляют и развлекают. «Информационная» тут характеристика, свойство. А визуализация — это отображение, представление чего-то. Это «что-то» — контекст, определяющий о чём речь. Получается, что тут главное — данные. Графика и данные — чувствуете разницу? :-)