Motor Vehicle Collisions

Motor Vehicle Collisions

Isabell Kaletka

Im Abschlussprojekt von Programmiertes Entwerfen II geht es darum, einen umfassenden Überblick über die Daten zu bekommen und sie auf eine visuelle Art und Weise zu präsentieren. Wir verwenden typografische Elemente und abstrakte Formen, um die Vorgänge und Zusammenhänge deutlich zu machen. Dabei verzichten wir bewusst auf Piktogramme oder andere spezifische Symbole. Die Umsetzung erfolgt im Browser mit HTML, CSS und JavaScript.


Programmiertes Entwerfen 2

IG2


Supervision
Prof. Hartmut Bohnacker
Benjamin Thomsen

Datenvisualisierung

Datensatz

New York ist ein hektischer Ort, an dem der Verkehr niemals schläft und die Straßen ständig überfüllt sind. Mit einer Menge von Fahrzeugen auf den Straßen und einem Strom von Menschen, die von einem Ort zum anderen eilen, sind Stresssituationen und Zusammenstöße unvermeidlich. Bedauerlicherweise hält New York den traurigen Rekord für den längsten Stau in den Vereinigten Staaten. Auch in den Nachrichten wird berichtet, dass die gefährlichste Zeit für Autofahrer zwischen 17 und 18 Uhr liegt. In diesem Zusammenhang möchte ich genauer analysieren, ob es eine Korrelation zwischen den Uhrzeiten und Fahrzeugunfällen gibt.

Mein Datensatz habe ich von Kaggle bezogen. Mit 29 Spalten und fast zwei Millionen Zeilen bietet er eine umfassende Grundlage, um einen Einblick in die Unfallsituation in New York City zu erhalten. Um den Datensatz überschaubarer zu machen, habe ich ihn komprimiert und nur die Spalten genommen, mit denen ich später arbeiten wollte. Das war der Längengrad, Breitengrad, Monat, Stunde, Anzahl der Unfälle und die Spalten mit den verletzten und getöteten Radfahrern, Fußgängern und Autofahrern.

Konzeption

Während des visuellen Gestaltungsprozesses wurde mir schnell klar, dass eine Kartenansicht für meine Visualisierung am besten geeignet ist. Ich begann mit verschiedenen Versionen der Karte und experimentierte mit verschiedenen Elementen und Details. Im Laufe des Prozesses wurde mir jedoch bewusst, dass eine Reduktion der Darstellung erforderlich ist, um die Informationen klar und verständlich zu präsentieren.

Erste Screenvariante in Figma mit detaillierter Karte

Bei der Vorgehensweise der Variantenerstellung lag mein anfänglicher Ansatz darin, eine detaillierte Auswahlmöglichkeit für Tage, Monate und Jahre zu erstellen. Ich plante, den Benutzern die Möglichkeit zu geben, spezifische Daten auszuwählen, indem sie den gewünschten Tag, Monat und das Jahr in der Benutzeroberfläche auswählen.

Nach weiterer Überlegung habe ich mich jedoch entschieden, mich auf die Auswahl der Monate und Uhrzeiten zu fokussieren. Dies geschah aus verschiedenen Gründen. Erstens erforderte die Umsetzung einer umfassenden Auswahl von Tagen und Jahren eine komplexe Benutzeroberfläche, die möglicherweise schwer zu verstehen und zu navigieren ist. Zweitens stellte sich heraus, dass es sich bei meiner Thematik die ich behandeln wollte, die Auswahl von Monaten und Uhrzeiten vollkommend ausreichend sind, um bestimmte Daten zu filtern.

Varianten

Umsetzung

Ich habe mich für eine Schwarz-Weiß-Darstellung entschieden: Die Unfalldaten sind in Weiß und der Hintergrund in Schwarz gehalten, um eine klare Unterscheidung zu erreichen. Die Verwendung von Rot als Akzentfarbe für die Todesrate soll dazu beitragen, die Bedeutung dieser Daten und die Wichtigkeit der zugehörigen Informationen hervorzuheben. Als Typografie wählte ich die Futura, um der Anwendung einen New York-Charakter zu verleihen. Die Futura basiert auf ihrer modernen und klaren Erscheinung, die gut zu einem urbanen und zeitgenössischen Kontext passt.

Als es in die Umsetzung ging arbeitete ich zunächst mit einem groben Datensatz, um die Daten als Punkte erstmal visuell auf einer Karte darzustellen. Nachdem ich erfolgreich die visuelle Darstellung der Unfalldaten mit dem groben Datensatz erreicht hatte und festgestellt habe, dass sie funktioniert, bin ich zu einem feineren Datensatz übergegangen. Dies ermöglicht eine detailliertere Darstellung der Unfalldaten und eine genauere Identifizierung von Mustern oder Hotspots.

Anschließend kümmerte ich mich um die Navigation und um die Interaktionen. Ich implementierte einen Slider für die Uhrzeiten. Ich wollte den Benutzer ermöglichen, die Uhrzeiten schnell zu ändern und somit die Unfalldaten für verschiedene Zeiträume zu visualisieren. Um die Auswahl der Monate zu ermöglichen, habe ich Radiobuttons programmiert. Benutzer können einen Monat auswählen, und die Unfalldaten werden entsprechend aktualisiert. Später hat sich bei kleinen User Testings herausgestellt, dass die Navigation unübersichtlich war und die Testpersonen nicht verstanden, auf welcher Ebene sie sich befanden. Dementsprechend habe ich die verschiedenen Auswahlmöglichkeiten aufeinander angepasst.

Weitere Interaktionen sind das Hovern über die weißen Kreise, woraufhin weitere Informationen kommen. Die wichtigsten habe ich in einer größeren Schriftgröße dargestellt.

Zusätzlich wurde der Visualisierung eine Legende hinzugefügt, um dem Betrachter eine Orientierung zu geben, wie viele Fälle ungefähr im Kreis vertreten sind.

hovern
Infobox
Auswahlmöglichkeiten

Entwicklungsverlauf

erster Stand
Stand 19.06
Stand 22.06
Finaler Stand

Ergebnis