Tube Map Photograms

Last week I spent a few hours in a darkroom experimenting with photograms. As the title suggests, the idea was to create a representation of the London Underground, and ultimately to show growth of the network.

On this occasion I used plasticine to show the map on the photographic paper. This was the attempt – the extent of the map is the Circle line to the north, south and west, and Bank station to the east.

London Underground Photogram

With the second photogram, to show growth of the network I exposed the scene for a short time after adding each of the lines. (This only shows basic growth, with each line being added to the image in the order that they opened.)

London Underground Photogram with growth

Both images suffered from the fact that plasticine is very sticky and finger prints ended up all of the photo paper. This could be partially reduced by placing clear perspex or similar between the plasticine and paper. The strength of plasticine also meant that the lines ended up being different widths.

For the second image the exposure times for each stage were 0.5 seconds, I think this could have been reduced so there wasn’t such a big jump in colour levels between the stages.

I’m not sure that plasticine is the right material for creating these, but am yet to come up with a better solution – something that’s just as pliable, but more solid. I will be going back to create more photograms, if anyone has any ideas or suggestions then please do say.

Conway’s Game of Life: 3D

Another MRes Processing assignment, and on this occasion – something cellular automata related.

In an effort to again try out some Processing ideas that I hadn’t used before, the application created for this is 3D.

The application itself is based on Conway’s Game of Life, the basic idea of which is “to start with a simple configuration of counters (organisms), one to a cell, then observe how it changes as you apply Conway’s ‘genetic laws’ for births, deaths, and survivals”.

The initially defined rules are:

  • Survivals. Every counter with two or three neighbouring counters survives for the next generation.
  • Deaths. Each counter with four or more neighbours dies (is removed) from overpopulation. Every counter with one neighbour or none dies from isolation.
  • Births. Each empty cell adjacent to exactly three neighbours–no more, no fewer–is a birth cell. A counter is placed on it at the next move.

For this version of it a cell’s neighbours are the 2 cells either side of it in each of the 3 planes. The rules used are:

  • Survivals – cells with 2 live neighbours will continue as they are
  • Deaths – cells with 0 or more than 4 live neighbours
  • Births – cells with 1, 3 or 4 live neighbours

In the application the dead cells are coloured green, live cells start off pink and get brighter turning yellow and then white depending on how long they’ve been alive.

As the neighbour cells being used to determine the future of each call do not wrap this can lead to the edges of the cube becoming permanently white. The two examples below show how this can, but doesn’t always, happen.

In these versions the dead cells are not drawn.

London Bike Hire Journeys – 29th April 2011

The most recent MRes Processing assignment was to show the flow of journeys from a day of London bike hire usage. My previous Processing visualisations have all been quite dynamic, the kind that run through data on their own. For this one I decided to take a different approach. It’s an interactive visualisation where the user can click on any of the bike hire stand locations to see where the journeys went to from that stand.

The when the app starts it looks like this

London Bike Hire Flows 1

The size of the stand locations shows the number of journeys from that location. Clicking on a stand then shows which other stands those journeys went to

London Bike Hire Flows 2

The brightness of the line indicates the number of flows from the clicked stand to the stand the line goes to.

Some of the stands didn’t have any journeys made from them – I assume that the stand existed but wasn’t fully open on the day the data is taken from.

London Bike Hire Flows 3

If the user prefers to have more of an idea where the stand locations are, pressing space will display a map background instead of the more basic one

London Bike Hire Flows 4

Overall I’m really pleased with how it has turned out. I think it’s quite useful for seeing the journeys made from each of the hire stands, and I like the way it looks.

Here’s a video showing the app in use

The UCL Hand-drawn Map of London

This is about two months late, but better late than never surely.

