Investigations

London Underground Journey Planner

HTML October 2024

An interactive London Underground journey planner using Breadth-First Search with a D3.js force-directed graph visualization.

Graph algorithms are one of those things that feel abstract until you apply them to something tangible. The London Underground map is essentially a graph — stations are nodes, lines are edges — so it's a natural fit for BFS shortest-path routing.

The entire application lives in a single HTML file. I embedded the full Tube network data directly in the page — every station, every connection, every line. D3.js renders it as an interactive force-directed graph that you can zoom, pan, and click through. Select your start and destination stations, and BFS finds the shortest route, highlighting it on the map.

There's a toggle for the force-directed layout, which is fun to watch as the stations settle into position based on their connections rather than geography. The journey info panel shows the computed route with interchange details.

Zero build tooling, zero npm packages, just a single HTML file that opens in any browser. Sometimes constraints breed clarity.

What this project demonstrates

Breadth-First Search shortest-path algorithm implementation
Interactive D3.js force-directed graph of the Tube network
Full London Underground station and connection data
Zoom, pan, and click navigation
Force-directed layout toggle
Single self-contained HTML file — zero dependencies

Technologies

AlgorithmsBFSD3.jsVisualizationGraph Theory

© 2026 Jonathan Leahy · v0.8.1-31-g196fa14