London Tube Passengers

Der Grundlagenkurs Programmiertes Entwerfen 2 beschäftigte sich damit, mithilfe von Javascript, CSS und HTML einen Datensatz anschaulich und interaktiv zu visualisieren. Zuvor wurden der Umgang mit Form und Farbe in diesem Kontext gelehrt, sowie die Programmiertechnischen Grundlagen zur Umsetzung vertieft.
In meiner Datenvisualisierung stelle ich Passagierzahlen aus einer Woche im November 2009 dar.

Datensatz

Mein Datensatz bildet eine Woche im November 2009 ab. Es wurde festgehalten, wie viele Personen wann und wo und mit welchem Ticket in das Netz der Londoner Verkehrsbetriebe ein- und ausgestiegen sind. Der Datensatz sprach mich sofort an, da ich schon oft selbst in London war, so hatte ich direkt eine Beziehung zu den Daten, die ich Visualisieren wollte.

Entwurf

Ich erstellte zuerst Skizzen. Ich wollte mehrere verschiedene Aspekte klar und eindeutig in Szene setzen und dabei den Fokus auf Verständlichkeit und Anschaulichkeit setzen. Mein Hauptansicht, mit der Benutzer:innen begrüßt werden sollten, entwarf ich als Karte, bewusst nach dem Vorbild der London Tube Map selbst. Den Stil dieser sehr bekannten Karte wollte ich jedoch nicht einfach kopieren, da der Fokus auf den Daten liegen sollte. Meine Hauptansicht sollte also durch die Größe einzelner ausgefüllter Kreise (im Folgenden “Punkte” genannt) die Anzahl der Personen darstellen, die an der jeweiligen Station ein- und ausgestiegen sind.

Meine Zweite Ansicht sollte aufgeteilt nach Tube Lines dieselben Daten veranschaulichen, aber hier in den Kontext der Strecke setzen, auf der die Passagiere fahren, während auf der Hauptansicht das Gesamtbild des Verkehrsnetzes im Fokus steht.

Alle Ansichten sollen immer eine Verbindung zu den Tube Lines herstellen, auf denen die Stationen liegen. Deshalb wollte ich, dass man durch Anklicken der einzelnen Stationen angezeigt bekommt, welche Lines hier durch verlaufen.

Umsetzung

Technisches

Mein Datensatz beinhaltete leider nicht alle Daten, die ich zur Visualisierung benötigte. So brauchte ich zum einen die Informationen, welche Stationen auf welcher Tube-Line zu finden sind und zum anderen die genauen XY-Koordinaten der Stationen selbst, um die Positionen der Stationen zeigen zu können. Die Daten fand ich auf Wikipedia und auf der offiziellen Website der London Tube. Ich programmierte ein Skript, was die einzelnen Stationen durchgeht und mich fragt, wo diese sind. Dafür verwendet es als Grundlage eine .svg-Datei einer Nachzeichnung der Tube Map, deren Ankerpunkte klickbar gemacht werden. Als Hintergrundbild des Userinterface, welches ich auf einer Webseite umgesetzt habe, legte ich ein Bild der Tube Map von 2009. Falls eine Station nicht in der .svg-Datei enthalten ist, kann ich diese entweder überspringen (“London City Airport” ist zum Beispiel nur eine Bushaltestelle) oder mit der Maus manuell die Position anklicken, sofern an der Stelle kein Ankerpunkt in der .svg-Datei enthalten ist. Die Vollständigen Daten sahen intern dann wie folgt aus:

Farben und Formsprache

Als Farben wählte ich die offiziellen Farben der London Tube. Diese erweiterte ich um fünf Grautöne. Zudem ersetzte ich das Grau der “Jubilee Line” durch das Violett der erst kürzlich eröffneten und somit noch nicht im Datensatz erhaltenen “Elizabeth Line”. Alle Farben funktionieren wundervoll auf weißem und auf grauem Hintergrund, was wunderbar damit zusammenkommt, dass ich gerne einen “Light Mode” und einen “Dark Mode” von der Ansicht wollte um zwei verschiedene Blickwinkel auf die Datenvisualisierung zu erhalten, da Farben auf hellem und dunklem Hintergrund unterschiedlich wirken. Damit wollte ich erzielen, dass Benutzer:innen durch den Wechsel des Farbmodus weitere Details auffallen. Als Schrift wählte ich einen Klon der “Johnston”, der offiziellen Schrift der London Tube, da ich eine klare visuelle Beziehung zur London Tube einbauen wollte, die jedoch nicht die Aufmerksamkeit stiehlt.

Alle UI-Elemente rundete ich ab, um eine einheitliche Formsprache zu erhalten. Im Fokus sollte die Größe der Punkte stehen und eckige Kanten hätten davon abgelenkt.

Angeklickte Stationen sollten auch hervorgehoben werden, dafür wählte ich reinen 3 Pixel dicken Rand, der um einen Punkt erscheint, sobald er angeklickt ist.

Besonders Wichtig war mir zudem auch, dass das ganze Dynamisch interaktiv ist und sich bei der Bedienung gut anfühlt und Spaß macht. Deshalb legte ich besonderes Augenmerk darauf Animationen einzubauen, die nicht nur während des spektakulären Ansichtswechsels zu sehen sind. Die Animationen sollten auch “rund” sein, dafür wählte ich ein weiches erscheinen des Hoverlabels (dem Text, der ohne zu klicken auftaucht, wenn man mit der Maus über Stationen fährt) und gab den Knöpfen mehr tiefe, dadurch, dass sie sich leicht nach unten bewegen, wenn man sie klickt, so als ob man einen echten Knopf drückt. Dabei war mir auch wichtig, dass das Easing der Bewegungen stimmt, ich wählte den “Swing” also eine Kombination aus “Ease-out” und “Ease-in”.

Zweite Ansicht

Bei der Zweiten Ansicht wollte ich Ordnung in das Chaos bringen. Ich ordnete die Stationen aufgeteilt nach ihren Lines vertikal an. Ohne die Punkte zu skalieren passten die Lines allerdings nicht mehr auf den Bildschirm, also drehte ich die Ansicht und ordnete die Lines horizontal an. Damit die Punkte sich nicht überlappen, beschloss ich, sie als abgerundete Stäbe darzustellen. So konnte ich ein Raster integrieren und klare Struktur schaffen.

Ergebnis

Das Ergebnis meiner Arbeit kann man in diesem Video gut sehen:

.

.

Weitere Ideen

Wenn ich noch mehr Zeit in das Projekt stecken kann, möchte ich gerne noch ein paar Features hinzufügen. Ich würde gerne die Daten die ich visualisiere erweitern, sodass der Zeitaspekt vertreten ist. So erhoffe ich mir, dass man eine Welle sehen kann, wie die Stadt aufwacht und Abends wieder schlafen geht, anhand der Aktivität an den Stationen:

Ich stelle mir vor, dass ich unten eine Zeitleiste hinzufüge, die von alleine läuft, aber angehalten und manuell verschoben werden kann.

Ich möchte gerne auch eine Alternative zur Hauptansicht kreieren in der die Punkte aller Stationen gleich groß sind, aber durch bewegungsaktive Linien verbunden sind. Diese Linien sollen wiederum aus kleineren Punkten bestehen, die zwischen den Stationen hin- und herlaufen. Die Aktivität an den Stationen selbst soll hier nicht im Fokus stehen, sondern die Personendichte auf den Strecken zwischen den Stationen. Am Ende soll es zwischen 2 Stationen so aussehen wie hier:

Danke fürs Lesen! ich freue mich über Feedback in den Kommentaren :)