Я люблю байки. Я люблю кататься на них. И я люблю ездить на велосипеде. Но ездить на велосипеде в городе всегда опасно, даже в Швейцарии. В течение некоторого времени у меня была идея визуализировать все велосипедные аварии в городе, в котором я живу и работаю: Базеле.
В Швейцарии Управление дорожного движения (ASTRA) предоставляет интерактивную карту, на которой визуализируются все дорожно-транспортные происшествия. Также для Базеля. На мой взгляд, эта карта не обеспечивает очень доступный способ погрузиться в данные и не дает достойного обзора различных дорожно-транспортных происшествий с велосипедами. Так что мне не доставляло удовольствия знать, на что мне действительно нужно обратить внимание при езде на полной скорости.
Вот почему я решил создать новую версию, в которой пользователь мог бы фильтровать происшествие по типу, времени и серьезности, чтобы получить больше информации. И даже выделить горячие точки.
Окончательный результат этой работы уже опубликован. Это дает (мое скромное мнение) достойный обзор велосипедных аварий за последние семь лет. Но что ж, смотрите сами:
В этом посте я объясню, как мы извлекали данные, анализировали аварии и, наконец, создавали визуализацию.
Часть 1: Получение данных
Получить данные оказалось сложнее, чем я предполагал. ASTRA предоставляет сервис веб-карт, но через этот источник я мог получить только изображение. После обращения в ASTRA мне присылают ссылку на API. Это уже было полезно, но ответ на запрос API ограничен 50 функциями. Из других статистических данных о несчастных случаях я знал, что каждый год происходит примерно 150 несчастных случаев с участием велосипеда. Итак, мне пришлось придумать другой способ.
Мой подход заключался в разделении Базеля на маленькие и удобоваримые части. Я создал гексагональную карту Базеля в QGIS.
Чтобы получить все данные, я написал функцию Python, которая запрашивает все аварии для каждого шестиугольника. Через несколько минут я попал в аварию на моей машине. Я убрал велосипедные аварии, разделил данные о времени и днях, чтобы подготовить данные для фильтров на интерактивной карте.
Часть 2: Анализ данных
Одна большая часть проекта заключалась в поиске горячих точек. Я действительно хотел знать, где мне нужно остерегаться по дороге на работу. Поэтому я провел небольшое исследование того, как официально рассчитываются очаги аварий, а также поговорил с местными экспертами по безопасности. Это был отличный разговор, и позже мы хорошо поговорили о моем анализе и их оценке.
Специалисты используют периметр в 50 метров для определения очага аварии. Так что если в пределах этого периметра произойдет несколько аварий, возможно, возникнет проблемная ситуация. Кроме того, они различают несчастные случаи с легкими и тяжелыми травмами. ДТП с тяжелораненым засчитывается дважды.
Для анализа я использовал QGIS. Я создал буферы 50 метров и выбрал перекрывающиеся. После этого я более внимательно посмотрел на уличную ситуацию, чтобы избежать ситуаций, когда аварии были просто случайными.
В итоге я смог определить 11 горячих точек. Я поговорил с местным экспертом о горячей точке, и он смог подтвердить 4. Остальные 7 мест не были настоящими горячими точками в этом определении, но он согласился, что эти места опасны для байкеров.
Часть 3: Визуализация данных
После поиска и анализа происшествий мы со Стефаном Кемпфом смогли наконец приступить к самому интересному: сделать данные красивыми. Стефан создал потрясающую базовую карту с помощью Mapbox Studio. Затем мы создали наложение темного фильтра с помощью CSS Grid.
Часть фильтрации с использованием Mapbox GL была немного сложной. Чтобы сохранить все фильтры, мы создали объект фильтра, а затем обновили этот фильтр при каждом вводе пользователя. Конечным результатом стало хорошо реагирующее приложение.
Часть 4: рассказывание историй
Карта прекрасна, и она станет еще лучше, если вы можете щелкнуть мышью и отфильтровать карту до чертиков. Но не все хотят щелкать мышкой и исследовать материал самостоятельно.
Используя замечательную библиотеку enter-view.js, я мог легко создать опыт прокрутки, используя метод flyTo в Mapbox.
Скроллинг выделил различные горячие точки и объяснил читателю причины и перспективы конкретной горячей точки.
Спасибо, что прочитали мой пост о создании сайта. Вы можете найти код для анализа здесь и код для визуализации здесь. И готовый продукт вы можете найти здесь:
