Datenvisualisierung - Verkehrsunfälle in Deutschland 2019

Thema

Das Semesterprojekt der Vorlesung Darstellen Simulation beschäftigt sich mit einem Datensatz über Verkehrsunfälle in Deutschland im Jahr 2019. Der Datensatz stammt von der Webseite des Statistischen Bundesamtes und besteht aus detaillierten Rohdaten zu allen Unfällen aus genanntem Jahr. 268.370 einzelne Unfälle wurden im Jahr 2019 polizeilich erfasst und zu jedem dieser Unfälle liegen Informationen zu folgenden Parametern vor:
Bundesland, Regierungsbezirk, Kreis, Gemeinde, Jahr, Monat, Stunde, Wochentag, Unfallkategorie (getötet, schwer verletzt, leicht verletzt), Unfallart (Zusammenstoß, Auffahrunfall, abkommen von Fahrbahn, …), Unfalltyp (Fahrunfall, Abbiegeunfall, Unfall bei Kreuzen), Lichtverhältnisse (Tageslicht, Dämmerung, Dunkelheit), Unfallbeteiligung (Fahrrad, PKW, Fußgänger, …), Straßenzustand (nass, trocken, winterglatt, …) und Koordinaten.

Prozess

Aufarbeitung der Daten

Die Daten aus der Tabelle sind mit der Library “Pandas” in Jupyter Notebook aufgearbeitet. Um die Daten in Gruppen zusammenzufassen, werden die Koordinaten, die in der Unfalltabelle hinterlegt sind, durch eine hohe Zahl geteilt und gerundet. Wenn die X und de Y Koordinate jeweils gleich sind, ist das ein Kästchen in der fertigen Grafik. Die neuen Koordinaten werden in eine neue Spalte geschrieben. Im nächsten Schritt werden die Koordinaten mit den Monaten gruppiert. Das bedeutet, dass pro Monat und pro Kästchen eine Zeile in der Tabelle existiert. Das ganze wird jetzt als neue CSV-Tabelle gespeichert.

Diese Tabelle wird für die Visualisierung verwendet. Der Code für die Visualisierung ist in P5JS geschrieben. Es gibt zwei Kernelemente in dem Code für die Visualisierung: das Auslesen der CSV-Tabelle und das Rendern. Für das Auslesen wird die Tabelle einmal durchgegangen und für jede Zeile wird geprüft, ob ein Feld mit den Koordinaten schon existiert. Falls es schon existiert, ist das in der Zeile, die gerade ausgelesen wird, für dieses Feld ein anderer Monat. Also werden dann die Unfallzahlen für diesen Monat in dem Feld gespeichert, was die entsprechenden Koordinaten besitzt. Wenn das Feld noch nicht existiert, wird geprüft, ob es sich um ein normales Feld oder ein Feld mit keinen Daten handelt. Ein No-Data-Feld wird angelegt, wenn keine Daten erfasst wurden. Wenn Daten erfasst wurden, wird ein Data-Feld angelegt. Beim Rendern wird die Liste mit allen gespeicherten Feldern einmal durchgegangen. Da für jedes Feld schon beim Anlegen die Position auf der Zeichenfläche berechnet wird, kann jedes Feld als Quadrat an diese Koordinaten gerendert werden. Unter diesen beiden Links findet sich der gesamte Code für die Visualisierung:
https://editor.p5js.org/fabienne.vatter/sketches/ovudyxzsm
https://editor.p5js.org/marvin.ebert00/sketches/e7zsjTm64

Gestaltung

Ein Moodboard mit thematisch geeigneten Bildern dient als Grundlage für die Ermittlung passender Farben.
Dabei haben es Bilder von Asphalt und Autobahnen, Langzeitbelichtungen einer viel befahrenen Straße, Scheinwerfer in der Dunkelheit und Einsatzfahrzeuge von Polizei, Feuerwehr und Krankenwagen auf das Moodboard geschafft.

