- PVSM.RU - https://www.pvsm.ru -
В продолжение марафонской истории [1] я расскажу, как мы создавали визуализацию. Работу над проектом можно условно разделить на 4 части: идея, дизайн, реализация и наполнение данными.
Идея показать результаты забега пришла ко мне после участия в «Весеннем громе» [2]. Скучные официальные таблицы никак не отражали настроение забега, при этом данные были в открытом доступе — сложные и интересные. Лаборатория только открылась, и в качестве тестового задания для первого дизайнера я выбрала задачу о визуализации результатов «Весеннего грома». Из десятка вариантов мне больше всего понравилась идея Сергея Долинина svetosil [3] — показать распределение участников в момент первого финиша:
Мы взяли за основую эту идею и оживили её временным слайдером. Визуализация марафона стала первым проектом Серёжи в лаборатории.
Итак, мы решили показать распределение бегунов по трассе в каждый момент времени, полово-возрастной состав участников и их распределение на финише, высотный профиль трассы, погоду, фотографии и интересные факты, а также полную таблицу результатов с фильтрами по возрастным группам, команду и городу. Чтобы все данные поместились на одной диаграмме пришлось попотеть. Довольно долго таблица располагалась справа от карты:
Высотный профиль показали, спроецировав его на поля слева и снизу, как на этой карте Германии, которую я давным-давно откопала на книжных развалах в Риме (сейчас она висит в Коворкафе):
Получилось не слишком понятно, зато рельеф привязан к маршруту. Оставляем так:
В конце концов слайдер и таблица переезжают под карту, а маршрут обрастает шутками и фактами. Тут видны конкретные бегуны, к сожалению, реализовать эт функциональность мы так и не успели:
Тем временем, готовится технический каркас для «змея». Мы рассчитывали загруженность трассы по данным о четырёх точках (10, 21, 30 км и финиш). Чип каждого спортсмена фиксировал время прохождения промежуточных рубежей, это позволило увеличить точность расчёта распределения.
Реализацией занимался Глеб Арестов arestov [4]. Он взял за основу d3-шный стримграф [5] и научился строить его вдоль кривой.
Сначала налажали с геометрией налажали:
Исправились:
Добавили деление на группы:
Привязали высоты (здесь они сильно скачут из-за слишком большой детализации):
После это натянули на каркас готовый дизайн, осталось оживить картину реальными данными.
Мы тестировали змея на результатах питерских «Белых ночей» [6], нам оставалось только подменить эти данные московскими.
Договориться с организаторами о предоставлении данных в удобном виде не удалось. Поэтому мы просто брали итоговые протоколы с сайта, распознавали, правили вручную и складывали в отдельный файл. (А это проще сказать, чем сделать, в общей сложности на работу ушло 2-3 дня). Проще было распарсить сайт, скажете вы, но результаты там были опубликованы гораздо позже появления протоколов — мы попросту недождались.
Работа над проектом заняла полтора месяца. За это время мы с Серёжей успели съездить в беговой лагерь [7] в Хорватии, где вместе тренировались и работали. Обычно мы лишены такой возможности — я сижу в Москве, а Серёжа в Питере. На фото мы слева:
Кстати, у нас в лаборатории полнейший ремоут [8]. Мы работаем удалённо с клиентами из Москвы, Питера, Минска, Тюмени, Сербии, Мельбурна. Об этом я расскажу подробнее в следующих заметках :-)
Автор: infotanka
Источник [9]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/news/50870
Ссылки в тексте:
[1] марафонской истории: http://habrahabr.ru/company/datalaboratory/blog/200158/
[2] в «Весеннем громе»: http://3sport.org/page/res-21-vg-2013
[3] svetosil: http://habrahabr.ru/users/svetosil/
[4] arestov: http://habrahabr.ru/users/arestov/
[5] d3-шный стримграф: http://bl.ocks.org/mbostock/4060954
[6] «Белых ночей»: http://www.wnmarathon.ru/
[7] в беговой лагерь: http://unitycamp.com/
[8] ремоут: http://37signals.com/remote/
[9] Источник: http://habrahabr.ru/post/201882/
Нажмите здесь для печати.