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

в 16:47, , рубрики: Без рубрики

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

Идея

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

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

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

Дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

Автор: infotanka

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js