My Mobility

Das Semesterprojekt im Fach Interaktionsgestaltung II besteht darin, basierend auf einem Datensatz eine interaktive Datengrafik zu entwickeln. Dafür wurden zu Beginn des Semesters die Grundlagen von Farbe, Form und Position sowie Animationen und Interaktionen in Referaten und Übungen erarbeitet. Als Datensatz wurde mein persönlicher Standortverlauf der letzten Jahre gewählt, welchen Google über die Positionsdaten meines Smartphones erstellt hat. Dieser ermöglicht, mein Mobilitätsverhalten der letzten 4 Jahre standortbezogen in einer interaktiven Datengrafik darzustellen.

Datensatz

Themenfindung

Bei der Themenfindung wurde sich auf personalisierte Daten fokussiert, um eine interaktive Datenvisualisierung zu erstellen, welche das persönliche Verhalten darstellt. Die Entscheidung fiel auf den Standortverlauf, welcher über Google Takeouts angefordert werden kann. Der Datensatz wurde basierend auf den Standortdaten des Smartphones mit meinem Google Account seit Oktober 2013 erstellt. Die Daten wurden für die Google Maps Funktion “Meine Zeitachse” ermittelt, welche es ermöglicht, den persönlichen Standortverlauf einzusehen. Mit diesen Informationen kann das Mobilitätsverhalten der letzten Jahre visualisiert und Werte über Interaktionen näher untersucht und verglichen werden.

Datensatz

Der Datensatz beinhaltet eine Auflistung von besuchten Orten und Aktivitäten. Jede Aktivität beinhaltet den Start- und Endpunkt sowie weitere Wegpunkte. Zudem sind der genaue Start- und Endzeitpunkt, die Dauer und zurückgelegte Distanz der Aktivität angegeben. Des Weiteren wird seit September 2016 zuverlässig die Art der Fortbewegung ermittelt. Des Weiteren gibt es die Parameter für einen vereinfachten Pfad und ein Parken-Event. Der Datensatz besitzt jedoch auch Lücken, wenn das Smartphone keine Internetverbindung besaß, sodass Standortdaten nicht übermittelt werden konnten. Im Zeitraum zwischen Januar 2017 bis Ende Juni 2020 wurden 5329 Aktivitäten aufgezeichnet.

Konzeption

Darstellungsformen

Als Darstellungsformen wurde eine Heatmap gewählt, welche die Orte hervorhebt, an denen viele Aktivitäten stattgefunden haben. Diese entsprechen den Wohnorten sowie Urlaubsorten, an denen eine längere Zeit verbracht wurde. Orte, an denen ein kurzer Aufenthalt stattgefunden hat, werden ebenfalls angezeigt, treten jedoch in den Hintergrund. Für die Umsetzung muss ein Raster angelegt werden, welches die geografischen Bereiche widerspiegelt. Anschließend werden die Daten der einzelnen Aktivitäten innerhalb eines Zeitraums in das Raster einsortiert und dort hinterlegt. Durch die Kartendarstellung kann das Mobilitätsverhalten größerer Bereiche auf einen Blick direkt miteinander verglichen werden.

Über das Auswählen einzelnen Rasterelemente sollen weitere Informationen offengelegt werden, um diese zwischen zwei Bereichen näher miteinander zu vergleichen. Um das genaue Mobilitätsverhalten darzustellen, werden Kreisdiagramme verwendet, welche das Verhältnis der Fortbewegung zu Fuß, mit dem Fahrrad, mit Bus und Bahn, mit dem Auto und dem Flugzeug darstellt. Diese befinden sich neben der Kartendarstellung, sodass nacheinander mehrere verschiedene Orte miteinander verglichen werden können.

In einer dritten Darstellungsform sollen die Aktivitäten in den zwei zuvor gewählten Bereichen der Karte separiert und deren zeitlicher Verlauf näher untersucht werden können. Dazu wird ein Schichtdiagramm erstellt, bei dem stets alle Informationen der Bereiche sichtbar sind, aber immer die Daten von einem im Vordergrund stehen. Über einen Wechsel des dominierenden Bereiches animiert das Schichtdiagramm zu den neuen Datenpunkten. Auf diese Weise werden die Unterschiede der Mobilitätsaktivitäten zu verschiedenen Zeitpunkten an unterschiedlichen Positionen hervorgehoben.

Da Aktivitäten in den einzelnen Jahren und Monaten eine größere Informationstiefe bieten und interessante Entwicklungen wie Umzüge, Reisezeiten und Verhaltensänderungen aufzeigen. Darum der dargestellte Zeitraum der drei zuvor aufgeführten Darstellungsformen über Schaltflächen am unteren Bildschirmrand geändert werden. Da zuverlässige Informationen zur Art der Fortbewegung erst ab dem September 2016 vorliegen, werden für die Datenvisualisierung Daten ab dem Jahr 2017 verwendet.

Formen und Positionierung

Als Formen für die Heatmap wurden Punkte gewählt, welche für Stecknadelköpfe stehen, ähnlich dem Google Maps Symbol. Diese sind in einem Raster angeordnet, bei dem jede zweite Zeile auf die Lücke der Vorherigen geschoben wurde. Auf diese Weise entstehen Rauten und die Räume zwischen den Punkten sind gleichmäßiger verteilt, sodass die Karte organischer wirkt.

