Кейс создания фронтенда для аналитики на картах используя Kepler.gl и React
Для чего нужно система аналитики Data Science, зачем нужна графическая реализация на картах, какие проблемы решает такая аналитика, почему используются именно системы Kepler. gl и React для выполнения задач расскажет аналитик Кухни на районе – Николай Делицкий
Интро
В нашей компании стали часто возникали вопросы к аналитикам ответы на которые было бы удобно визуализировать на картах. И тут мы открыли kepler.gl – это open source проект позволяющий отображать огромные массивы данных на картах большим количеством способов — составлять тепловые карты, маршрутные карты, считать количественные метрики на площадь(при чем kepler умеет сам агрегировать данные до нужного размера зоны).
Рис. Примеры различных визуализаций данных на kepler.gl
Kepler. gl можно использовать как отдельное веб-приложение (https://kepler. gl/demo/), где загружаешь файл и в панели инструментов настраиваешь как визуализировать данные, так и встраивать в свои внутренни айти продукты используя React и Redux. Сначала мы выгружали данные из базы и руками аналитики каждый раз настраивали отображение этих данных в веб-интерфейсе, но потом используя низкоуровневое API кеплера сделали свой дашборд, тем самым многие сотрудники компании смогли сами находить ответы на частые вопросы в реальном времени и разгрузить отдел аналитики.
От kepler. gl мы оставили только ту часть которая рисует на карте, весь остальной интерфейс был разработан под термины нашего бизнеса, где можно в пару кликов выбрать любую нашу метрику, наложить понятные фильтры(средний чек, время дня, тип блюд, время доставки и тд) и это может сделать неподготовленный человек в пару кликов.
В чем ценность разработки для бизнеса?
Дашборд позволяет практически в реальном времени отслеживать различные бизнес-метрики на маленьких хексоганальных областях размером от 100 до 1000м. Таким образом мы можем более точечно, вплоть до домов, контролировать и оптимизировать различные аспекты нашего сервиса.
Пример 1 - Ищем проблемные зоны опазданий заказов
Разберем применение карт на конкретных примерах. У каждой кухни есть своя небольшая зона доставки. Один из важных показателей хорошего сервиса – получение заказа в то время, которое мы показали клиенту в приложении, при чем неважно привезли заказ раньше или позже это одинаково плохо. Система планирования маршрута не всегда может правильно оценить время доставки и было бы интересно посмотреть в каких зонах наибольшие отклонения от плана доставки в ту или иную сторону. Выбираем метрику “время опозданий” и размер зоны 100м.
Пример 2 - Выбираем где строить новые кухни
Часто возникает вопрос а в каких районах в первую очередь стоит открывать кухни? На наших картах можно выбрать дополнительный слой который указывает на наибольший интерес к открытию кухонь в разных районах города. Показано синим цветов. Когда человек скачивает наше приложение и в его районе еще нет кухни, мы об этом узнаем и цвет на карте становится более синим в его районе.
Пример 3 - Исследуем эффективность персонала кухонь
Посмотрим в какое время дня у нас больше всего расход на оплату труда на разных кухнях. Нормализуем зарплаты на количество заказов.
Здесь мы видим что менее выгодно готовить заказы по вечерам и лишь в нескольких районах в утренние часы. Есть повод оптимизировать штатное расписание по вечерам.
Пример 4. Сложные сценарии в использовании карт
Можно выбирать не только фильтры и метрику но и как в экселе составлять сложные формулы из разных данных и метрик. Например считаем берем абсолютное время отклонения времени доставки от запланированного в заказах со средним чеком больше 500 и в утреннее время.
Как все устроено с технической точки зрения?
Используемые технологии: React, Kepler.gl, Effector, PostgresReact - самый популярный фронтенд фреймворк. (Можно откудато скопировать пару предложений про реакт)
Effector - набирающий в России популярность стейт менеджер. Примерно эквивалентен связке redux + reselect + rx/saga/thunk, при этом имеет ряд своих особенностей:
- Позволяет писать логику и состояние более атомарно: вместо одного монолитного стора мотивирует разделять состояние до самых маленьких неделимых сторов, а где нужно обьединять эти сторы в нечто покрупнее.
- Позволяет из коробки повторно использовать связку логики+состояние через фабрики
- Великолепная поддержка SSR из коробки
Kepler.gl - библиотека для визуализации на картах. Позволяет отрисовать большие массивы данных на карте.
Каждый датасет можно представить отдельным слоем. У слоя можно выбрать отображение