Datenvisualisierungsprojekt

In dem Projekt “Programmiertes Entwerfen” besteht die Aufgabe darin, einen Datensatz interaktiv und ohne grafische Elemente darzustellen. Aus den entstandenen Bildern soll es möglich sein, unterschiedliche, interessante Fakten zu dem ausgewählten Thema herauszulesen.

Nach einiger Recherche habe ich mich für einen Datensatz zu Taxifahrten in New York entschieden. Der Datensatz enthält vor allem Informationen über die Bewegungsabläufe der Taxis. Daher waren meine ersten Ideen für die Visualisierung Fragen wie:

• Gibt es Zusammenhänge darüber, zu welcher Uhrzeit wie viele Personen zusammenfahren?
• In welchen Stadtteilen gibt es die meisten Taxifahrten?

So konnte ich auch schon konkret überlegen, welche Parameter aus meinem Datensatz ich verwenden möchte und welche nicht.

Zu meinem Datensatz

https://www.kaggle.com/datasets/debanjanpaul/new-york-city-taxi-trip-distance-matrix?resource=download

Erste Skizzen

Nachdem ich die ersten Überlegungen angestellt habe begann ich die ersten Skizzen zu erstellen. Zunächst auf Papier versuchte ich, passende Visualisierungen für meine Gedanken zu finden.

Da mein Datensatz sich auf Koordinatenpunkte bezieht und ein Großteil meiner Dimensionen mit diesen zusammenhängt, war eine offensichtliche Option für mich das Erstellen einer Heatmap. Um einen ersten Eindruck zu gewinnen habe ich die Daten zunächst einzeln visualisiert. Mir fiel schnell auf, dass es entscheidende Unterschiede in den Orten gibt, an denen Leute abgeholt und abgesetzt werden.

Einerseits wollte ich dies in einer Visualisierung verbinden, stand jedoch vor dem Problem, dass ich bei der Menge meiner Daten nicht jede einzelne Taxifahrt darstellen konnte. Durch die Heatmap konzentriere ich mich nun weniger auf einzelne Fahrten, sondern mehr auf Orte, bei denen ich von Durchschnittswerten ausgehen kann.

Visualisierung einzelner Parameter

In den Rasterpunkten habe ich mich entschieden, durch die Farbe zu visualisieren, ob es mehr Drop-offs oder Pick-ups gab. Die Größe der Punkte zeigt den Passagieranzahl an, und die Opazität gibt Aufschluss darüber, wie viele Fahrten insgesamt an dem jeweiligen Rasterpunkt stattfanden.

Mit dieser Visualisierung versuchte ich, ein Gesamtbild zu erstellen, aus dem man erkennen kann, wo Bereiche mit hohem Verkehrsaufkommen sind, wo die Leute eher hingefahren werden, dass die Menschen sehr häufig alleine fahren und dass sich die Fahrten vor allem im Stadtinneren konzentrieren.

Als zweite Ansicht entschied ich mich dazu, die Pick-ups und Drop-offs noch einmal einzeln darzustellen, da man so den Unterschied deutlicher vergleichen kann. Es war auch interessant zu sehen, in welchen Bereichen sich die Fahrten bewegen. Deshalb führte ich eine Funktion ein, die es ermöglicht, bei einem Klick auf einen Rasterpunkt zu sehen, wo die Fahrten begonnen bzw. geendet haben.

Zusätzlich baute ich einen Slider ein, mit dem man nachvollziehen kann, wie sich die Fahrten über den Tag verteilen. So kann man erkennen, ob es bestimmte Zeiten gibt, zu denen häufiger das Taxi genutzt wird.

Farben

Nachdem das Konzept feststand, begann ich mich mit den Farben auseinanderzusetzen. Insgesamt benötigte ich drei Farben: eine neutrale Farbe, die anzeigt, dass es an einem Punkt gleich viele Pick-ups und Drop-offs gibt, und jeweils eine Farbe für die beiden unterschiedlichen Aktivitäten. Diese Farben sollten nicht miteinander konkurrieren. Ich habe die drei Farben zu einer Skala zusammengefügt, sodass zwischen ihnen Farbmischungen und unterschiedliche Farbnuancen entstehen.

Im Code habe ich später eine Bibliothek namens Chroma.js verwendet, mit der Farben von dieser Skala entnommen werden konnten.

Für das Thema New Yorker Taxis war für mich sehr schnell klar, dass ich ein Gelb verwenden möchte. Passend dazu entschied ich mich für ein ergänzendes Blau. Da ich schnell mit den Farben zufrieden war, die Kontraste aber noch nicht ausreichend waren, habe ich innerhalb dieser Farbfamilien Varianten gebildet.

Interaktionen

Abschließend fügte ich noch Effekte hinzu, um die Datenvisualisierung spannender und interaktiver zu gestalten. Beim Überfahren mit der Maus (Hover) und bei Klicks werden weitere Informationen angezeigt.

Das Layout selbst gestaltete ich so reduziert wie möglich, um den Fokus vollständig auf die Visualisierung zu lenken. Dies war auch der Grund, warum ich eine Startseite hinzugefügt habe, auf der Teile des Projekts noch einmal erklärt werden.