Главная » Хабрахабр » Как создать карту московских парковок с помощью Kepler.gl

Как создать карту московских парковок с помощью Kepler.gl

Несколько месяцев назад вышла первая версия Kepler.gl — нового Open Source инструмента для визуализации и анализа больших наборов гео-данных.

В этой статье я предлагаю вам познакомится с основными возможностями приложения и создать с его помощью две картографические визуализации, которые позволят нам узнать несколько интересных фактов о платных парковках Москвы.

Но сперва несколько слов о том, кто и зачем создал Kepler.gl

Gl создавался командой Uber Engineering для аналитиков компании, которые хотели лучше понимать «как движется город», используя для этого огромное количество геоинформационных данных о дорожном движении, ежедневно собираемых тысячами «уберов» в различных городах по всему миру. Изначально Kepler.

Однако в мае этого года компания сообщила об открытом доступе к данному приложению и выложила весь исходный код Kepler.gl на GitHub

Основные возможности Kepler.gl

Независимо от выбранных инструментов анализа данных, применяемых картографических сервисов или фреймворков, а также библиотек для создания различных визуализаций, сам процесс работы над ними сводится к 4 основным этапам:

  • сбор информации
  • обработка данных
  • исследование и анализ подготовленных данных (для выявления зависимостей, поиска аномалий и т.д.)
  • создание визуализаций

Этапы создания визуализации
Рисунок 1. Базовые этапы создания визуализации

Kepler.gl частично автоматизирует и упрощает 3 из 4 перечесленных этапов, что заметно упрощает весь процесс анализа и визуализации больших наборов данных и помогает буквально за полчаса создать информативную, и что немаловажно, красочную интерактивную карту на основе собственных наборов гео-данных.

При этом, опыта программирования или дизайна абсолютно не требуется, ведь фильтрация и агрегация данных, выбор способа отображения данных в зависимости от различных параметров исследуемых объектов, наложение сведений из различных источников, переключение между 2D и 3D режимами и многое другое настраивается с помощью UI панели.

Как использовать Kepler.gl для анализа данных

Проще всего начать свое знакомство с Kepler.gl используя его онлайн-версию, доступную по адресу kepler.gl или, если вы не доверяете сторонних серверам, можно развернуть у себя локальную версию, следуя инструкциям на GitHub.

Этот набор содержит сведения о более чем 9 тысячах объектов, расположенных на уличной сети, включая сведения о стоимости и количестве парковочных мест. Здесь и далее я буду использовать данные о «Платных парковках Москвы», предоставляемые «Порталом открытых данных» правительства Москвы.

Загрузка данных Этап 1.

Сохранив данные в одном указанных форматов (в данном примере использую .csv) просто загружаем их в приложение. На сегодняшний день Kepler.gl поддерживает 3 формата исходных данных: geojson, json и csv. Кстати, здесь же, в диалоговом окне загрузки, для знакомства с приложением вы так же можете воспользоваться один из десятка предустановленных тестовых наборов данных.

Создатели Kepler.gl предлагают использовать Safari, если вам требуется загрузить файл большего объема. Примечание. Для Chrome максимальный размер загружаемого файла не должен превышать 250Mb. Ведь все манипуляции, связанные с агрегацией, фильтрацией и отображением данных происходят на клиенте. Однако, в любом случае нужно помнить, что производительность приложения зависит от устройства, на котором оно запущено.

Отображение данных на карте Этап 2.

Приложение поддерживает 9 типов слоев визуализации (layer of data visualization), отличающихся друг от друга набором настраиваемых параметров:

  • точечный слой (Point)
  • слой дуг (Arc)
  • слой линий (Line)
  • сетка (Grid)
  • гексагональная сетка (Hexbin)
  • слой полигоны (Poligon)
  • слой кластеров (Claster)
  • слой иконок (Icon)
  • тепловая карта (Heatmap)

