Мы бежали марафон

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



    При движении слайдера марафонцы перемещается по маршруту: на старте все бегут вместе, но со временем растягиваются вдоль трассы. Толпа состоит из «змеек», цвет которых обозначает пол и возраст бегунов. В голове и хвосте «удава» видны разноцветные точки — лидеры и отстающие. Когда финишируют победители, замыкающие спортсмены находятся на Садовом кольце, пробежав только треть пути. Обратите внимание на серые блоки слева и внизу — это высотный профиль трассы. Левая часть показывает подъёмы и спуски на пути от старта до Парка Горького, нижняя — оттуда до финиша. Суммарный подъём на трассе составил 230 м, что равно высоте главного здания МГУ вместе со шпилем. Непростое испытание для марафонцев!

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

    Для меня это был особенный проект. Всё лето я готовилась к Московскому марафону, а 15 сентября бежала в разноцветной толпе, отмечая про себя изменения погоды для нашей визуализации. Дизайнер лаборатории Серёжа Долинин svetosil специально приехал из Питера, чтобы пробежать 10-километровый забег-спутник, а потом поддерживал марафонцев в команде болельщиков.



    Работа над проектом заняла полтора месяца. Дизайн придумывали мы с Серёжей, а реализацией занимался Глеб Арестов arestov (надеюсь, он примет участие в обсуждении и ответит на технические вопросы). Результат далёк от идеала: мы не успели реализовать все задумки и исправить дизайнерские косяки, замеченные после запуска. Всё это в планах на следующий год.

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

    Лаборатория данных

    44,02

    Создаём интерактивные визуализации на D3.js

    Поделиться публикацией

    Похожие публикации

    Комментарии 34
      +4
      Таня, дизайнеры ведь любят внимание к мелочам. Так вот, если уж вы приводите слова Фидиппида в оригинале, то восклицательный знак здесь явно лишний — в Древней Греции времен Фидиппида его точно не знали. Это латинский символ и, насколько я знаю, гораздо более поздний. Извините. А так все здорово! :-)
        +1
        Спасибо за ценную деталь! Исправила :-)
          0
          на сохраненной картинке в посте только осталось :) если уж совсем придираться =)
            –1
            Пусть будет для истории!
              0
              Вместе с «близь». :-)
            +1
            Еще пара моментов. Знак рубля не видно, в Хроме и Опере, по крайней мере. Про высоты помимо сказанного я бы добавил, что все-таки единство условных обозначений это важный момент — если н.у.м., то везде должен быть н.у.м., а в легенде расшифровка. Не вполне понятно, чем объясняется выделение стадиона Лужники (на нем был финиш, наверно?).

            Вообще, мне понравилась визуализация в качестве демонстрации выразительных средств, но, правда, какую полезную информацию я могу узнать по рисунку змейки в момент времени t? Из-за большой растянутости пелотона (или как это называется у марафонцев?) и небольшого размера картинки я даже основную информацию о поло-возрастном распределении скорее угадываю. Может быть, хотя бы не стоило все это еще и к местности привязывать, а показать маршрут отдельно? Я думаю, у вас было большое желание сделать что-то интересное, но данных было маловато, поэтому получилась некоторая несоразмерность накопленных данных и выразительных средств. Про марафон мне бы например было интересно узнать о том, как меняется физическое и психическое состояние бегуна на протяжении дистанции по широкому спектру параметров (наверняка же их меряют). Или как бегун готовится к марафону и потом выходит из него. Ну то есть процесс. Тут вот как раз бегунок был бы кстати.

            Для недовольных отсутствием технической информации о лидирующей группе: сходите по ссылке, там есть табличка со всеми секундами.
          +4
          2074 бегуна,
          276 бегуний
          и ни одной бегонии!
            0
            276 бегоний бегунили бегунили, да и выбегунили…
            0
            Было бы здорово посмотреть на картину и 10 км забега.
            Мы как раз там, с моим начальником бежали :)
              0
              Хотели, но не успели, к сожалению :-(
              +2
              Не хватает заметных рисок по маршруту — лидера, замыкающего, медианного бегуна, точки не видно.

              Профиль трассы анализировать почти невозможно, он бы сработал, только если бы трасса была близка к прямой.
                +3
                > Суммарный подъём на трассе составил 230 м
                Правильно это называется общий/суммарный «набор высоты». И аналогично есть «сброс высоты».
                  0
                  Спасибо, учту!
                  +2
                  «А что, Динамо бежит? Все бегут!»

                  Очень сделано здорово. Всё больше хочется самому пробежать.
                    +1
                    Как раз за обедом смотрел ваше выступление с 404фест:)
                      0
                      Я и не знала, что его уже выложили :-)
                      +2
                      Хорошая и сложная работа, но это финальный результат, а интересно узнать про процесс создания. Написали бы где, как собирали и обрабатывали данные, какими инструментами пользовались, как пришли к такой форме визуализации. Показали бы эскизы и промежуточные этапы работы.
                        0
                        Спасибо, учту на будущее.
                          0
                          да, будем ждать, очень интересно!
                            +1
                            Почему лишь на будущее?
                            Описать процесс создания этой картинки ещё не поздно.
                          +1
                          Так держать!!! На следующий марафон планирую присоединиться! к забегу, не к визуализации… :)
                            +1
                            Есть несколько блоков, которые я не понял ни сразу, ни после пассматривания и попытки анализа:
                            — Лейка «Бегунов на 1 км» (Вообще не понял)
                            — Мужские и женские взрослые разряды: МС, КМС, МС, 2, КМС, 1, 1, 2, 3, 3 (Не вижу, к чему привязаны эти метки)
                            — Результаты победителей: I, II, III (Понял очень нескоро, ибо цифры привязаны больше к МС и КМС, чем к диаграме и, тем более, поясняющей надписи слева)

                            И еще по мелочи:
                            — Сортировка команд в фильтре по количеству участников не очень. Пытался найти команду победителей (МК Тарас), получилось только с третьего сканирования всего списка. Алфавитный порядок был бы удобнее.
                            — График высот весьма сложный, особенно учитывая разрыв посредине
                              0
                              Спасибо, всё по делу!

                              Лейка — это масштабная линейка для змея, переделаем её в ближайшее время. Разряды, как и победители, относятся к временной шкале финишей, наверное, стоит добавить выноску. График высот вызывает больше всего вопросов, обязательно подумаем, как его улучшить.

                              Насчёт алфавитного порядка не соглашусь, посмотреть на список «массовых» команд очень интересно. А сценарий поиска конкретной команды, наверное, имеет место, но актуален далеко не для всех.
                                0
                                Насчёт алфавитного порядка не соглашусь, посмотреть на список «массовых» команд очень интересно.

                                Тогда может быть имеет смысл прикрутить дропдаун с возможностью поиска типа Select2
                              +1
                              Посредственная инфографика же.
                              С первого взглядя как бы не очевидно, что «синие — мальчики, розовые — девочки». Сноска лишней бы не была.
                              Цена за участие. Это что за обозначение "..."? Вы хотите показать масштабы и результаты марафона, или сколько стоит в нем поучаствовать в разных странах? Не понял смысловой нагрузки блока.
                              «Старт 121 м. н. у.м. — Финиш 125 м над уровнем моря» (взято с сайта, на изображении почему-то 121 — 121) — вы хотя бы определитесь, как писать. А потом можете попробовать объяснить, что значат розовые и желтые гео-отметки.
                              Строка с заголовком в таблице на сайте тоже не нужна?
                                0
                                Таня, очень качественная визуализация и, безусловно, спасибо за одну из самых полезных колонок в «Советах».

                                Небольшой диссонанс вызывает блок бегунов, выстроенных по времени финиша.
                                На шкале одни значения, а во всплывающем блоке другие. (ссылка на Я.диск yadi.sk/d/lwRO9J2yBxecE, хабрасторадж лег, к сожалению)

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

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


                                Спасибо)
                                  0
                                  > Небольшой диссонанс вызывает блок бегунов, выстроенных по времени финиша.

                                  Согласна, подумаем над исправлением.
                                  +1
                                  На мой взгляд это все красиво, вызывает приятные эмоции. Но когда насладился дизайнерскими красивостями, становится понятно, что информации не получить. Если я смотрю такую страничку, я хочу видеть четкий маркер лидера и расстановку в лидирующей группе с отставаниями — это главная техническая информация любой гонки, а ее как бы нет. Например можно было убрать «интересные факты и взносы», оставив их только при начале просмотра и повесить туда список лидирующей группы. Ну и маркер лидера обязателен, то что там где-то мелькает один пиксель не добавляет наглядности.

                                  И еще один момент — высоты не читаемые. Стандартно их делают на временной линии, что является наиболее оптимальным для восприятия дистанции. Тут явно видна страсть дизайнеров менять то, что уже выверено и отлично работает для визуализации.
                                    +1
                                    Это как, интересно, высоты со временем связаны?
                                      0
                                      Можно провести шкалу дистанции, но если гнаться за красивостями и минимализмом, можно по времени лидера сделать. Любой вариант будет читабельнее текущего.
                                    0
                                    Профиль трассы по высоте гораздо нагляднее показывать как это сделано на GPS-треках (Первый попавшийся пример: www.gpsies.com/map.do?fileId=efrwvgaihhdlrmux). Ну и да, соглашусь с уже сказанным — было бы неплохо более заметно обозначить первого, среднего и последнего.

                                    А как вы положение бегунов на трассе отслеживали? Просто нашли среднюю скорость и всё?

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

                                    Жаль здоровье в этом году не позволило участвовать, надеюсь в следующий забег удастся найти силы.
                                      0
                                      Расскажите пожалуйста, как вы делали техническую часть? Например как слайдер так разносит данные по заданной линии. Ну и всё такое. Очень и очень интересно.
                                        0
                                        очень крутая схема
                                          0
                                          Про дизайнерский процесс и техническую часть напишу отдельный пост, нужно подготовиться :-)

                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                          Самое читаемое