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

    В продолжение марафонской истории я расскажу, как мы создавали визуализацию. Работа над проектом шла поэтапно: идея, дизайн, реализация и наполнение данными.

    Идея

    Идея показать результаты забега пришла ко мне после участия в «Весеннем громе». Скучные официальные таблицы никак не отражали настроение забега, при этом данные были в открытом доступе — сложные и интересные. Лаборатория только открылась, и в качестве тестового задания для вакансии дизайнера я выбрала задачу о визуализации результатов «Весеннего грома». Из десятка вариантов мне больше всего понравилась идея Сергея Долинина svetosil — показать распределение участников в момент первого финиша:



    Мы взяли за основую эту идею и оживили её временным слайдером. Визуализация марафона стала первым проектом Серёжи в лаборатории.

    Дизайн

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



    Высотный профиль показали, спроецировав его на поля слева и снизу, как на этой карте Германии, которую я давным-давно откопала на книжных развалах в Риме (сейчас она висит в Коворкафе):



    Получилось не слишком понятно, зато рельеф привязан к маршруту. Оставляем так:



    В конце концов слайдер и таблица переезжают под карту, а маршрут обрастает шутками и фактами. Ещё тут видны конкретные бегуны (к сожалению, реализовать эту функциональность мы так и не успели):



    Техническая реализация

    Тем временем, готовим технический каркас для «змея». Чип каждого спортсмена фиксировал время прохождения промежуточных рубежей (10, 21, 30, 35 км и финиш). Исходя из предположения, что между этими точками спортсмены двигались равномерно, мы получили распределение толпы на трассе.

    Реализацией занимался Глеб Арестов arestov. Он взял за основу d3-шный стримграф и научился строить его вдоль кривой. Вот что рассказывает Глеб:

    «Мы строили график по двум точкам:
    1) точка, удалённая на n метров от начала пути, заданного через географические координаты
    2) точка, находящаяся на отрезке перпендикулярном касательной к кривой в первой точке на необходимой высоте (высоте змея)

    Касательная в данном случае не вычисляется, а точка вычисляется через прямую (которая заменяет касательную), заданную двумя точками — серединами двух отрезков, одного отрезка от предыдущего соседа до текущей опорной точки и неё до следующего соседа (соседи — тоже опорные точки). Чтобы получить координаты ищется угол между осью Х и этой прямой (это угол потом будет использоваться ещё для построения кривых Безье).»

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

    Сначала налажали с геометрией:



    Исправились:



    Добавили деление на группы:



    Привязали высоты (здесь они сильно скачут из-за слишком большой детализации):



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

    Наполнение данными

    Мы тестировали змея на результатах питерских «Белых ночей», нам оставалось только подменить эти данные московскими.

    В последний момент перед стартом маршрут марафона изменился (Крымскую набережную не успели открыть после ремонта). Но нам было достаточно заменить старый кусок маршрута на новый — путь змея и высоты пересчитались автоматически.

    Договориться с организаторами о предоставлении данных в удобном виде не удалось. Поэтому мы просто брали итоговые протоколы с сайта, распознавали, правили вручную и складывали в отдельный файл. (А это проще сказать, чем сделать, в общей сложности на работу ушло 2-3 дня). Проще было распарсить сайт, скажете вы, но результаты там были опубликованы гораздо позже появления протоколов — мы попросту не дождались.

    Заключение

    Вот что получилось: moscowmarathon.datalaboratory.ru

    Работа над проектом заняла полтора месяца. За это время мы с Серёжей успели съездить в беговой лагерь в Хорватии, где вместе тренировались и работали. Обычно мы лишены такой возможности — я сижу в Москве, а Серёжа в Питере. На фото мы слева:



    Кстати, в лаборатории полнейший ремоут. Мы работаем удалённо с клиентами из Москвы, Питера, Минска, Тюмени, Сербии, Мельбурна. Об этом я расскажу подробнее в следующих заметках :-)

    UPD. По совету KoGor добавила детали в описание технической реализации.
    Лаборатория данных
    43,46
    Создаём интерактивные визуализации на D3.js
    Поделиться публикацией

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

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 18

      +1
      Раздел «Техническая реализация» у вас в статье, по сути, про тоже что и раздел «Дизайн». Хочется больше технических подробностей, по возможности, а именно: как реализовали streamgraph, использовали заранее отрисованный путь и getPointAtLength или что-то другое? Или это секрет? Да, и я правильно понимаю, что карта — это просто картинка, и о геокодировании речь не идёт?
        +1
        Чтобы все данные поместились на одной диаграмме пришлось попотеть.

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

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

          «Мы строили график по двум точкам:
          1) точка, удалённая на n метров от начала пути, заданного через географические координаты
          2) точка, находящаяся на отрезке перпендикулярном касательной к кривой в первой точке на необходимой высоте (высоте змея)

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

          Что бы получить координаты ищется угол между осью Х и этой прямой (это угол потом будет использоваться ещё для построения кривых Безье).»

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

              Вышло круто, да! Но целью поинтересоваться хочется :)
                +3
                Было же уже то-же самое и на дельные советы никак не отреагировали, одно дело, если бы переделали какие-то моменты, а так в чем смысл поста?

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

                  Все улучшения мы внесём в следующую версию, которую подготовим к марафону-2014. Бесконечно пилить первую итерацию нет ни смысла, ни возможности.
                  0
                  А из какого источника брали высотный профиль? Измерения GPS, модель высот SRTM, модель высот ASTER GDEM, что-то еще?
                    0
                      0
                      То есть измерения по GPS.
                      Не самый надежный источник, строго говоря, но это в данном случае лучше, чем глобальные модели высот, которые я перечислил в вопросе.

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

                    И совершенно не понял, что означают спарклайны в списке с фамилиями (картинка вторая сверху)?
                      0
                      Это изменение скорости спортсмена на разных участках. Решили, что они будут незначительные, и отказались от спарклайнов.

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

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