Спрашивает Денис Хрипков:

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

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

Рекорды за другие даты можно показать при наведении на график.

Чтобы сравнение было ещё более многогранным, дополним картину погодой и рекордами в других городах. Здесь также уместно показать соотношение ясных/пасмурных дней и годовое количество осадков, чтобы дать общее представление о климате городов.

Живой прототип: https://weather-records.datalaboratory.ru/

Видно, что самое жаркое 13 апреля было в Нижнем Новгороде — +20°С, а самое холодное в Красноярске — -10°С. В Москве за рекордно жарким днём (+18°С) в 2008 году последовал рекордно холодный (-1°С) в 2009. Конечно, данные за сто лет более показательны, но и десятилетнего периода достаточно, чтобы проиллюстририровать подход.

Если у вас душа не лежит к интерактивным визуализациям, выпустите отрывной календарик с ежедневными рекордами :-)

Присылайте вопросы о визуализации данных на почту: data@datalaboratory.ru, ответы публикуются по понедельникам. При участии Сергея Долинина.

Спрашивает Николай Жарый:

В нынешнем интерфейсе мне не нравится, что можно настроить буквально всё. Как правило, такая свобода означает, что автор поленился продумать сценарии и переложил ответственность за дизайн на пользователя :-)

Я советую придумать несколько эффектных «картофильтров», из которых захочется выбирать и которыми захочется делиться. Например, минималистичный приятный глазу вариант с ярким треком по умолчанию:

Красивая рельефная карта со скромным треком — для пробежок по запоминающейся местности:

Чёрная карта со светящейся линией — для ночных покатушек и забегов:

На инстатреке полезно подписать место пробежки, её длину и продолжительность, закодировать темп цветом трека. Тут же покажем график пульса и линию набора высоты (включается-отключается при создании трека). Максимальная и минимальная скорость, максимальный пульс, самая высокая и низкая точки трассы подписаны прямо на карте:

Можно автоматически распознавать инстатреки с соревнований, оформлять их в фирменном стиле забега и добавлять информацию о времени победителя и занятом месте:

Настройку «всего» не обязательно убирать совсем, просто спрятать её поглубже — как это сделано в инстаграмме.

Присылайте вопросы о визуализации данных на почту: data@datalaboratory.ru, ответы публикуются по понедельникам. При участии Кирилла Беляева.

Спрашивает Антон Созоров:

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

Как измерить скорость прогресса? Кто-то тренируется часами, а кто-то регулярно, но по чуть-чуть. Кто-то решает билеты подряд, а кто-то отвечает на вопросы по темам или вразнобой. Для визуализации нам нужен элементарный кирпичик, единица информации, одинаковая для всех пользователей во всех ситуациях. В данном случае это попытка — ответ конкретным пользователем на конкретный вопрос в N-й раз и результат («правильно» или «ошибка»).

Для каждого вопроса вычислим процент ошибок в зависимости от номера попытки и покажем, как он меняется, на сетке сгруппированных по билетам вопросов:

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

Для каждого билета можно рассчитать среднее количество ошибок, приходящихся на человека в выбранную попытку. Если оно больше двух, билет считается не сданным («крестик» в правом нижнем углу), если меньше — сдан («галочка»).

Живой прототип: https://pdd.datalaboratory.ru/

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

Присылайте вопросы о визуализации данных на почту: data@datalaboratory.ru, ответы публикуются по понедельникам. При участии Сергея Долинина.

Спрашивает Кирилл Чокпаров:

Мне представляется, что главные характеристики танков — это мобильность, «атака» и «защита». Будет здорово сравнить их на одном графике. Мобильность в данном случае определяется скоростью. С атакой и защитой сложнее, здесь показателей сразу несколько: бронебойность и урон разными орудиями и снарядами, броня разных элементов танка.

Попробуем проявить эти характеристики на двумерном графике:

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

Крепость разных участков брони показана цветом — так сразу виден и уровень защиты танка в целом, и слабые места. На сайте такое представление тоже есть, но в отдельном отчёте «Зоны пробития». Кстати, красным цветом логичнее обозначать опасные, плохо защищённые участки, а зелёным — укреплённые и надёжные (у Кирилла наоборот).

Наводя на разные танки, увидим и сравним не попавшие на график параметры:

На такой визуализации видно, например, что советский Т-44 очень близок по параметрам к немецкой «Пантере»: чуть быстрее, слабее и меньше размером, зато лучше укреплён, особенно башня. Прошу прощения у знатоков военной техники и любителей игры World Of Tanks Blitz, если на визуализацию и в выводы закрались фактические ошибки.

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

Присылайте вопросы о визуализации данных на почту: tm@datalaboratory.ru, ответы публикуются по понедельникам. При участии Сергея Долинина.

Публикую своё решение дизайнерской практики онлайн-курса по визуализации данных.

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

Самый естественный способ отразить в визуализации структуру данных — собрать жилой комплекс из отдельных кирпичиков-квартир:

Здесь по горизонтали выстроились стояки однотипных квартир, а по вертикали меняются этажи. Чтобы использовать пространство экрана более рационально, поставим корпуса в два ряда, в соответствии с их реальным положением на местности.

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

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

Видим, что однушки и трёшки продаются лучше двушек, а ГП-4 опережает по продажам остальные корпуса. В ГП-1 пользуются популярностью угловые двушки с окнами во двор, а выходящие на дорогу, наоборот, продаются из рук вон плохо. В ГП-2 и ГП-3 с двушками тоже беда, целые стояки стоят нераспроданными. Зато трёшки в этих корпусах разлетаются как горячие пирожки.

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

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

А что же покупатели? Их не волнуют суммарные показатели по корпусам и типам квартир, они ищут свой идеальный вариант среди доступных. Но и им поможет наша универсальная сетка. Покажем цены доступных квартир с помощью цветового кодирования, а под стояками дополнительно подпишем стороны света, куда выходят окна квартир:

При наведении на ячейку покупатель видит детальную информацию о квартире:

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

Желаю удачи с технологической частью курса и вторым практическим заданием!

Присылайте вопросы о визуализации данных, организации времени, рабочем процессе, спорте и путешествиях на почту: mail@infotanka.ru. Ответы публикуются по понедельникам.