Denver Urban Pulse
BI-дашборд — аналитика города в реальном времени
Интерактивный аналитический дашборд с ежедневным обновлением данных из 4 публичных API. Трёхуровневый пайплайн данных (raw → staging → marts), хороплет-карта, тепловые карты, KPI-карточки со спарклайнами и глобальная фильтрация.
Next.js TypeScript PostgreSQL Python Leaflet Recharts Railway Vercel
Обзор
Denver Urban Pulse — публичный BI-дашборд на основе открытых данных Денвера, обновляемых ежедневно. Отслеживает оперативный пульс города по четырём направлениям: преступность, ДТП, обращения в службу 311 и качество воздуха — с разбивкой по районам. Цель: дать жителям, журналистам и городским службам наглядную картину происходящего без необходимости разбираться в сырых данных.
Архитектура
┌─────────────────────────────────────────────────────┐
│ Источники данных │
│ ArcGIS (Crime, Crashes, 311) · AirNow API (AQI) │
└──────────────────────┬──────────────────────────────┘
│ daily cron (06:00 UTC)
▼
┌─────────────────────────────────────────────────────┐
│ Python-пайплайн (Railway) │
│ Migrations → Ingestion → Staging → Marts │
└──────────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ PostgreSQL (Railway) │
│ raw (5 таблиц) → staging (5) → marts (9) │
└──────────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ Next.js API Routes (Vercel) │
│ /city-pulse/kpis · /categories · /heatmap │
│ /category-trends · /neighborhoods │
│ /environment/aqi · /environment/comparison │
└──────────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ React-дашборд (Vercel) │
│ KPI · Карта · Графики · Heatmap · Рейтинг · Фильтры │
└─────────────────────────────────────────────────────┘
Ключевые возможности
- KPI-карточки со спарклайнами, дельтами и отметкой свежести данных по каждому домену
- Интерактивная хороплет-карта — клик по району фильтрует весь дашборд
- Разбивка по категориям — типы инцидентов, сгруппированные по доменам, с трендовыми спарклайнами
- Heatmap по дням и часам — матрица плотности инцидентов (день недели × час)
- График AQI — мультилинейный чарт по загрязнителям (Ozone, PM2.5, PM10)
- Рейтинг районов — композитный балл с переключением по доменам
- Лидеры изменений — топ-5 улучшившихся / ухудшившихся районов за период
- Глобальные фильтры — временное окно (7д / 30д / 90д) и выбор района
- Адаптивная вёрстка — мобильные устройства, планшеты и десктоп
Источники данных
| Источник | Провайдер | Обновление |
|---|
| Криминальные инциденты | Denver Open Data (ArcGIS) | Ежедневно, последние 90 дней |
| ДТП | Denver Open Data (ArcGIS) | Ежедневно, последние 90 дней |
| Обращения 311 | Denver Open Data (ArcGIS) | Ежедневно, последние 90 дней |
| Качество воздуха (AQI) | AirNow API | Ежедневно, последние 90 дней |
| Границы районов | Denver Open Data (GeoJSON) | По мере изменений |
Технологический стек
| Слой | Технология |
|---|
| Фронтенд | Next.js 16 (App Router), React 19, TypeScript 5.9 |
| Стилизация | Tailwind CSS 4, shadcn/ui, IBM Plex Sans |
| Графики | Recharts 3 |
| Карта | Leaflet + React Leaflet |
| База данных | PostgreSQL (Railway) |
| API | Next.js Route Handlers (7 эндпоинтов) |
| Пайплайн данных | Python 3.12, ежедневный cron (Railway) |
| Деплой | Vercel (фронтенд), Railway (БД + пайплайн) |
| Тестирование | Jest 30, React Testing Library |