Bevor eine Auswahl von Bereichen stattgefunden hat, sind die Positionen links und rechts der Karte, an denen die Kreisdiagramme erscheinen gekennzeichnet. Dies veranlasst den Nutzer zwei Datenpunkte anzuwählen.

Anschließend werden bei einem näheren Vergleich die Flächen am oberen Bildschirmrand nebeneinander angeordnet. Nun liegt der Fokus auf den beiden selektierten Bereichen. Beide können direkt nebeneinander verglichen werden und ohne weite Strecken mit der Maus zurückzulegen umgeschaltet werden. Der dominierende Bereich im Schichtdiagramm besitzt das größerer Schichtdiagramm.

Im Schichtdiagramm wird der aktuell gewählte Zeitrahmen in zwölf Zeiträume unterteilen. Entsprechend der Anzahl der zurückgelegten Wege mit einer Fortbewegungsart werden Punkte übereinandergestapelt. An diesen Punkten kann der Aktivitätsgrad und die gewählten Fortbewegungsarten von beispielsweise einem Monat eines Jahres eingesehen werden. Die Spitzen des Schichtdiagramms befinden sich entlang der Position dieser Punkte.

Die Schaltflächen am unteren Bildschirmrand entsprechen einem Zeitstrahl, dessen Daten entweder vollständig dargestellt werden oder von dem eines der vier Jahre von links nach rechts aufsteigend gewählt werden kann.

Farben

Da in der Heatmap sowohl der Grad der Aktivität, als auch die bevorzugte Fortbewegungsart dargestellt werden soll, mussten beide Parameter über die Farbgebung realisiert werden. Die Helligkeit der Farbe entspricht dem Aktivitätsgrad in einem Bereich. Als Hintergrundfarbe wurde schwarz gewählt, sodass dieser nicht mit den Kartendaten in Konkurrenz tritt. Nicht besuchte Orte werden vollständig ausgeblendet und bereits geringe Helligkeits- und Farbunterschiede sind so erkennbar. Der Farbton repräsentiert die Umweltfreundlichkeit bei der Wahl des Fortbewegungsmittels. Demzufolge entsprechen:

• Dunkelgrün = Zu Fuß
• Hellgrün = Fahrrad
• Gelb = Bus / Bahn
• Orange = Auto
• Rot = Flugzeug

Die Schaltflächen sowie die Bereiche, in denen die Kreisdiagramme erscheinen, werden sind in einem dunklen Grau gehalten, um nicht von den Kartendaten abzulenken. Ist ein Jahr ausgewählt, wird die Helligkeit des Indikators der Schaltfläche erhöht. Werden Bereiche ausgewählt und im Kreisdiagramm dargestellt, stimmt die Helligkeit mit der des in der Heatmap gewählten Bereiches überein. In dem Schichtdiagramm werden die Daten des aktiven Bereiches mit einer höheren Helligkeit versehen.

Interaktionen

Um eine Klickbarkeit von Objekten zu signalisieren wird ein Hovereffekt verwendet. Dieser erscheint, wenn der Nutzer die Maus über die Datenpunkte der Heatmap bewegt. Daraufhin vergrößert sich der Kreisradius der Maus liegenden Datenpunktes. Sind zwei Bereiche ausgewählt, erscheint der gleiche Hovereffekt über den Kreisdiagrammen. Die Schaltflächen am unteren Bildschirmrand entsprechen Hoverbutton welche erst sichtbar werden, wenn sich die Maus darüber befindet. Der Hoverbereich konnte nicht weiter vergrößert werden, da andernfalls beim Auswählen der Bereiche in der Heatmap versehentlich der Zeitraum der Darstellung umgestellt werden könnte.

Über einen Klick auf einen Bereich der Heatmap, wird dieser ausgewählt und die zugehörigen Daten in einem Kreisdiagramm dargestellt. Wird nun eine Schaltfläche geklickt, werden die neuen Daten für den Bereich im Kreisdiagramm mit einer Animation aktualisiert. Nach der Auswahl von zwei Datenpunkten aus der Heatmap, sind die Kreisdiagramme ebenfalls klickbar. Daraufhin gelangt der Nutzer auf die Vergleichsansicht mit dem Schichtdiagramm. Der dominierende Bereich ist der, dessen Diagramm angeklickt wurde. Nun kann zwischen beiden Diagrammen durch Klicken umgeschaltet werden. In dieser Ansicht kann ebenfalls der Zeitraum geändert werden. Um zur Kartenansicht zurückzukehren, muss das Kreisdiagramm des dominierenden Bereichs erneut angeklickt werden.

Übergänge

Beim Übergang von der Kartenansicht auf die Vergleichsansicht werden die Kreisdiagramme mittig am oberen Bildschirmrand angeordnet und die 120 der 127 Datenpunkte der Heatmap in den Farben der Fortbewegungsarten eingefärbt und an die Position im Schichtdiagramm bewegt. Des Weiteren wird das Schichtdiagramm eingeblendet und zu den Werten des geklickten Bereiches animiert.
Bei der Animation zurück zur Kartenansicht erreichen zuerst die Kreisdiagramme ihre ursprüngliche Position. Das Schichtdiagramm fällt zusammen und wird ausgeblendet und die Datenpunkte ordnen sich erneut zur Heatmap an.

Endergebnis

Videodemonstation