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