Force Directed Graph of the London Tube Map – including CrossRail!

by @edent | # # # # | 4 comments | Read ~5,784 times.

Force Directed Graphs of the London Underground have been done many times before – but I think I’m the first person to add the new Elizabeth Line (CrossRail).

I’ve also created a JSON graph of all of London’s rail services – including DLR, Trams, C2C, ThamesLink etc.

Demo

Limitations

  • This is a quick weekend hack – don’t expect polished code or performance!
  • “Overlapping” lines don’t show. So where a route is served by multiple lines, you’ll only see one of them.
  • Zoom is a bit shonky.
  • Relies on an older version of D3 (V5).

Background

Drawing the Tube map as a graph is a popular pastime. See these prior arts:

I forked some code from Massimo Santini.

Chris Bell maintains an excellent CSV of all London stations and their connections

The official colours for each line can be found in TfL’s colour branding guide and in hex versions at Oliver O’Brien’s site.

What’s next

Possible ideas – feel free to contribute on GitLab.

  • Experiment with different layout algorithms.
  • Weight links according to speed, distance, business, or some other metric.
  • Better colour options for non-TfL lines.
  • More efficient code.

4 thoughts on “Force Directed Graph of the London Tube Map – including CrossRail!

  1. i have just spent 10 minutes yanking the central line around on my screen > shkspr.mobi/blog/2021/02/f…

Leave a Reply

Your email address will not be published. Required fields are marked *