Кейс создания фронтенда для аналитики на картах используя Kepler.gl и React

Для чего нужно система аналитики Data Science, зачем нужна графическая реализация на картах, какие проблемы решает такая аналитика, почему используются именно системы Kepler. gl и React для выполнения задач расскажет аналитик Кухни на районе – Николай Делицкий

Интро

В нашей компании стали часто возникали вопросы к аналитикам ответы на которые было бы удобно визуализировать на картах. И тут мы открыли kepler.gl – это open source проект позволяющий отображать огромные массивы данных на картах большим количеством способов — составлять тепловые карты, маршрутные карты, считать количественные метрики на площадь(при чем kepler умеет сам агрегировать данные до нужного размера зоны).

<p>Рис. Примеры различных визуализаций данных на kepler.gl</p>

Рис. Примеры различных визуализаций данных на kepler.gl

Kepler. gl можно использовать как отдельное веб-приложение (https://kepler. gl/demo/), где загружаешь файл и в панели инструментов настраиваешь как визуализировать данные, так и встраивать в свои внутренни айти продукты используя React и Redux. Сначала мы выгружали данные из базы и руками аналитики каждый раз настраивали отображение этих данных в веб-интерфейсе, но потом используя низкоуровневое API кеплера сделали свой дашборд, тем самым многие сотрудники компании смогли сами находить ответы на частые вопросы в реальном времени и разгрузить отдел аналитики.

Рис. Настройка отображения данных в веб интерфейсе kepler.gl
Рис. Настройка отображения данных в веб интерфейсе kepler.gl

От kepler. gl мы оставили только ту часть которая рисует на карте, весь остальной интерфейс был разработан под термины нашего бизнеса, где можно в пару кликов выбрать любую нашу метрику, наложить понятные фильтры(средний чек, время дня, тип блюд, время доставки и тд) и это может сделать неподготовленный человек в пару кликов.

Рис. Наш дашборд на базе kepler. В левом углу мы выбираем что отображать - метрику и фильтры, в правом - за какой период, также можно выбрать размер зоны и некоторые другие настройки.
Рис. Наш дашборд на базе kepler. В левом углу мы выбираем что отображать - метрику и фильтры, в правом - за какой период, также можно выбрать размер зоны и некоторые другие настройки.

В чем ценность разработки для бизнеса?

Дашборд позволяет практически в реальном времени отслеживать различные бизнес-метрики на маленьких хексоганальных областях размером от 100 до 1000м. Таким образом мы можем более точечно, вплоть до домов, контролировать и оптимизировать различные аспекты нашего сервиса.

Пример 1 - Ищем проблемные зоны опазданий заказов

Разберем применение карт на конкретных примерах. У каждой кухни есть своя небольшая зона доставки. Один из важных показателей хорошего сервиса – получение заказа в то время, которое мы показали клиенту в приложении, при чем неважно привезли заказ раньше или позже это одинаково плохо. Система планирования маршрута не всегда может правильно оценить время доставки и было бы интересно посмотреть в каких зонах наибольшие отклонения от плана доставки в ту или иную сторону. Выбираем метрику “время опозданий” и размер зоны 100м.

Рис. Две области с большим количеством опозданий на 2 марта
Рис. Две области с большим количеством опозданий на 2 марта
рис. 3 марта мы поставили новые кухни в областях с наибольшими опозданиями. Видим что опозданий практически не осталось.
рис. 3 марта мы поставили новые кухни в областях с наибольшими опозданиями. Видим что опозданий практически не осталось.

Пример 2 - Выбираем где строить новые кухни

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

Кейс создания фронтенда для аналитики на картах используя Kepler.gl и React

Пример 3 - Исследуем эффективность персонала кухонь

Посмотрим в какое время дня у нас больше всего расход на оплату труда на разных кухнях. Нормализуем зарплаты на количество заказов.

Кейс создания фронтенда для аналитики на картах используя Kepler.gl и React

Здесь мы видим что менее выгодно готовить заказы по вечерам и лишь в нескольких районах в утренние часы. Есть повод оптимизировать штатное расписание по вечерам.

Пример 4. Сложные сценарии в использовании карт

Можно выбирать не только фильтры и метрику но и как в экселе составлять сложные формулы из разных данных и метрик. Например считаем берем абсолютное время отклонения времени доставки от запланированного в заказах со средним чеком больше 500 и в утреннее время.

Рис 4 Так выглядит настройка сложных запросов
Рис 4 Так выглядит настройка сложных запросов

Как все устроено с технической точки зрения?

Используемые технологии: React, Kepler.gl, Effector, PostgresReact - самый популярный фронтенд фреймворк. (Можно откудато скопировать пару предложений про реакт)

Effector - набирающий в России популярность стейт менеджер. Примерно эквивалентен связке redux + reselect + rx/saga/thunk, при этом имеет ряд своих особенностей:

  • Позволяет писать логику и состояние более атомарно: вместо одного монолитного стора мотивирует разделять состояние до самых маленьких неделимых сторов, а где нужно обьединять эти сторы в нечто покрупнее.
  • Позволяет из коробки повторно использовать связку логики+состояние через фабрики
  • Великолепная поддержка SSR из коробки

Kepler.gl - библиотека для визуализации на картах. Позволяет отрисовать большие массивы данных на карте.

Каждый датасет можно представить отдельным слоем. У слоя можно выбрать отображение

11
Начать дискуссию