При этом даже слои одинакового типа, отображающие один и тот же набор данных, могут разительно отличаться в зависимости от выбранной конфигурации.

Карты созданные в kepler.gl с помощью различных типов слоев
Рисунок 2.

Слои отрисовываются на карте в том же порядке, в каком они расположены в списке слоев на боковой панели. Kepler.gl не ограничивает число слоев, используемых при отображении исследуемого набора данных. Эту очередность легко изменить простым перетягиванием соответствующих слоев друг относительно друга на вкладке Layers.

Он является единым в рамках всей визуализации, что не дает возможности использовать различные типы смешивания для различных слоев. При использовании нескольких слоев стоит обратить внимание на параметр “Layer Blending”, отвечающий за то, как слои накладываются друг на друга.

В настоящее время доступны три значения этого параметра:

  • Normal
    В этом случае нижние слои никак не влияют на цвет точек(или иных элементов) верхних слоев.
  • Additive
    При этом типе наложения, значения цвета совпадающих элементов складываются. Он удобен для выявления областей высокой плотности, которые в данном случае будут более светлыми.
  • Subtractive
    В отличае от additive, не складывает, а вычитает значение цветов в пересекающихся областях. Удобен при использования не темной, а светлой карты.

Стоит отметить, что после загрузки файла, Kepler.gl попытается определить поля, содержащие геолокационную информацию и мгновенно отобразить их, автоматически создав слои соответствующих типов (обычно point или polygon). Таким образом, чтобы увидеть наши данные на карте, необходимо создать хотя бы один слой, использующий их.

Для этого сначала удалим созданные Kepler.gl слои полигонов, а затем добавим новый слой типа Point вручную. Однако, в нашем случае из-за различия в ожидаемом и используемом форматах данных, прийдется указывать источник координат самостоятельно. В качестве источника координат используем поля «Latitude_WGS84» и «Longitude_WGS84» вместо поля «Coordinates», автоматически выбранного приложением для рендеринга данных на карте.

Использование точечного слоя Kepler.gl для отображения парковок Москвы
Рисунок 3.

Единственное, что можно сказать, глядя на нее, что в центре парковок больше, чем на окраинах. В таком варианте карта еще не очень информативна.

А значит, пришло время воспользоваться и другими сведениями об изучаемых объектах для более детального анализа и поиска интересных фактов и/или закономерностей.

Модификация внешнего вида карты на основе сопутствующих данных об отображаемых объектах Этап 3.

В скаченном с Портала открытых данных наборе содержится достаточно много сведений о каждой из парковок, однако, наиболее интересными мне показались два параметра – стоимость часа парковки и число доступных мест.

Есть ли зависимость между размером парковки и ее удаленности от цента? Где в Москве самые дорогие парковки? Чтобы ответить на эти вопросы нам достаточно немного изменить настройки отображения ранее созданного точечного слоя и снова взглянуть на карту. На сколько сильно отличается стоимость часа парковки внутри и за пределами Садового кольца?

Для этого в выпадающем списке «Color based on» в качестве основы для выбора цвета укажем параметр «Price» исходного набора данных. Для начала изменим цвет точек в зависимости от стоимости часа парковки в этом месте.

Использование цвета для отображения сведений о стоимости часа парковки
Рисунок 4.

Например, что не весь центр одинаково дорог для автомобилистов, но на Тверской лучше быть пешеходом Уже на этом этапе можно сделать несколько интересных наблюдений.

Для этого в качестве базового параметра для определения радиуса точки (атрибут «Radius Based On» точечного слоя) будем использовать поле «CarCapacity». Теперь посмотрим на вместимость парковок. Диапазон радиуса установим равным от 0 до 30px.

Кастомизация размера точек в зависимости от числа парковочных мест Рисунок 5.

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

Агрегация данных с помощью Kepler.gl Этап 4.

