Bei Datengrafiken geht es darum, interessante Zusammenhänge in größeren Datenmengen sichtbar zu machen. In diesem Projekt durften keine alphanumerischen Zeichen (Text, Zahlen) oder bildhafte Elemente verwendet werden. Umso wichtiger wird die gezielte Verwendung von Farbe, Form, Position, Animation und Interaktion, um die Information zu kodieren und zu strukturieren.
Dieses Projekt wird begleitet vom Fach Programmiersprachen 2 (Dozent: Fabian Rauch). Die Studierenden sollten die interaktive Datengrafik so komplett und funktionsfähig wie möglich mit Web-Technologien, insbesondere Javascript, umsetzen.
Es handelt sich um Unfälle auf den Straßen von London. In einem Datensatz dazu, wurden über fünf Jahre hinweg Informationen gesammelt.
Hauptansicht: Unfälle gesamt
Durch das Bewegen der Maus in das erste obere Drittel oder das unterer letzte Drittel kann man auf die Hauptansicht zugreifen.
Auf dieser Ansicht sieht man jeden Unfall der innerhalb der fünf Jahre passiert ist, dargestellt durch einen Punkt auf dem Screen. Jeder Punkt wird an dem genauen Unfallort gezeichnet.
1.Ansicht: Jahr und Unfallort
Durch das Hovern über das Mittelfeld des Bildschirms sieht man wie sich die Unfälle auf die einzelnen Jahre aufteilen, wo waren viele Unfälle und wo waren weniger Unfälle? angeordnet sind die Jahre der x-Achse entlang chronologisch, d.h ganz links befindet sich das Jahr 2010 und ganz recht das Jahr 2014. Zusätzlich ist jedes Jahr durch eine andere Farbe codiert.
2.Ansicht: Jahr,Wochentage und Tageszeit
“Dragged” man die Maus auf der y-Achse Richtung untere Hälfte des Bildschirm erscheinen 7 Kreise. Jeder gesamte Kreis stellt einen Wochentag dar. Von links (Montag) nach rechts (Sonntag). Jeder Kreis ist in zwei Halbkreise aufgeteilt. Der helle Kreis zeigt immer die Summe an Unfällen, die am Tag passiert sind hingegen der dunkle Halbkreis immer die Summe an Unfällen die in der Nacht passiert sind anzeigt.
3.Ansicht: Fußgänger oder Autofahrer, männlich oder weiblich ?
“Dragged” man die Maus jedoch ausgehend von der Mittellinie an der y-Achse in die obere Hälfte des Bildschirms dann erscheinen 2 Kreise. Der gesamte linke Kreis repräsentiert die Unfälle die den Fahrer bzw. Auto Insasse betroffen haben. Wobei der gesamte rechte Kreis die Unfälle repräsentiert die einen Fußgänger betroffen haben.
Der innere Kreis stellt jeweils den weiblichen Anteil und der äußere Kreis jeweils den männlichen Anteil an Unfall betroffenen dar. Auch hier handelt es sich wieder um Summen innerhalb eines Jahres.
Hinterlasse einen Kommentar