Project
MAP DATA VISUALISATION
Technology
React, NextJS, Typescript, Node, deck.gl, MapLibre
Topics
Data Visualization, Mapping, React
Uber Trip Visualization
I built a visualization of my Uber trip history as animated routes across Sheffield and Leeds.
The app downloads trip data from Uber and converts street addresses to coordinates using the Geoapify API. It generates driving routes between pickup and dropoff points and animates them with proper timing. Cyan trails trace each journey on a dark map, with stats showing total trips, distance traveled, money spent, and travel patterns.
I initially tried using QGIS but all the coordinates appeared in the ocean. Turns out mapping systems expect longitude/latitude order, not latitude/longitude. I switched to building it in code for better control over the visualization.
The data pipeline processes thousands of raw data points into smooth animations, with route algorithms creating realistic driving paths between locations.
Bike Rental Directory
I scraped bike rental data from across a city and built a searchable map-based directory.
Users filter listings by price, brand, transmission type (manual/automatic/electric), and reviews. Everything displays visually on a map, making it easy to compare locations and specs at a glance.
The hardest part was scraping multiple rental sites and organizing the data into a consistent format.
Geospatial Mapping Exploration
I explored geospatial mapping libraries for overlaying information on maps, including measuring distances, calculating areas, and plotting route waypoints. I integrated GeoJSON boundaries showing council and administrative zones, with interactive elements letting users explore different geographic data layers.Retry