Для ответа на него нам нужно воспользоваться одним из агрегирующих слоев. Использование точечного слоя для отображения каждой из более чем 9000 парковок уже позволило нам сделать несколько интересных наблюдений, однако полученная карта не дает нам возможности легко ответить на такие вопросы, как «Где больше всего парковочных мест на единицу площади?».

Gl поддерживает 4 типа таких слоев: сетка (Grid), гексагональная сетка (Hexbin), тепловая карта (Heatmap) и кластер (Cluster). На текущий момент, Kepler. Сетка и гексагональная сетка же позволяют проанализировать агрегированные значения по нескольким параметрам одновременно. Последние два типа (Cluster и Heatmap) удобны в случае, когда требуется агрегировать данные только по одному параметру.

Для ответа на поставленный ранее вопрос мы изменим тип ранее созданного нами точечного слоя на «сетку» (Grid), это позволит не только оценить общее количество парковочных мест на единицу площади, но и сохранить информацию о средней стоимости часа стоянки в этом месте.

Значение параметра Покрытие (Coverage) уменьшим с 1 до 0. Зададим размер сетки 1км2 (минимально доступный в Kepler.gl). 7 для того, чтобы между ячейками появилось небольшое пространство, улучшающее читаемость финальной карты.

Более подробно с атрибутами, поддерживаемыми каждым из них, вы можете познакомится в официальной документации Kepler.gl. Примечание. Список доступных для кастомизации параметров меняется в зависимости от выбранного типа слоя.

Однако теперь, кроме названия поля в используемом наборе данных, нам требуется еще указать каким образом Kepler.gl будет агрегировать эти сведения. Цвет каждой ячейки в новой визуализации как и раньше будет зависеть от стоимости часа парковки. В нашем случае «Price»– числовой тип(int) и приложение предлагает один из 5 вариантов: Методы агрегации зависят от типа выбранного поля.

  • наибольшее значение (minimum)
  • наименьшее значение (maximum)
  • сумма (sum)
  • среднее значение (average)
  • медиана (median)

Для этого перейдем в 3D-режим просмотра карты. Высота же каждого из столбцов сетки будет отражать общее число парковочных мест на данном участке. Затем на вкладке «Слои» боковой панели укажем «Enable height» для нашего агрегирующего слоя, а в качестве базового параметра выберем поле «CarCapacity».

Обобщенные сведения о стоимосте и вместительности парковок Рисунок 6.

Таким образом, потратив еще несколько минут на настройку агрегирующего слоя, мы можем с уверенностью утверждать, что внутри Садового кольца не только число парковок, но и фактическое количество парковочных мест значительно больше, чем за его пределами.

Заключение

Если вас заинтересовало это приложение, я рекомендую вам так же ознакомится с приведенными ниже статьями и туториалами, а также самостоятельно поэкспериментировать с фильтрацией данных, настройкой всплывающих подсказок и стилей карты и другими фичами этого приложения. В этой статье на конкретном примере была рассмотрена лишь часть возможностей Kepler.gl как современного инструмента для визуализации и базового анализа различных гео-данных.

А в следующей статье я расскажу вам о способах поделится созданными вами визуализациями и картами, а так же об использовании Kepler.gl как React компонента для вашего веб-приложения.

Полезные ссылки


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Сегодня MIPS стал Open Source, против RISC/V и ARM. Как Россия повлияла на стратегию американской процессорной компании

То, о чем говорили сторонники Open Source с 1980-х — свершилось! Сегодня архитектура процессоров MIPS стала Open Source. Учитывая, что такие компании как Broadcom, Cavium, китайский ICT и Ingenic платили MIPS за архитектурную лицензию (право сделать совместимую по системе команд ...

Вышла новая версия Unity 2018.3

Вышла новая версия Unity, которая уже доступна для пользователей. Unity 2018.3 содержит более 2000 новых функций, исправлений и улучшений, включая улучшенный воркфлоу префабов, Visual Effect Graph (Preview) и обновленную систему Terrain, которые дают разработчикам возможность повысить производительность и создавать многогранные ...