Urban research / comparative city analysis and spatial data exploration
Multi-City Urban Data WebGIS & Geospatial Explorer
Overview
This project involved the development of a broader multi-page urban data platform for exploring and communicating spatial information across New York, London, Paris, Tokyo, Hong Kong, Shanghai, Singapore, and Seoul. A central component was a custom WebGIS Explorer that brought heterogeneous urban datasets into one interactive environment, combining map-based exploration, filtering, spatial analysis, data export, and presentation tools.
Challenge
The main challenge was creating a consistent analytical system from datasets with different schemas, formats, classifications, spatial representations, and update cycles. Fourteen core urban categories, plus airports, cycling networks, and green coverage, required repeated cleaning, normalization, classification, geographic correction, and conversion. The platform also had to remain adaptable as datasets, interface requirements, languages, and analytical functions evolved through multiple project phases.
Solution
The Explorer lets users select a city, combine urban-data categories, and refine them through dedicated subcategories such as building periods, hotel ratings, restaurant classifications, shopping types, station types, and venue-size ranges. Spatial extents of 5 km, 10 km, and 50 km support comparative exploration, while dedicated layers add airports, cycling infrastructure, and GeoTIFF-based green coverage. The map supports 2D and 2.5D views, interactive popups, dark and light map styles, English and Japanese interfaces, polygon-based selection and counting, line measurement, screenshot capture, and CSV export of selected locations.
Design & Data Visualization
The interface uses progressive filtering rather than exposing every dataset simultaneously: users move from city selection to categories, subcategories, and spatial tools. Category-specific colors, 2D points, 2.5D extrusions, raster overlays, and contextual popups create different visual layers without separating the data into multiple applications. The bilingual interface changes controls, city names, category labels, and popup fields.
Technical Approach
Mapbox GL JS provides the mapping environment, with Turf.js handling radius generation, point-in-polygon tests, geometry operations, and distance calculations. D3.js supports data loading, transformation, and classification, while Mapbox Draw provides polygon and line drawing tools. Custom application logic synchronizes city, category, subcategory, radius, and layer state and rebuilds runtime layers after basemap changes while preserving the active view.
Technologies
- Mapbox GL JS
- JavaScript
- D3.js
- Turf.js
- Mapbox Draw
- GeoJSON
- GeoTIFF
- GeoTIFF.js
- Python
- CSV
- Google Sheets
- HTML/CSS
Data Workflow
A substantial part of the work focused on spatial data preparation. CSV and spreadsheet sources were cleaned, renamed, filtered, normalized, and converted into common GeoJSON-compatible structures, with custom JavaScript logic standardizing category-specific fields at runtime. Custom Python scripts supported preprocessing and repeated data transformations outside the browser. GeoTIFF workflows were developed for green-coverage rasters, including reading raster metadata and values, handling orientation and transparency, and positioning the resulting imagery correctly inside the WebGIS. Data could be loaded from local files or published Google Sheets sources.
Outcome
The finished platform consolidated a fragmented collection of urban spreadsheets, vector data, raster datasets, and category-specific maps into one reusable WebGIS environment. Users can compare cities, combine and filter datasets, inspect individual locations, analyze user-defined areas, measure distances, export selected records, and produce map views for presentations. The data-processing structure also provides a repeatable foundation for future dataset updates and platform extensions.