Aus den abgeleiteten Farben werden Farbskalen in dem Programm Figma erstellt. Um die Farbwirkung und die Farbverläufe im Kontext betrachten zu können, werden die Farben in P5JS auf die Karte angewendet. Hierbei ist wichtig, die Farben nicht alleine, sondern im Kontext, auf einem Hintergrund darzustellen. Außerdem muss darauf geachtet werden, dass sich das No-Data-Feld von Mecklenburg-Vorpommern nicht von der Karte abgrenzt. Es muss so an den Farbverlauf der Karte angepasst werden, dass es als dazugehöriges Element wahrgenommen wird. Das No-Data-Feld und das Null-Feld müssen sich sehr ähnlich sein, da sie im Prinzip das gleiche darstellen, aber voneinander unterscheidbar sein müssen. So wurden viele Varianten iteriert, um den Zusammenhang zwischen dem No-Data-Feld, Null-Feld und den anderen Datenfeldern richtig darstellen zu können. Zwischendurch wird mit vielen Farben experimentiert und schnell festgestellt, dass zu viele Farben die Bedeutung der Darstellung verfälschen. Außerdem wird auf bestimmte Farben verzichtet, die falsche Assoziationen beim Nutzer hervorrufen. Bei roten und orangenen Farben ist die Gefahr, dass es nach Feuer oder Hitze aussieht. Auch die Farben Blau und Orange im Zusammenhang erinnern zu stark an Wettervorhersagen. Deshalb wird auf die Farben Rot, Orange und Blau verzichtet. Der finale Entwurf baut auf der Farbe Lila auf. Diese Farbe wird mit keinem anderen Thema in Zusammenhang gebracht. Die Skala beginnt mit einem ruhigen grauen Ton, der zur Thematik passt, verläuft über Lila zu einem dunklen grauen Lila, fast schon Schwarz. Das No-Data-Feld von Mecklenburg-Vorpommern bekommt einen hellen Flieder-Ton, der zum hellen Null-Feld und der Primärfarbe Lila passt.

Die minimalistische Schriftart Hind lässt viel Platz für die Datenvisualisierung. Da mit kleinen Schriftgrößen gearbeitet wurde, entsteht viel Weißraum. Damit wird das Hauptaugenmerk auf die Karte gelegt und Schrift und Legende gelangen in den Hintergrund. Die sehr elegante Schrift wird in kleinen Schriftgrößen und im Schriftschnitt Regular verwendet.

Ergebnis

Im fertigen Prototyp gibt es eine Hauptansicht, bei welcher alle Monate nebeneinander in zwei Zeilen dargestellt werden. Oben links befinden sich der Titel, sowie die Navigation. Darunter folgen zwei Zeilen mit den Grafiken der einzelnen Monate. Unter jeder Grafik ist der Monat jeweils nochmal klein ausgeschrieben. Unten links befindet sich noch die Legende und unten rechts die Namen, sowie das Fach. Die Legende ist so aufgebaut, dass sich links die Farbskala und rechts das No-Data-Feld befindet. Diese Reihenfolge ist gewählt, da die Farbskala eine höhere Priorität hat und deshalb an erster Stelle steht.

Auf der anderen Seite, auf der man jeden Monat einzeln sehen kann, befinden sich Titel, Navigation und die Legende an der selben Stelle. Rechts ist groß der aktuelle Monat zu sehen. Die Navigation, um zwischen den einzelnen Monaten zu wechseln befindet sich links in der Mitte der Seite. Für die Navigation zwischen den Monaten sind alle Monate im Kreis angeordnet. Der ausgewählte Monat ist mit einem lila Rand markiert.

Das Wechseln zwischen der Hauptansicht und der Monatsansicht funktioniert über Klicken auf die jeweilige Beschriftung in der Navigation. Die aktive Seite ist jeweils Lila markiert. Um in der Monatsansicht wechseln zu können, fährt der Nutzer mit dem Mauszeiger über den jeweiligen Monat. Dieser wird durch Hovern ausgewählt und mit einem lila Kreis markiert. Durch die Anordnung der Monate im Kreis ist es für den Nutzer sehr einfach, die Monate untereinander zu vergleichen. Dafür muss man mit dem Mauszeiger kurze, gerade Linie fahren.