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.
Grundlage dieses Projekts waren die Daten der WHO über die Suizidraten von 1985 bis 2016 im sozioökonomischen Vergleich. Die Aufgabenstellung war es die Daten interaktiv zu visualisieren unter der Berücksichtigung, dass keine alphanumerischen Zeichen verwendet werden.
Durch ein Hoch- und Runterscrollen lässt sich durch die Ebenen navigieren. Die Interaktion mit den Elementen wird durch ein Verändern des Mauszeigers hervorgehoben. Um das Endprodukt selbst zu testen, gelangt man über den Butten “Demonstration” auf der rechten Seite zu Prototypen. Oder über diesen Link.
Die erste Ansicht des Konzepts ist die Weltkarte bei der die Länder ihre Position wie in der Realität einnehmen. Die Größe der Quadrate gibt die Höhe der Suizidrate an und die Helligkeit wird durch das durchschnittliche Bruttoinlandsprodukt definiert.
Hier gilt die selbe Kodierung wie in der Weltkarte. Der Unterschied zur vorherigen Ansicht ist, dass die Länder nach Höhe der Suizidrate sortiert sind.
Ist ein Land ausgewählt oder es wurde keine Auswahl getroffen, erscheint diese Ansicht. Das linke größere Balkendiagramm beschreibt die 32 Jahre und bezieht dabei die Suizidrate, das BIP und die demografischen Daten des jeweiligen Jahres mit ein. Der Abstand der Unterkante der Balken beschreibt das BIP und die Höhe des jeweiligen Balkens die Suizidrate in dem bestimmten Jahr. Die Balken sind farblich in die Altersgruppen unterteilt und stellen die Verteilung der Suizide in diesen Gruppen dar. Oben rechts befindet sich ein Scatterplot. Die x-Achse stellt die Suizidrate dar und die y-Achse das BIP. In diesem Fall sind die Quadrate jeweils ein Land und passend in das Diagramm sortiert. Ist ein Land ausgewählt stellt ein Quadrat ein Jahr aus den Daten des Landes dar. Das darunterliegende horizontale Balkendiagramm fasst die Suizide aus dem linken Balkendiagramm der Altersgruppen zusammen.
In dieser Darstellung wurde die Ansicht von den Altersgruppen zur Verteilung der Geschlechter geändert.
Ein Dreieck stellt jeweils eine demografische Gruppe dar - die oberen die Frauen und die unteren die der Männer. Von links nach rechts werden die Altersgruppen dargestellt. Die Fläche der Dreiecke gibt die Suizide der jeweiligen Gruppe an.
In dieser Übersicht werden alle Länder angezeigt, die in der Weltkartenansicht ausgewählt wurden. Hier werden für ein Land die vorhandenen Jahre in dem Datensatz dargestellt. Der Abstand zur x-Achse ist wieder das BIP und die Höhe des Balkens die Suizidrate der jeweiligen Jahre. Die farbliche Kodierung ist immer in den vier “Regenbogen”-Farben des Konzepts, um einen möglichst hohen Kontrast der Länder zu erzeugen.
Hier wurden per Drag and Drop Länder in die radiale Vergleichsansicht gezogen.
Alle 99 Länder lassen sich in der Darstellungsform zeigen.
Alle ausgewählten länder bekommen in dieser Darstellung einen Kreis mit den Dreiecken. Die dicke des Kreises gibt die durchschnittliche Suizidrate des Landes an. Die Donut Elemente repräsentieren jeweils eine Altersgruppe die durch die passenden Farbe kodiert sind. Der Winkel der Elemente ist abhängig von der Prozentualen Verteilung der Suizide der Altersgruppen. In der Mitte befinden sich zwei gleichseitige Dreiecke, die wieder Männer und Frauen repräsentieren. Auch bei diesen Dreiecken stellt die Fläche die Suizidrate des jeweiligen Geschlechts dar. Durch einen Klick auf diese lässt sich das Donutdiagramm filtern. Beim ersten Klick wird die prozentuale Verteilung der Suizide der Altersgruppen von Männern dargestellt und beim zweiten Klick das gleiche für Frauen. Durch einen dritten Klick gelangt man wieder zur ungefilterten Ansicht.
Eine Übersicht der Zusammensetzung aller möglichen Screens.
Hinterlasse einen Kommentar