Why are they different shades of blue⁉️⁉️⁉️

TfL, like most large organisations, have brand guidelines. It enables them to set a consistent look and feel across their services which, hopefully, makes it easier for users to identify them. A glowing roundel in the night tells you you're near a tube station, the colours of the lines reassures you that you jumped on the right train, even the font lets you know you're in the right place.

They publish the TfL Colour Standard - a short document which explains what all their colours are.

If you examine the TfL Go app you'll see that its icon is R0 G25 B168 (#0019A8).

But on the web, their standard Favicon uses R17 G64 B145 (#114091).

Yet their Apple Favicon uses R17 G59 B146 (#113B92).

Over the years, the colour standard has been refined. Issue 1 from 2003 had the corporate blue as R0 G45 B115 (#002D73) with a "web safe" version of #003399.

By Issue 2 in 2007, the corporate colour was set at R0 G25 B168, with a web safe version of #000099. The same is present in 2007's Issue 3.

Given the RGB value has been in set in stone for over 15 years, where does this discrepancy come from?

I don't think it is an accessibility issue. TfL have great documentation on how they meet WCAG and I can't see the correct corporate colour causing any issues.

As far as I can tell, the #113B92 colour first appeared on the web around 2012.

The #114091 Facicon first appeared around 2014.

Along the way, they also had this nifty iPhone icon with, you guessed it, another shade of blue #0044a3.

Perhaps it is a conversion issue? What's the CMYK?

The colour standard says corporate blue is C100 M97 Y3 K3 But the TfL elements standard says it is C100 M88 Y0 K5.

Both agree that it should be Pantone 072.

Looking at the Pantone website that blue is #1007a0.

Which, If I convert to CMYK is C90 M96 Y0 K37.

Any way you slice it, that's several completely different shades of blue!

For You, Blue

Colours are hard. Humans have varying perceptions of shades and hues. We have several different ways of representing these colours. Applying colour to a screen is different to applying it in paint or fabric.

True consistency across different media is almost impossible.

But, on digital media, having a single colour is a relatively simple technical issue. Pick a single RGB (or HSL) colour and stick to it.

There's no reason that I can fathom that these two icons should be different. If you disagree, please let me know what basic error I have made.

I've since updated the display to show me three different sets of transport information.

At a glance, I can see the next bus, whether there are delays on the Elizabeth Line, and if my regular trains are running.

Here's how all three APIs work.

Bus

The bus is the easiest one of all. Transport for London (TfL) have a set of free APIs. No registration required! You will need to know the ID of your local bus stop. Visit the TfL bus search page and search for your local stop. Click the stop on the map.

You'll be taken to a URl like https://tfl.gov.uk/bus/stop/490000173RF/oxford-circus-stn-margaret-street - that will show you the Bus Stop ID (technically the NaPTAN ID). In this case 490000173RF.

You can then call this API: https://api.tfl.gov.uk/StopPoint/490000173RF/arrivals - which will return JSON like this:

[{
    "$type": "Tfl.Api.Presentation.Entities.Prediction, Tfl.Api.Presentation.Entities",
    "id": "-119695796",
    "operationType": 1,
    "vehicleId": "LTZ1049",
    "naptanId": "490000173RF",
    "stationName": "Oxford Circus Stn  / Margaret Street",
    "lineId": "12",
    "lineName": "12",
    "platformName": "RF",
    "direction": "outbound",
    "bearing": "152",
    "destinationNaptanId": "",
    "destinationName": "Dulwich Library",
    "timestamp": "2023-06-29T10:40:18.3147535Z",
    "timeToStation": 1470,
    "currentLocation": "",
    "towards": "Trafalgar Square Or Green Park",
    "expectedArrival": "2023-06-29T11:04:48Z",
    "timeToLive": "2023-06-29T11:05:18Z",
    "modeName": "bus",
    "timing": {
        "$type": "Tfl.Api.Presentation.Entities.PredictionTiming, Tfl.Api.Presentation.Entities",
        "countdownServerAdjustment": "-00:00:02.7011995",
        "source": "2023-06-29T07:28:52.918Z",
        "insert": "2023-06-29T10:40:01.313Z",
        "read": "2023-06-29T10:39:58.591Z",
        "sent": "2023-06-29T10:40:18Z",
        "received": "0001-01-01T00:00:00Z"
    }
}, {
    "$type": "Tfl.Api.Presentation.Entities.Prediction, Tfl.Api.Presentation.Entities",
    "id": "-1460579610",
    "operationType": 1,
    "vehicleId": "LTZ1447",
    "naptanId": "490000173RF",
    "stationName": "Oxford Circus Stn  / Margaret Street",
    "lineId": "12",
    "lineName": "12",

Hopefully the entity names are self-explanatory. If you need a specific route, you will need to filter on the lineId's value.

Personally, I use timeToStation to see how long until the bus arrives. If it's less than a couple of minutes, I don't display it.

CrossRail

Again, I am overjoyed that TfL have a free API which lets you check the status of various tube lines.

The Elizabeth Line's status can be found at https://api.tfl.gov.uk/Line/elizabeth/status - can you guess the URl for the other lines 😉?

And, again, we get back some fairly self-explanatory JSON:

[{
    "$type": "Tfl.Api.Presentation.Entities.Line, Tfl.Api.Presentation.Entities",
    "id": "elizabeth",
    "name": "Elizabeth line",
    "modeName": "elizabeth-line",
    "disruptions": [],
    "created": "2023-06-27T12:37:57.107Z",
    "modified": "2023-06-27T12:37:57.107Z",
    "lineStatuses": [{
        "$type": "Tfl.Api.Presentation.Entities.LineStatus, Tfl.Api.Presentation.Entities",
        "id": 0,
        "lineId": "elizabeth",
        "statusSeverity": 9,
        "statusSeverityDescription": "Minor Delays",
        "reason": "Minor delays between Stratford and Shenfield due to a an earlier signal failure at Tottenham Court Road. GOOD SERVICE on the rest of the line. ",
        "created": "0001-01-01T00:00:00",
        "validityPeriods": [{
            "$type": "Tfl.Api.Presentation.Entities.ValidityPeriod, Tfl.Api.Presentation.Entities",
            "fromDate": "2023-06-29T10:30:50Z",
            "toDate": "2023-06-30T00:29:00Z",
            "isNow": true
        }],
        "disruption": {
            "$type": "Tfl.Api.Presentation.Entities.Disruption, Tfl.Api.Presentation.Entities",
            "category": "RealTime",
            "categoryDescription": "RealTime",
            "description": "Minor delays between Stratford and Shenfield due to a an earlier signal failure at Tottenham Court Road. GOOD SERVICE on the rest of the line. ",
            "affectedRoutes": [],
            "affectedStops": [],
            "closureText": "minorDelays"
        }
    }],
    "routeSections": [],
    "serviceTypes": [{
        "$type": "Tfl.Api.Presentation.Entities.LineServiceTypeInfo, Tfl.Api.Presentation.Entities",
        "name": "Regular",
        "uri": "/Line/Route?ids=Elizabeth line&serviceTypes=Regular"
    }],
    "crowding": {
        "$type": "Tfl.Api.Presentation.Entities.Crowding, Tfl.Api.Presentation.Entities"
    }
}]

You can grab the text out of there for easy display.

Train Times

This is the only pain-in-the-arse service. It uses National Rail's Live Departure Boards Web Service (LDBWS). This is an XML SOAP API which requires credentials.

Register for an API token at National Rail's site.

Find the three letter CRS code for your departure and arrival station on the National Rail website.

I use the GetDepBoardWithDetailsHeader() API call. For example: GetDepBoardWithDetails(20, "WWA", "LBG", "to") gets the next 20 trains from Woolwich Arsenal to London Bridge.

There are OpenLDBWS libraries available in most major programming languages. Don't bother writing your own!

There's more discussion online about how to test and use OpenLDBWS.

Once you've got a response, you can filter it for the specific trains you're interested in.

Putting it all together

Well, that's up to you Sparky! Personally, I have a hodge-podge of PHP building it into a format suitable for my ancient eInk screen. You can do what you like!

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

Demo

• Play with it yourself
• Grab the code from GitLab
• I've also created a version with every London station and train line.

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:

• "Force-directed graph of tube lines" by Martin Zaltz Austwick (2011)
• "Graph Drawing by Weighted Constraint Relaxation" (2017)
• "What would the London Tube Map look like if Data Scientists designed it?" by Keith McNulty (2018)
• "Going Underground: Graphing and Pathfinding London Tube Lines" by Joe Depeau (2019)
• And many others.

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.

Things you should know...

1. London has a Congestion Zone. You have to pay £11 to drive through it.
2. If you have an EV (Electric Vehicle), you don't have to pay the Congestion Charge.

Easy, right? Not quite. In order to get the 100% discount, you have to register your vehicle and pay a £10 per year charge. A bit annoying but basically fair. So, I registered. That's where the problems began.

TfL (Transport for London) demanded a scanned copy of my car's V5C - a government document which, amongst other things, tells you what fuel type your vehicle is. I got a scan of it from my vehicle lease company, uploaded it, paid £10, and got a receipt. Nifty.

A few days later I drove through the Conestion Zone and got hit by a fine. WTAF?

If I'd read the small print, I would have seen that it can take up to 10 days for the exemption to be applied to their system.

Why? How does it take so long to add an entry into a database? I suspect it's because someone has to manually check the V5C to check it says the car is electric. And, in case of forgery, double check the information is correct with an official source.

But, here's the thing... If they're going to check my vehicle - why bother asking me in the first place?

If you use the Government's vehicle checking service, you can see that my car is an EV. There's even an API they can use.

Perhaps this is a bit beyond TfL's technical team? Nope!

London has an Ultra-Low Emissions Zone. If you want to drive a polluting vehicle in London, you have to pay. If you drive an EV, it's free.

But here's the thing with the ULEZ - you don't have to register!

If you go to the ULEZ exemption checker and enter your EV's numberplate, it will tell you that the vehicle is exempt because it is electric.

WHY THE BLOODY HELL DO I HAVE TO PAY TO TELL YOU IT IS EXEMPT FROM THE CONGESTION CHARGE WHEN YOU AUTOMATICALLY KNOW IT IS EXEMPT FROM THE ULEZ CHARGE!?!?!?!?

...ahem...

Anyway, I wrote a grovelling email, and TfL graciously used their discretion to waive the charges.

What have we learned?

This isn't a "don't make me think" situation. It's a "do this automatically for me" situation.

If you can automatically get the information from somewhere - don't ask the user for it!

When one part of your system works automatically, and another part doesn't - fix it!

If something is going to take an unexpectedly long time, make it extremely clear to the user.

Never drive through London.

At first glance, it appears to be a normal London Tube map. But look closer...

Cool! But there is something about it which has always bothered me. Each Tube line represents a theme - therefore, a station at the intersection of multiple lines should be represented by someone who matches all of those themes.

For example, here's Baron's Court - the intersection of the Explorer line and the Saint line - represented by Saint Ursula. She is just an saint - she has nothing to do with exploring. This artwork is wrong!

So, can we write something to query Wikidata to generate a more accurate artwork?
Because accuracy is my aesthetic.

Jump straight to the finished product and skip all the geeky details!🔗

A brief guide to SPARQL

Wikipedia holds structured data about people and things. It uses SPARQL to query that data. It is a bit complex to use, but a valuable skill.

For example, this query finds people who are explorers and also saints.

SELECT DISTINCT ?person ?personLabel WHERE {
  ?person wdt:P106 wd:Q11900058 . # People whose occupation (P106) is explorer (Q11...)
  ?person wdt:P411 wd:Q43115      # People whose canonization status (P411) is sainthood (Q43...)

  SERVICE wikibase:label {
    bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en" .
  }
}

The result is just four people. And that's where the problem starts. Simon Patterson chose categories for the lines which often don't have any intersections. There is no one who is an Italian Artist who is also a Saint and also a Footballer.

So, to create a more accurate artwork, we'll need different categories.

Nodes

One of the first things we need to do is understand the Tube map as a graph - with stations as nodes and lines as edges.

We want to know:

1. Which stations are on which lines
2. Which stations are on multiple lines
3. Which station has the most lines
4. How many stations are on each line

Thankfully Mark Dunne has done lots the hard work for us, and provided a great tutorial. Sadly, the data are about 5 years out of date.

Alternatively, the TfL API has lots of the information we need. Here's the call for all the stations on the Bakerloo line - https://api.tfl.gov.uk/line/bakerloo/stoppoints

Let's throw some Python down to grab the data we need. First, how many stations are there on the Bakerloo line?

import requests
r = requests.get("https://api.tfl.gov.uk/line/bakerloo/stoppoints")
stations = r.json()
count = len(stations)
print("There are " + str(count) + " stations on the Bakerloo Line")

Next, let's get the lines for each station:

import requests
r = requests.get("https://api.tfl.gov.uk/line/bakerloo/stoppoints")
stations = r.json()

for station in stations:
    stationName = station["commonName"]
    lineGroups   = station["lineModeGroups"]
    for lineGroup in lineGroups:
        modeName = lineGroup["modeName"]
        if (modeName=="tube"):
            lineCount = len(lineGroup["lineIdentifier"])

    print(stationName + "," + str(lineCount))

The line names can be found at https://api.tfl.gov.uk/Line/Mode/tube

Brief survey of the problem...

270 Tube Stations(!) across 11 lines. King's Cross St Pancras has the most lines - 6.

There a few anomalies in the data. It lists Edgware Road as two separate stations - even though it's really one station. The same problem is present on Hammersmith and Paddington. Cleaning data is "fun"...

The categories are also challenging. This is how many times the Bakerloo line intersects with the other lines

'bakerloo': {
    'circle': 3,
    'hammersmith-city': 1,
    'jubilee': 2,
    'metropolitan': 1,
    'northern': 4,
    'district': 2,
    'central': 1,
    'victoria': 1,
    'piccadilly': 1,
    'waterloo-city': 1
},

That is - the Bakerloo line touches every other line at least once. As do the Northern, Central, and Jubilee lines. Those lines will need to contain some very broad categories.

Back to Wikidata

So, we want to replace each station's name with a human's name. We need attributes which are wide-spread enough to get good coverage in the data - and quirky enough to be interesting. I'd also like to keep some of the original categories:

I suspect there's a way to interrogate SPARQL to find a list of categories based on a graph - but I'm not clever enough to do that. I started off with an entirely arbitrary set of attributes:

• Academy Award Winners
• Left-handed people
• Nobel Prize Winners
• People born in London
• Educated at UEA (the university where my wife and I first met)
• Female Computer Scientists
• Saints
• Explorers
• Journalists
• Sinologues
• Comedians

Here's the query for Comedians who were educated at UEA and were born in London:

SELECT DISTINCT ?person ?personLabel WHERE {
  ?person wdt:P69 wd:Q1045828 .
  ?person wdt:P106 wd:Q245068 .
  ?person wdt:P19 wd:Q84
  SERVICE wikibase:label {
    bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en" .
  }
}

One result - Doc Brown. There are no saints who have won an Oscar, and data about left-handed people is suspiciously absent. The categories will have to be completely rejigged.

Keep It Simple, Stupid

I figured the easiest thing to do would be to start from a well data'd individual and work backwards from there.

SELECT DISTINCT ?person ?personLabel WHERE {  
  ?person wdt:P108 wd:Q35794  . #Employed by Cambridge University #Bakerloo
  ?person wdt:P19  wd:Q84     . #Born in London                   #Circle
  ?person wdt:P463 wd:Q123885 . #Member of the Royal Society      #Hammersmith&City
  ?person wdt:P106 wd:Q121594 . #Professor                        #Waterloo&City
  ?person wdt:P106 wd:Q205375 . #Inventor                         #Metropolitan
  ?person wdt:P106 wd:Q81096  . #Engineer                         #District
  ?person wdt:P106 wd:Q4964182. #Philosopher                      #Piccadilly
  ?person wdt:P106 wd:Q11063  . #Astronomer                       #Victoria
  ?person wdt:P106 wd:Q170790 . #Mathematician                    #Jubilee
  ?person wdt:P106 wd:Q82594  . #Computer Science                 #Northern
  ?person wdt:P106 wd:Q188094 . #Economist                        #Central

  SERVICE wikibase:label {
    bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en" .
  }
}

The result of that query is the inventor of steampunk, Charles Babbage!

We can do a reverse query. Given these people, which common properties do they have?

SELECT ?property ?propnameLabel ?value_Label
where
{ 
  wd:Q46633 ?property ?value . #Babbage
  wd:Q7259  ?property ?value . #Lovelace
  ?propname wikibase:directClaim ?property . # constrain to directClaims
  SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en".
                         ?value rdfs:label ?value_Label .
                         ?propname rdfs:label ?propnameLabel .}
} order by ?property

(Thanks to TagishSimon for the help)

This is where things got trickier! Most of the major intersections didn't have any candidates other than Babbage - truly a Renaissance Man! - so I expanded "born in London" to "born in the UK".

We can't use ?person wdt:P27 wd:Q145 becuase that only covers the current United Kingdom - not The Kingdom of Great Britain (1707–1801) nor The United Kingdom of Great Britain and Ireland (1801 to 1927)

The correct query seems to be ensuring the place of birth is within the current administrative territory of UK:

?person wdt:P19 ?pob . ?pob wdt:P131* wd:Q145 .

But you can also use a UNION

{?person wdt:P27 wd:Q145} UNION {?person wdt:P27 wd:Q174193} UNION {?person wdt:P27 wd:Q161885} .

That got closer - but still not enough.

Unions

Wikidata is fickle. Someone may have an occupation as a "computer scientist" or they may work in the field of "computer science". SPARQL eschews the or operator, and uses UNION:

{?person wdt:P101 wd:Q21198} #Field of Work CS
UNION
{?person wdt:P106 wd:Q82594} #Occupation CS

I'm beginning to see why the original artist was more liberal in his accuracy!

Sorting

I want the map to contain notable people. There are a couple of ways to assess the "notability" of a Wikidata subject. I've chosen to use "sitelinks" - that shows how many languages their article is available in. It's a crude, but quick method.

Here's it in action:

SELECT DISTINCT ?person ?personLabel ?sitelinks WHERE {
  ?person wdt:P106 wd:Q205375 . #Inventor
  ?person wikibase:sitelinks ?sitelinks .

  SERVICE wikibase:label {
    bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en" .
  }
} ORDER BY DESC (?sitelinks)

Correcting for Bias

Wikipedia has an acknowledged male bias. So I used SPARQL's FILTER property to great effect:

FILTER ( !EXISTS{ ?person wdt:P21 wd:Q6581097 }) 

It says to return anyone without the sex/gender of "Male". (Yes, I know things are a bit more complicated than that - but this is a good way to return women, intersex people, agender, transgender folk etc).

If no non-men were returned, I repeated the search but omitted the filter.

Because I used "Born in the UK" as a filter, there is probably a bias towards white people. And people who become Professors or members of the Royal Society may also be the product of a biased society. There are many other filters and categories I could have chosen - and I hope some of you will create maps for your own cultures and societies.

P-p-p-pickup Some Python

There are several Python libraries for SPARQL, I used sparqlwrapper.

Here's a sample query

from SPARQLWrapper import SPARQLWrapper, JSON

sparql = SPARQLWrapper("https://query.wikidata.org/sparql")
sparql.setQuery("""
    SELECT DISTINCT ?person ?personLabel ?sitelinks WHERE {
        ?person wdt:P106 wd:Q81096 . #Engineer
        ?person wdt:P20  wd:Q84    . #Died in London
        ?person wikibase:sitelinks ?sitelinks .
        SERVICE wikibase:label {
            bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en" .
        }
    } ORDER BY DESC (?sitelinks)
""")
sparql.setReturnFormat(JSON)
results = sparql.query().convert()

for result in results["results"]["bindings"]:
    print('%s %s %s' % (result["person"]["value"], result["personLabel"]["value"], result["sitelinks"]["value"]))

Plotting onto an image

Let's leave who and what we select for now, and work out how we draw the eventual results.

We could do all sorts of clever things plotting out locations - but I decided to cheat!

There is a fully semantic SVG of the tube lines (Thanks to Oliver O’Brien for finding it).

I removed all the lines I didn't want, then I was able to search & replace station names with my preferred text.

Search And Replace

Well... sort of! Charing Cross Station has an ID of 940GZZLUCHX.

On the map it is:

<g id="s-940gzzluchx_label">
    <g id="s-940gzzluchx_label_1_">
        <text transform="matrix(1 0 0 1 515.8999 487.6963)">
            <tspan x="0" y="0">Charing</tspan>
            <tspan x="4.3" y="4.5">Cross</tspan>
        </text>
    </g>
    <polygon id="s-940gzzluchx_nr" fill="#EE3124" points="514.3,487.7 512.6,486.9 515,486.9 515,486.4 512.5,486.4 513.8,485.8 515,485.8 515,485.3 513.8,485.3 512.2,484.6 511,484.6 512.7,485.3 510.2,485.3 510.2,485.8 512.7,485.8 511.4,486.4 510.2,486.4 510.2,486.9 511.5,486.9 513.1,487.7 "/>
</g>

Whereas the SVG element for North Wembley is just:

<text id="s-940gzzlunwy_label_2_" transform="matrix(1 0 0 1 282.1489 289.1079)">North Wembley</text>

Again, I'm not quite clever enough to work out a way to reliably find the inner text for an element which may be inside (or not) several other similarly named elements.

So a lot of repetitive search-and-replace it is. *sigh*

I also need to manually place some of the station names, because they're a different length to the originals. *double-sigh*

Putting it all together

I have great pleasure in revealing to you "The Great(er) Bear"!

See the full sized version.

Copyright

OK gang, turns out that copyright law is even trickier than computer code! I've spoken to Simon Patterson and he is happy for me to host a not-for-profit version of this piece of art which is heavily indebted to his original.

TfL has been litigious in the past when it comes to derivative maps. I tried contacting them several times, but didn't receive any clear answers as to whether I could do this.

The data that I used to generate the art is "Powered by TfL Open Data" and provided under OGLv2. It may contain OS data © Crown copyright and database rights 2016.

The original font is tightly controlled. So I've used a freely available font called Hammersmith One which is broadly similar.

Lots of people create modified tube maps:

• The Literary Tube Map - putting authors on the map
• Tube Map of Beer Prices
• Decibel levels on the Tube
• House Price Tube Map
• And no doubt many more.

If you want to build your own version of my modified map, all the data are on my GitLab!

Details

Here are a few interesting close-ups of the map - they may be different from the final version.

Errata

• The data in Wikidata may be incorrect or incomplete.
• I originally didn't restrict it to just humans! So a few weird entries snuck in. Using ?person wdt:P31 wd:Q5 . corrected that. But I'm wondering if anyone on the map is fictional...!
• Due to timeouts and my crappy coding, I ran the code over several passes on different days. If you run the code, you might get different results.
• I didn't use people's names in their original language, I had to back-fill them. I probably missed some. I should have used P1559.
• Even after lots of jiggling of categories, one or two stations kept coming up blank. So I manually added in a few people. Can you spot who they are?
• Some people's names were too long for the allotted space, so I have swapped a few people around. Better code would try to keep name length as close to the original as possible.
• There's no (intentional) ordering. It might be nice to put people on the line in order of, say, year of birth.
• Similarly, there's almost no relation between the people and the places. Although I've contrived to put the author of Mary Poppins somewhere special!
• The Hammersmith One font only has a basic set of characters - so non-European languages (and some accents) are in the default font.
• The Elizabeth Line / CrossRail hasn't opened yet. I suspect it will be much harder to produce a new map once it goes live. Similarly the DLR and Overground lines are excluded.
• The SVG renders well in Firefox, and seems to work OK in Chrome. Please let me know of any glitches.
• I've also added a couple of Easter Eggs. Enjoy finding them!

Thanks

Mainly to my wife, Liz, for being very patient with me while I swore at my code.

I am indebted to Simon Patterson for his incredible and inspirational artwork. When it was created in 1992, Wikipedia did not exist. Linked Data stores were in their infancy. It would have been close to impossible to create a semantically correct map. Nothing in my version is intended to take away from Patterson's work and creativity.

A lot of comments on Twitter & Google+ dismissed these results as a success. A typical response was:

70 scans a day? In a city of millions? Rubbish!

This fails to address something that advertisers are conspicuously loathe to reveal - the true "response rate" of any advert is hard to calculate. How many phone calls, visits to a website, or SMS interactions are directly attributable to a regular poster? No one really knows - or, if they know, they're not telling.

For the first time, we're able to see how many people are reacting to an advert, scanning a code, and then visiting a site.

Currently, TfL's campaign is running at 5,000 scans per month - peaking at 259 scans on April 3rd.

Or, 16,000 in the last five months. With a rather nice growth in usage in the last few months.

Here come the nay-sayers....

But... But.... How many sites is that across? Millions of people, thousands of sites, only a few scans? Rubbish!

So, I performed a Freedom of Information request to TfL.

There were around 400 sites showing these posters in November. That may have changed by now.

Ideally, I would have liked TfL to have created a unique QR code for each poster. That way we could see Putney gets more scans than Waterloo, for example. But I appreciate the logistical difficulties of that!

Phone Use

We also get some interesting statistics about the makes of phones that Londoners use:

iPhone has surged ahead - at the expense of Android and BlackBerry. Windows Phone 7 still remains a minority sport.

Haterz Gonna H8

Frankly, I don't care too much what the doom-mongers say. Having over 16,000 responses to a poster campaign sounds like a success to me. And, best of all, the data is open for anyone to investigate.

If you disagree with me - I politely ask you to show your workings :-)

Looks like someone was listening! I spotted this poster at a tube station.

Nestled in the corner is a QR code pointing at the mobile bus countdown service!

This is a close-to-perfect use of QR.

• Points to a mobile site.
• Easy to scan code.
• Good call to action.

As I suggested in my original post, TfL could customise the code, or print a separate one for each bus stop. This is, however, an excellent start.

What's particularly useful is that TfL are using the goo.gl URL shortener - meaning we can see their statistics!

Statistics

There's a dearth of good quality QR statistics which are publicly available. What is available is often put through the lens of a marketing team. So it's particularly refreshing to get the data straight from the source.

One simply needs to append any goo.gl URL with a "+" in order to see the statistics.

Let's dive in!

Since their launch in November, the QR codes have been scanned 4,500 times. I don't know how many of these posters are up, but that seems like a pretty impressive number.

The graph from the last month shows the codes are being scanned around 70 times per day.

We can get a rough idea of what sort of phones Londoners use - or, at least, what those who use the buses use.

iPhone takes a significant chunk - although not the majority - with 45%. Android coming next at 28%. BlackBerry still has a strong showing among Londoners with 22%.

I'm unsure whether "Windows" is WP7 or the older "Windows Mobile". Either way, Nokia's market share has collapsed.

The next interesting thing to look at is which countries the users are from.

As expected, the majority are using UK SIMS.

This doesn't count visitors who are using a local SIM on their stay - but it's still interesting to see where tose whoa re prepared to pay roaming data charges are coming from. Who knew so many Lithuanians loved our bus system...?

As far as I can tell, the Google statistics don't actively prevent duplications - so one enthusiastic Lithuanian could have scanned the code 15 times.

The data aren't entirely rigorous - but do show some interesting trends for QR use in London.

Each one of them is (eventually) going to be upgraded with a new real time bus countdown signs.

If you've got an Internet capable phone, you can get real time information for your bus at http://m.countdown.tfl.gov.uk/. The service has a number of cool features, including geolocation.

The great thing, in my opinion, is that each stop has a unique URL. I can bookmark m.countdown.tfl.gov.uk/arrivals/72073 and check the buses as my train pulls in to Waterloo Station.

At the moment, there's no signs on bus stops to let people know how they can access the countdown page for their location. That needs to change.

Here, I've used the TfL Bus Roundel (entirely without permission) to show a potential design.

The QR code is designed to be stuck on a bus stop information panel and leads directly to that stop's arrivals page.

TfL Countdown Page

Where's the best place to stick this?

The above image is an excellent example of what not to do.

• The code is physically too high for most people to scan.
• No descriptive text saying what the code does.
• Susceptible to dirt and defacement.

It would probably be best to place it directly on the maps provided at each stop.

There may need to be a little rejiggling of the maps to accommodate the code - as well as some tests to see what wording works best to encourage people to scan.

The net result should be something which is suitable for every one of the 19,500 bus stops in London.

It should be fairly easy for TfL to get this going. QR Codes everywhere!

Thanks to Ben Stewart for the idea.

Ben Stewart

@yousability

Replying to @edent@edent can you persuade @TfLofficial to put QR codes linking to the relevant countdown on bit.ly/p8Ddrc on all London bus stops?

---

Rather than getting bogged down in philosophy, I refer to the reason people choose Microsoft Windows to do anything public facing.

Advertisers obviously care enough about their message to craft 30 second videos, they invest millions on infrastructure to support showing them. Then they take a totally unsuitable and unstable method for playing them back - why?

It's a phenomena I repeatedly see. Advertising screens around the world which are really only displaying one message.

They're saying "Windows - The Worst Way To Get Your Message Across".

However, it's not just Windows which has the problem - each of these three photos show a PC which has failed to POST correctly. So they are stuck - forever displaying their inadequacies to thousands of passers-by. (Click to embiggen)

My real rant isn't about Windows - it's about the design and thinking behind such advertising screens. It would appear that each screen is driven by its own PC. What madness! The cost of hardware - let alone software - must be phenomenal.

At the moment, each screen displays exactly the same content as its neighbour. There's no reason why a single computer couldn't be used to drive all the screens.

I say exactly the same - the screens get progressively out of sync as the day goes on. Presumably the separate PCs don't communicate with one and other.

The next thing that bothers me is the use of Windows.

These screens aren't using an embedded version of Windows - they're using XP. Now, XP is a fine OS - but it is bloated in terms of what is needed. All that is needed is a small embedded device which can be loaded with video files and set to play back.

It doesn't need a desktop OS.  It doesn't need anything more complicated than a display, video codecs and an Ethernet port.  This is the sort of thing for which Linux is perfect.

So, why?  Why has this system been allowed to develop?  Every day I see another screen which is broken, out of sync, or crashed.  Why has such a fragile and expensive solution become so prevalent?

The majority of these photos show TFL advertising screens managed by CBS Outdoor.  I really do wonder if they ever wander through the tube and see what a shoddy experience they are delivering.

Sousveillance (pronounced /suːˈveɪləns/, French pronunciation: [suvɛjɑ̃s]) as well as inverse surveillance are terms coined by Steve Mann to describe the recording of an activity from the perspective of a participant in the activity,^[1] typically by way of small portable or wearable recording devices that often stream continuous live video to the Internet.

http://www.youtube.com/watch?v=u804C65q_Jk

When this London Underground employee (now thought to be Ian Morbin) had a bad day at work, he thought, like the rest of us, that it would be forgotten by morning.  Many of us take our stresses out inappropriately - whether it's on the call centre worker or a traffic warden - occasionally on a customer.  What he hadn't counted on was Jonathan Macdonald whipping out his camera and recording the event.  We're wearily resigned to CCTV monitoring our every move - but handheld cameras present a more intimate and dispassionate view of events.

Expanding on my comments in the original post -

The pro-gun lobby often says "A well armed society is a polite society." The implication being that you don't go around being aggressive when anyone could pull a gun on you.

With the rise of sousveillance -  I wonder if we'll see a rise in professionalism and politeness. Because, you never know who is recording for posterity.

There are two problems I have with this:

1. It relies on those higher up to do something. If this Ian chap doesn't get disciplined - what has been achieved? Nothing. Similarly, if after all the videos of police abuses of power (G20, climate camp etc.) no officer gets punished / the rule aren't changed - it's all been for naught.
2. I think people should be polite and professional because IT'S THE RIGHT THING TO DO. Not because they're afraid of being punished. Call me old fashioned, but I want to live in a world where people are respectful to one and other - not merely afraid of being caught out.

I hope that "Ian" doesn't lose his job - I hope that he realises what an arse he has been and learns to treat customers with a bit more respect.

This video is presented out of context and - although I trust Jonathan's reporting of events - we do only have his word for it.  He may very well have chopped off the footage which completely exonerates Ian.  Although I can't quite conceive what that would be.

Meta

It's interesting to notice how the blogosphere reacts to these events.  Multiple repostings often fail to mention the originating site.  The conversation is split between YouTube, Jonathan's blog and those who have reposted it.

Is it better to keep conversations separate in this way? Leave the drooling YouTube commentators  away from the TFL blogs - or should diverse communities try to interact to keep a canonical view of what is being said about this incident?