В продолжение марафонской истории я расскажу, как мы создавали визуализацию. Работа над проектом шла поэтапно: идея, дизайн, реализация и наполнение данными.
Идея показать результаты забега пришла ко мне после участия в «Весеннем громе». Скучные официальные таблицы никак не отражали настроение забега, при этом данные были в открытом доступе — сложные и интересные. Лаборатория только открылась, и в качестве тестового задания для вакансии дизайнера я выбрала задачу о визуализации результатов «Весеннего грома». Из десятка вариантов мне больше всего понравилась идея Сергея Долинина svetosil — показать распределение участников в момент первого финиша:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/ddf/e8f/03c/ddfe8f03c199b34f712bcf881f373166.png)
Мы взяли за основую эту идею и оживили её временным слайдером. Визуализация марафона стала первым проектом Серёжи в лаборатории.
Итак, мы решили показать распределение бегунов по трассе в каждый момент времени, полово-возрастной состав участников и их распределение на финише, высотный профиль трассы, погоду, фотографии и интересные факты, а также полную таблицу результатов с фильтрами по возрастным группам, команде и городу. Чтобы все данные поместились на одной диаграмме пришлось попотеть. Довольно долго таблица располагалась справа от карты:
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/09a/eec/728/09aeec7280530dc49d5d82e9e448f364.jpg)
Высотный профиль показали, спроецировав его на поля слева и снизу, как на этой карте Германии, которую я давным-давно откопала на книжных развалах в Риме (сейчас она висит в Коворкафе):
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/ab2/1ef/740/ab21ef7402e79000976ec3f0ef22536c.jpg)
Получилось не слишком понятно, зато рельеф привязан к маршруту. Оставляем так:
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/cf3/063/9fa/cf30639fabb8be2b5de0a58ce9288204.jpg)
В конце концов слайдер и таблица переезжают под карту, а маршрут обрастает шутками и фактами. Ещё тут видны конкретные бегуны (к сожалению, реализовать эту функциональность мы так и не успели):
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/054/8e2/41e/0548e241e535f44a5e8aafd342ea9e4f.jpg)
Тем временем, готовим технический каркас для «змея». Чип каждого спортсмена фиксировал время прохождения промежуточных рубежей (10, 21, 30, 35 км и финиш). Исходя из предположения, что между этими точками спортсмены двигались равномерно, мы получили распределение толпы на трассе.
Реализацией занимался Глеб Арестов arestov. Он взял за основу d3-шный стримграф и научился строить его вдоль кривой. Вот что рассказывает Глеб:
«Мы строили график по двум точкам:
1) точка, удалённая на n метров от начала пути, заданного через географические координаты
2) точка, находящаяся на отрезке перпендикулярном касательной к кривой в первой точке на необходимой высоте (высоте змея)
Касательная в данном случае не вычисляется, а точка вычисляется через прямую (которая заменяет касательную), заданную двумя точками — серединами двух отрезков, одного отрезка от предыдущего соседа до текущей опорной точки и неё до следующего соседа (соседи — тоже опорные точки). Чтобы получить координаты ищется угол между осью Х и этой прямой (это угол потом будет использоваться ещё для построения кривых Безье).»
От себя добавлю, что змей строится по географическим координатам, но на фон пришлось подложить карту-картинку, потому что настоящие карты не получилось смасштабировать нужным образом.
Сначала налажали с геометрией:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/1bb/eb9/f50/1bbeb9f5061c31535977b9b66ff55c4f.png)
Исправились:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/66b/32a/685/66b32a68570bcfc019708a05aed5f674.png)
Добавили деление на группы:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/7fe/392/f9a/7fe392f9a5270b2e2df668b6383b035b.png)
Привязали высоты (здесь они сильно скачут из-за слишком большой детализации):
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/f67/8dd/41e/f678dd41e617de08f0cf2836d00436ed.png)
После это натянули на каркас готовый дизайн, осталось оживить картину реальными данными.
Мы тестировали змея на результатах питерских «Белых ночей», нам оставалось только подменить эти данные московскими.
В последний момент перед стартом маршрут марафона изменился (Крымскую набережную не успели открыть после ремонта). Но нам было достаточно заменить старый кусок маршрута на новый — путь змея и высоты пересчитались автоматически.
Договориться с организаторами о предоставлении данных в удобном виде не удалось. Поэтому мы просто брали итоговые протоколы с сайта, распознавали, правили вручную и складывали в отдельный файл. (А это проще сказать, чем сделать, в общей сложности на работу ушло 2-3 дня). Проще было распарсить сайт, скажете вы, но результаты там были опубликованы гораздо позже появления протоколов — мы попросту не дождались.
Вот что получилось: moscowmarathon2017.datalaboratory.ru
Работа над проектом заняла полтора месяца. За это время мы с Серёжей успели съездить в беговой лагерь в Хорватии, где вместе тренировались и работали. Обычно мы лишены такой возможности — я сижу в Москве, а Серёжа в Питере. На фото мы слева:
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/2b6/ed2/ec1/2b6ed2ec11e9906409f156ec292082f3.jpg)
Кстати, в лаборатории полнейший ремоут. Мы работаем удалённо с клиентами из Москвы, Питера, Минска, Тюмени, Сербии, Мельбурна. Об этом я расскажу подробнее в следующих заметках :-)
UPD. По совету KoGor добавила детали в описание технической реализации.
Идея
Идея показать результаты забега пришла ко мне после участия в «Весеннем громе». Скучные официальные таблицы никак не отражали настроение забега, при этом данные были в открытом доступе — сложные и интересные. Лаборатория только открылась, и в качестве тестового задания для вакансии дизайнера я выбрала задачу о визуализации результатов «Весеннего грома». Из десятка вариантов мне больше всего понравилась идея Сергея Долинина svetosil — показать распределение участников в момент первого финиша:
![](https://habrastorage.org/getpro/habr/post_images/ddf/e8f/03c/ddfe8f03c199b34f712bcf881f373166.png)
Мы взяли за основую эту идею и оживили её временным слайдером. Визуализация марафона стала первым проектом Серёжи в лаборатории.
Дизайн
Итак, мы решили показать распределение бегунов по трассе в каждый момент времени, полово-возрастной состав участников и их распределение на финише, высотный профиль трассы, погоду, фотографии и интересные факты, а также полную таблицу результатов с фильтрами по возрастным группам, команде и городу. Чтобы все данные поместились на одной диаграмме пришлось попотеть. Довольно долго таблица располагалась справа от карты:
![](https://habrastorage.org/getpro/habr/post_images/09a/eec/728/09aeec7280530dc49d5d82e9e448f364.jpg)
Высотный профиль показали, спроецировав его на поля слева и снизу, как на этой карте Германии, которую я давным-давно откопала на книжных развалах в Риме (сейчас она висит в Коворкафе):
![](https://habrastorage.org/getpro/habr/post_images/ab2/1ef/740/ab21ef7402e79000976ec3f0ef22536c.jpg)
Получилось не слишком понятно, зато рельеф привязан к маршруту. Оставляем так:
![](https://habrastorage.org/getpro/habr/post_images/cf3/063/9fa/cf30639fabb8be2b5de0a58ce9288204.jpg)
В конце концов слайдер и таблица переезжают под карту, а маршрут обрастает шутками и фактами. Ещё тут видны конкретные бегуны (к сожалению, реализовать эту функциональность мы так и не успели):
![](https://habrastorage.org/getpro/habr/post_images/054/8e2/41e/0548e241e535f44a5e8aafd342ea9e4f.jpg)
Техническая реализация
Тем временем, готовим технический каркас для «змея». Чип каждого спортсмена фиксировал время прохождения промежуточных рубежей (10, 21, 30, 35 км и финиш). Исходя из предположения, что между этими точками спортсмены двигались равномерно, мы получили распределение толпы на трассе.
Реализацией занимался Глеб Арестов arestov. Он взял за основу d3-шный стримграф и научился строить его вдоль кривой. Вот что рассказывает Глеб:
«Мы строили график по двум точкам:
1) точка, удалённая на n метров от начала пути, заданного через географические координаты
2) точка, находящаяся на отрезке перпендикулярном касательной к кривой в первой точке на необходимой высоте (высоте змея)
Касательная в данном случае не вычисляется, а точка вычисляется через прямую (которая заменяет касательную), заданную двумя точками — серединами двух отрезков, одного отрезка от предыдущего соседа до текущей опорной точки и неё до следующего соседа (соседи — тоже опорные точки). Чтобы получить координаты ищется угол между осью Х и этой прямой (это угол потом будет использоваться ещё для построения кривых Безье).»
От себя добавлю, что змей строится по географическим координатам, но на фон пришлось подложить карту-картинку, потому что настоящие карты не получилось смасштабировать нужным образом.
Сначала налажали с геометрией:
![](https://habrastorage.org/getpro/habr/post_images/1bb/eb9/f50/1bbeb9f5061c31535977b9b66ff55c4f.png)
Исправились:
![](https://habrastorage.org/getpro/habr/post_images/66b/32a/685/66b32a68570bcfc019708a05aed5f674.png)
Добавили деление на группы:
![](https://habrastorage.org/getpro/habr/post_images/7fe/392/f9a/7fe392f9a5270b2e2df668b6383b035b.png)
Привязали высоты (здесь они сильно скачут из-за слишком большой детализации):
![](https://habrastorage.org/getpro/habr/post_images/f67/8dd/41e/f678dd41e617de08f0cf2836d00436ed.png)
После это натянули на каркас готовый дизайн, осталось оживить картину реальными данными.
Наполнение данными
Мы тестировали змея на результатах питерских «Белых ночей», нам оставалось только подменить эти данные московскими.
В последний момент перед стартом маршрут марафона изменился (Крымскую набережную не успели открыть после ремонта). Но нам было достаточно заменить старый кусок маршрута на новый — путь змея и высоты пересчитались автоматически.
Договориться с организаторами о предоставлении данных в удобном виде не удалось. Поэтому мы просто брали итоговые протоколы с сайта, распознавали, правили вручную и складывали в отдельный файл. (А это проще сказать, чем сделать, в общей сложности на работу ушло 2-3 дня). Проще было распарсить сайт, скажете вы, но результаты там были опубликованы гораздо позже появления протоколов — мы попросту не дождались.
Заключение
Вот что получилось: moscowmarathon2017.datalaboratory.ru
Работа над проектом заняла полтора месяца. За это время мы с Серёжей успели съездить в беговой лагерь в Хорватии, где вместе тренировались и работали. Обычно мы лишены такой возможности — я сижу в Москве, а Серёжа в Питере. На фото мы слева:
![](https://habrastorage.org/getpro/habr/post_images/2b6/ed2/ec1/2b6ed2ec11e9906409f156ec292082f3.jpg)
Кстати, в лаборатории полнейший ремоут. Мы работаем удалённо с клиентами из Москвы, Питера, Минска, Тюмени, Сербии, Мельбурна. Об этом я расскажу подробнее в следующих заметках :-)
UPD. По совету KoGor добавила детали в описание технической реализации.