Verkehrsunfälle

Verkehrsunfälle

Johanna Schopf

Der Schwerpunkt des Kurses bestand darin, einen selbst gewählten Datensatz nach eigenen Gestaltungsideen zu visualisieren, um so Zusammenhänge innerhalb der Daten darzustellen. Hierbei wurde ein Datensatz zu den aufgenommenen Straßenverkehrsunfällen in Deutschland veranschaulicht.


Programmiertes Entwerfen 2

IG2


Supervision
Prof. Hartmut Bohnacker
Fabian Rauch

Datenvisualisierung

Themenfindung

Bei der Suche nach einem geeigneten Datensatz, viel die Wahl nach längerer Recherche auf die aufgenommenen Daten der Verkehrsunfälle in Deutschland im Zeitraum von 2011 - 2020. Das Thema Straßenverkehr betrifft uns alle in unserem Alltag und oft geht hierbei die unmittelbare Gefahr von Situationen verloren. Unfälle passieren im Verkehr jedoch täglich, was die Wichtigkeit des Themas unterstreicht. Hierzu soll die Datenvisualisiereung helfen die Umstände, Orte, Zeitpunkte und auch Folgen darzustellen.

Datensatz


Ausschnitt des Datensatz


Es wurden zwei Datensätze kombiniert und auf die Informationen reduziert, welche für die spätere Dartstellung die meisten interessanten Aspekte mit sich brachten. Parameter, die hierzu aus den Datensammlungen zur Verfügungs standen, waren:

  1. Straßenklassse: Autobahn, Bundesstraße, Landstraße, Kreisstraße, Andere Straßen
  2. Verletzungsgrad: Leichtverletzt, Schwerverletzt, Getötet
  3. Ortslage: innerorts, außerorts
  4. Jahre: 2011-2020 
  5. Bundesländer
  6. Menge der Unfälle

    Ziel war es hierbei aus diesen Elementen bestimmte Zusammenhänge genauer und vor allem vergleichbar darzustellen:
    Zum Einen, der Vergleich der Unfälle in den Bundesländer untereinander sowie innerhalb der 10 Jahre. Zum Anderen, die Anzahl der Verletzungen sortiert nach Verletzungsgrad, Ortslage und Straßenklasse.


    Datensatz zu den einzelnen Bundesländern


Begriffserklärungen

Getötete Personen, die innerhalb von 30 Tagen an den Unfallfolgen starben.

Schwerverletzte Personen, die unmittelbar zur stationären Behandlung (mindestens 24 Stunden) in einem Krankenhaus aufgenommen wurden.

Leichtverletzte Alle übrigen Verletzten.

Konzeptionierung

Nachdem der Datensatz erfolgreich aufbereitet und gekürzt wurde, begann die Suche nach Zusammenhängen welche sich für die Visualisierung eignen würden. Ziel war es, ein allgemeines Bild über die Anzahl der Verkehrsunfälle und deren Folgen in Deutschland darzustellen aber auch mehrere genaue Parameter verknüpft miteinzubinden.

  • In wie weit lassen sich die einzelnen Bundesländer anschaulich miteinander vergleichen?
  • Wie war die Verteilung der Verletzungsarten in den einzelnen Jahren?
  • Wie hängen die Straßenarten und die Ortslage mit den resultierenden Verletzungsarten zusammen?
    Erste Skizzen zu möglichen Darstellungsansätzen


    Diese ersten Ansätze der Visualisierungmöglichkeiten, sollten eine allgemeine Übersicht über die gesamten Zahlen in Deutschland bieten, sowie eine Jahresübersicht und eine genauere Darstellung der Straßenverhältnisse.

Erste Darstellungensanätze

Screen 1: Bundesländer
Idee:
Bei dieser Darstellung soll die Anzahl der Verkehrsunfälle anhand der Größe der Kreise visualisiert werden. Die Position zeigt dabei um welches Bundesland es sich handelt. Somit entsteht der grobe Umriss einer Deutschlandkarte.
Mit Hilfe eines Mouseover-Effekts bei einem Punkt, erscheint auf der linken Seite des Screens, ein Label mit Angaben zu den Bundesländern. Bei dieser Darstellung war das grundlegende Konzept recht schnell festgelegt und die Variantenbildung hat sich größtenteils mit Farbwahl und genauer Positionierung befasst.

Varianten für die Deutschlandkarte


Die größte Anpassung beim letztendlichen Screendesign, bestand in der Änderung des vorher eigentlich festlegten Hintergrunds. So wurde der dunkle Hintergrund, im Zusammenspiel mit den Farben für die Datenvisualisierung selbst, in weiß geändert. Das Konzept selbst blieb erhalten.

Endgültiger Screen


Code:
Die Punkte werden nach Längen- und Breitengrad der Bundesländer positioniert. Dabei wurde die map()-Funktion der gmynd.js Library verwendet. Die Größe der Kreise ist abhängig von dem Minimal- und Maximalwert der Unfälle in den einzelnen Bundesländern.

Screen 1



Screen 2: Bundesländer im Vergleich
Idee: Bei der zweiten Visualisierung bleibt der Fokus auf den einzelnen Bundesländern und bereitet die Informationen noch weiter auf. Die 16 Bundesländer sind hier in den Reihen untereinander aufgelistet und in den jeweiligen Spalten nach den 10 Jahren von 2011 - 2020 sortiert. Dies bietet dem Betrachter eine Möglichkeit den direkten Vergleich innerhalb der Jahre eines Bundeslands aber auch der Bundesländer miteinander anzustellen. Auch hier kann durch ein Label mit Mouseover genauere Informationen zu jedem dargestellten Punkt aufgerufen werden.
Bei der Variantenbildung wurde an der eigentlichen Idee nichts geändert, nur für die Farbwahl und die damit kommende Mouseover Funktion wurde experimentiert.

Endgültiger Screen




Code:
Die Punkte werden den Bundesländern auf der y-Achse sowie nach den Jahren auf der x-Achse sortiert. Die Größe der Kreise ist hier abhängig von dem Minimal- und Maximalwert der Unfälle in den Bundesländern aufgeteilt auf die Jahre.

Screen 2

Screen 3: Straßenverhältnisse
Idee: Bei der dritten Darstellung kam es zur größten Herausforderung, mehrere Parameter in einer Darstellung zu codieren. So wurde die farbliche Codierung für den Verletzungsgrad gewählt und die Anordung der Punkte zeigt die Straßenart auf. Außerdem war es wichtig die Verletzungsarten in die zwei verschiedenen Ortslagen einzuteilen. Dies gelang durch verschiedene, transpartente Kreise. So kennzeichnet der transparente Kreis außen die Ortslage innerorts und der transparente Kreis innen die Ortslage außerorts. Nach dieser Darstellung ist immer die betroffenen Ortslage mit 100% Farbe dargestellt.
Auch hier wurden sehr viele Varianten gebildet, welche sich mit der allgemeinen Anordnung aber auch Farbe und Interaktion beschäftigten.

Ausschnitt der Variantenbildung

Bei der endgültigen Umsetzung war eine weitere Herausforderung die farbliche Codierung. Durch das Arbeiten mit Transparenz war auch die Wahl der Hintergrundfarbe ausschlaggebend. Daher wurden einige farbliche Varianten gebildet.

Farbvarianten des endgültigen Designs


Endgültiger Screen


Code:
Die Punkte werden nach Verletztungsart und Straßenklasse positioniert Außerdem findet die Aufteilung in innerorts und außerorts mit den verschieden dargestellten Kreisen statt.

Screen 3



Screen 4: Jahre im Vergleich
Idee: Der letzte Screen soll noch einmal den Vergleich der 10 Jahre mit den insgesamten Zahlen darstellen. So sind diese in einer radialen Ansicht angeordnet und durch Farbcodierung in die einzelnen Verletzungsarten aufgeteilt. Beim ersten Ansatz dieser Darstellung wurde eine im vollen Kreis angeordente Variante gewählt. Von dieser wurde jedoch während der Variantenbildung abgesehen und auf einen Halbkreis umgestiegen, da es sich nicht um einen Kreislauf handelt sondern um 10 aufeinander folgende Jahre.

Ausschnitt der Variantenbildung


Entgültiger Screen


Code:
Die Punkte werden radial nach Jahren sowie nach Verletzungsart positioniert. Der Datensatz wird hierbei aus allen Straßenarten und allen Bundesländern kombiniert dargestellt.

Screen 4


Farben und Farbcodierung

Bei der Typografie habe ich mich für die Schrift Magistral entschieden. Durch das leicht komprimierte aber trotzdem weitläufige Design, wirkt sie dynamisch und vorwärtstreibend, was für das Thema Straßenverkehr sehr gut passt.

Bei den Farben habe ich mich während der Recherche zum Thema inspirieren lassen, da diese drei Farben zu den meist gewählten Farben für Autos in Deutschland gehören. Außerdem wirkt das schwarz sehr passend beim Verletzungsgrad Getötet, da es den Verlust und die Trauer darstellt. Blau, auf der anderen Seite, bietet Ruhe und Sicherheit. Als Farbe für den mittleren Verletzungsgrad wurden ein Grauton gewählt, welcher inhaltlch sowie visuell das Gesamtbild abrundet. Als Interaktionsfarbe wurde ein heller Blauton gewählt, um weiter stimmig zu passen, jedoch als Highlightfarbe hervor zu stechen.

Datenvisualisierung