London Underground

Eine interaktive Datenvisualisierung der Ein- und Ausstiege der Londoner U-Bahn.

Thema

Bei der Themenwahl habe ich mich für öffentliche Verkehrsmittel entschieden, überwiegend inspiriert von dem Projekt hubcab. Über die Website London Datastore habe ich dann ausführliche Datenbanken zur Nutzung der Londoner U-Bahn gefunden.

 

Visualisierung

Bei dieser Datenvisualisierung wird das Londoner U-Bahn Netz dargestellt, indem alle 273 Stationen auf einer Karte abgebildet werden. Die Grösse der Stationen wird hierbei durch die jeweiligen Ein- und Ausstiege eines Jahres errechnet. Um dabei die Zusammengehörigkeit von Stationen innerhalb einer Linie zu verdeutlichen, wird durch einen Hover die komplette Linie in der passenden Farbe hervorgehoben.
 
London Underground - Central Line - Hover
 
Klickt man auf eine Station, dann wird in die Linienansicht gewechselt. In dieser werden nur die Stationen der jeweiligen Linie angezeigt und entsprechend ihrer Reihenfolge sortiert. Die Grösse stellt hierbei wieder die Ein- und Ausstiege dar, allerdings die der Wochentage. Die unterschiedliche Farbtönung zeigt zudem das Verhältnis von Zustiegen an. Steigen mehr Personen ein, dann wird die Station weiss eingefärbt, steigen mehr Personen aus, dann wird sie schwarz eingefärbt. Ein mittleres grau bedeutet somit, dass die Werte gleich gross sind.
 
Circle Line 
Hat eine Station mehrere Linien, eine Station an der man also umsteigen kann, dann erhält diese zusätzlich eine weisse Kontur. Klickt man auf eine solche, dann werden alle Linien für die Auswahl angezeigt.
 
Multi Line Hover
 
Innerhalb der Linienansicht kann zwischen auch zwischen den Linien gewechselt werden, es wird sozusagen der Umstieg simuliert.
Durch scrollen kann zwischen den Jahren 2007 bis 2014 gewechselt werden und somit die Veränderung der Nutzung erkannt werden.
 

Umsetzung

Das komplette System wurde mit HTML, CSS und Javascript, bzw. jQuery umgesetzt. Dabei sind die Übergänge mit CSS-Transitions umgesetzt worden. Das komplette System ist responsiv und funktioniert somit auf jedem Screen, wohingegen die Interaktionen auf die Bedienung mit der Maus ausgelegt sind.