Tube Experiment

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!

Tube Experiment

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.

Tube Experiment

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

Launch the experiment.


14 Comments on “Mind The Gap”

You can track this conversation through its atom feed.

  1. bookwench says:

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

  2. All Aboard | CreativeJS says:

    […] Read more on Bruno Imbrizi’s blog […]

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

    […] Imbrizi used train times and the latitude, longitude and depth of the stations to create the visualization, using a simple tool with Adobe AIR to combine these from different files. He writes: […]

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

    […] es dies nun schon gab, hatBruno Imbrizi noch einen drauf gesetzt. Hier sein kompletter Artikel und hier sein […]

  5. Mind The Gap | Broadsheet.ie says:

    […] Bruno Imbrizi, a visual developer, has created a wonderful, interactive, live 3D map of the London underground. He achieved all this by combining the real time data from Transport for London with Freedom of Information requests for the depth of tube lines and London Underground Station locations. […]

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

    […] One of the biggest challenges was to make the trains follow the spline and sometimes change splines depending on where 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. (source) […]

  7. All Aboard | The Creative Web Project says:

    […] Read more on Bruno Imbrizi’s blog […]

  8. Laura Frank says:

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

  9. Arthur Shine says:

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

  10. Frannielol says:

    È uno strazio!

  11. Josh says:

    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 says:

    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?
    Cheers

  13. Josh says:

    +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 says:

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

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>