Heatmap visualisering i React

Urban Intelligence: Frontend & Heatmaps

Grunden i projektet är en interaktiv webbapplikation byggd i React. För att visualisera densiteten av tjänster i en stad implementerade jag Leaflet.heat. Utmaningen här låg i att skapa en dynamisk heatmap där "intensiteten" (max-värdet) automatiskt anpassas baserat på mängden data som returneras, vilket säkerställer att kartan förblir läsbar oavsett om man söker i en småstad eller i New York.

Python Flask Backend kod

Python Backend & Overpass API

Backenden drivs av Flask och agerar brygga mellan användaren och OpenStreetMaps Overpass API. Jag utvecklade en motor som bygger dynamiska queries för att hämta spatial data (noder och vägar) baserat på Area ID och specifika taggar. För att optimera prestandan hanteras koordinattransformationer och datatvätt direkt på servern innan resultatet skickas till klienten.

DBSCAN klustring av koordinater

Mönsterigenkänning med DBSCAN

För att gå bortom enkel visualisering integrerade jag maskininlärning i form av DBSCAN-algoritmen (via Scikit-learn). Genom att analysera GPS-koordinater i radianer kan systemet identifiera kluster med godtyckliga former – perfekt för att upptäcka linjära mönster som "bargator". Detta tillåter appen att automatiskt skilja på brus (enstaka ställen) och faktiska koncentrerade intresseområden.

Sökresultat med gatunamn

Reverse Geocoding & Interaktivitet

För att göra datan begriplig för användaren implementerades en modul för Reverse Geocoding med Nominatim. Varje matematiskt kluster översätts till ett faktiskt gatunamn eller stadsdel. Slutresultatet är en klickbar lista där användaren kan "flyga" (map.flyTo) till de hetaste områdena, vilket skapar en sömlös koppling mellan rådata, algoritm och användargränssnitt.

Säg hej!