At the end of November I spent a week hanging around various places on the UCL campus with Alistair Leak (@Alistair_Leak /, and by the end of that week we had a collaborative hand-drawn map of London.

We started with a canvas that we had traced the outline of Greater London, the Thames, the Lee and a few of the larger parks on, to give people something to relate to. We then spent about 15 hours over the course of the week inviting passers-by to add something to the map. This could be anything we said – something famous, their favourite place, where they live, anything. The map ended up with all those things and more, including many pointers towards other countries where international students and tourists had come from.

A very nicely drawn South Korea, just outside Romford
South Korea

Cologne, Munich, Poland, Austria
Munich, Cologne, Poland , Austria

One of the things I really enjoyed about was seeing where people placed things. There were those who were very confident, and got things very wrong, and then those who spent so long thinking about it just to make sure they got it right. And then what happens when one person gets something wrong? In the case of Hackney Empire people then, understandably, added things in relation to that. And a new Hackney appeared, about 5 miles away from the old one. (You can see the, traced, River Lee just to the west of it.)


In the case of UCL we ended up with two of them.


I also learnt things I didn’t know about London, like Lewisham being known as the blue borough. It’s because all the bins are blue.


You can have a look round the whole of the map at Cartopedia

We’d love to do another version of the map and have been given many suggestions including at the main train stations of London or in other cities. Both are ideas we’ve thought about doing, if anyone else is interested in this please do get in touch.

Some more about the map:
From Alistair
Mapping London
Directions Mag
CASA’s GlobalLab Podcast

A Week of Tweets in London

A visualisation of a week’s worth of geocoded tweets that were all in or around Greater London.

It’s a fairly simple Processing app, displaying each tweet in order. The ellipses displayed at each point though stay for 5 seconds, getting gradually smaller and darker with each second. The best way I could think to do that was with a fading point class for each tweet. This is then poked every second to both update, and then return whether it should be removed from the stack of points or not.

Playing around with this also reminded me how to sort an ArrayList. My Java knowledge is slowly returning..

Miniatur Wunderland

930 trains, 14,450 carriages, 1270 signals all controlled by self developed software. Miniatur Wunderland is the world’s largest model railway.

Then there’s the cars, airport, cruise liner. Have a look at this and be very impressed

Bus Route Video

After playing around with the code I now have a suitable video of the bus route map being created. Time and file size savings were made by experimenting with the processing MovieMaker class, and also using it more wisely. Firstly it was changed to only add a frame every other time a new stop is added – there are a lot of stops and it runs quite quickly so this is hardly noticed. I also played around with different MovieMaker settings, in the end I found that using ANIMATION (type) and HIGH (quality) gave the best compromise between file size and quality.

The video has a marker that shows where it is currently drawing, which is handy towards the end when the map gets quite crowded. Because of the way I added it in though, it meant that I was re-drawing the whole map each time up to the point of the current stop. This is a very uneconomical way of getting what I was trying to achieve, but as video frames are grabbed only at the end of each draw of the map it made no difference to the video size. What it meant was that it took hours to create. Since making the video I’ve looked more into using buffered windows. A far better way to make the video would have been to build up the map on a buffer and then on each call of draw: clear the screen, add the buffer image, and then place the current position circle. The end result would have been the same though:


An interesting map made by Dutch design school graduate Vincent Meertens. A map of the Netherlands based on how long it takes to get from one place to another by train. The map will change shape and size depending on where you are travelling from, and also on the time of day, due to the number of available trains.

The web app didn’t seem that easy to use, not entirely due to my not knowing any Dutch, but it’s a nice idea. When travelling somewhere physical distances can seem less important than the time it will take to get there.

Have a play here –

London Transport Data Hack Day

To kick off this blog…

I recently attended a Data Hack Day at the London Transport Museum, run by onedotzero and Protein. A day spent at the London Transport Museum was a good enough reason to get me there, playing with data was an added bonus.

Some really interesting work was done with the data – a few of them can be seen in the Protein link above. I spent part of the day playing with a csv file containing a list of stops on every bus route in London. There wasn’t that much time but it turned out to be relatively simple to create in Processing a map of London based solely on the bus routes. It spends about 20 minutes drawing the routes, stop by stop, and when done you get this:

London Bus Routes in Processing Screenshot

The colours don’t refer to anything in particular, they just change as the creation of the map goes on to make it look more interesting. When I’ve managed to create a suitable video (one that isn’t 20 minutes long and huge), I’ll put that up here.