Mind The Gap


After I finished my previous experiment with the Web Audio API I was looking for something else to do with sound. I had this idea of using London Underground’s data and playing a note every time a train left a station. I could assign a different note for each line and the live feed would create random music all day long. So I started checking TfL Developers’ Area and it didn’t take long to realize that my idea wouldn’t be possible. The data does show predicted arrival times for each station, but these are rounded to 30 seconds. If the experiment were to use the data literally, it would stay silent for 30s, then play a bunch of notes at the same time, then go back to silence for another 30s. A friend even suggested randomizing some values in between those 30s, but that wouldn’t be any different from just listening to some random notes chosen by the computer, without any connection to the tube.

OK, that idea was gone, but the data was quite interesting. With the rounded times I could tween the position of the trains between stations. It would be cool to see the trains moving in ‘almost’ real time on the screen, wouldn’t it? Oh wait, someone did it already: Live map of London Underground, by Matthew Somerville. And it is nice, but not really what I had in mind. I wanted more of a cool visualization based on the tube data, rather than an informative/useful map. How could I do something new with this data? Add a third dimension maybe? Three.js was on my list of things to experiment with for a long time and this seemed like the right opportunity. Oh wait, has someone done it already? The only thing I could find was this and it is definitely not what I had in mind. So yeah, green light!


To do a 3D map of the tube I would need x,y,z values. It is amazing what we can find on the internet, it’s all there. Depth of tube lines and London Underground Station Locations.

I had everything I needed: train times, latitude, longitude and depth of the stations. Those were coming from many different files, so I stretched my regex skills and created a simple tool with Adobe AIR to parse everything and output a consolidated .json for me. With that I could finally plot some points in space using the Mercator projection. The next step was to create tubes connecting these points and again I was really lucky to find exactly what I needed online. Three.js is an amazing library not only because of what it does, but also because of how it is made. Together with the classes I needed (TubeGeometry and SplineCurve3), I also found the conversation between the authors while they were developing these classes.

One of the biggest challenges was to make the trains follow the spline and sometimes change splines depending on the train’s destination. I feel that my algorithm could be more solid here, but it is working well. The last touches were to add the labels for each station and add some ambient sound recorded at the tube.

That’s it. I hope people find it interesting and play with it.

Launch the experiment.

16 Comments / Add your own comment below

  1. This is really interesting! Thank you – I spent rather a long time staring at it, listening to the audio.

  2. Pingback: All Aboard | CreativeJS

  3. Pingback: 3D Map Visualizes The London Underground - PSFK

  4. Pingback: goCart e.V. - connecting cartography | Mind The Gap

  5. Pingback: Mind The Gap | Broadsheet.ie

  6. Pingback: Mind the Gap! Beautiful interactive 3D visualization of London’s underground | Karnes Dyno Rev

  7. Pingback: All Aboard | The Creative Web Project

  8. Excellent use of WebGL. Very much enjoyed interacting with the model and it’s elegant simplicity in displaying data.

  9. Someone must be wrong, hampstead is actually the deepest station but this isn’t represented on your map correctly

  10. È uno strazio!

  11. Hi/
    I am writing this on behalf of my six year old son (nearly seven)who has asked me why he can’t see the interactive map of London Underground.
    “I really like the map.
    Is there something wrong with my computer.
    I hope that I can see it again.
    Thank you”

    typed by Josh’s Dad Tim

  12. admin

    Hi Josh and Tim,
    Thank you for the feedback, I’m glad to know you like the map!
    The experiment is working fine for me here. Can you tell me what you see? And which browser are you using?

  13. +Unfortunately still nothing here…just plain black screen. Did try updating Flash (I am on his mum’s computer) Certainly worked up here before tho. I use Firefox btw

  14. admin

    You are right, there was a problem preventing it from running on Firefox. Thank you for letting me know.
    It is fixed now.

  15. works fine now…thank you for fixing it

  16. Pingback: Teen Spirit | unbox

Leave a Reply

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