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.
Aufgabe
Die Aufgabe der Datenvisualisierung war es, Daten, die überwiegend aus einzelnen Zahlen und deren Kennzeichnung bestehen, mit Farben, Formen und deren Position, darzustellen. Diese und deren Gestaltung durfte selbst gewählt und programmiert werden. Hierfür wurden in der Vorbereitung Übungen zum Programmieren, und den Eigenschaften des Aussehens der Daten, ausgeführt. Bei der Umsetzung sollte ebenfalls eine Interaktion des Nutzers möglich sein. Um ihm Abwechslung zu bieten, konnten hierbei drei unterschiedliche Screens eingebaut werden, die alle miteinander verbunden sind. Somit wird freies Wechseln zwischen den Screens ermöglicht. Als Datensatz wurde hier die Depressionsrate der einzelnen Länder der Welt ausgewählt. Diese spielen in zwei von drei Screens in Korrelation mit der Arbeitslosenrate der Länder eine Rolle. In dem dritten Screen wird auf die Depressionsrate der Männer und Frauen in diesen Ländern eingegangen.
Interaktion
Für die Interaktion Jahreswechsel muss nur die Computermaus auf der X-Achse hin und her bewegt werden. Ganz Links befindet sich das Jahr 1991 – ganz Rechts 2017. So kann verglichen werden, wie sich die einzelnen Länder über die Jahre entwickelt haben. Diese Interaktion ist auf allen drei Screens nutzbar.
Um auf einen nächsten Screen zu gelangen, muss der Nutzer mit seiner Maus über den beliebig ausgewählten Hoverbutton schweben. Davon gibt es drei, in der Farbe Orange, Lila und Blau. Diese sind auf dem gesamten Screen klickbar. Auf dem linken Hoverbutton werden die Kreise zu einer Weltkarte animiert. Auf dem mittleren Button zu dem Scatterplot und auf dem Rechten zu der Linie.
Weltkarte
Im ersten Screen soll mit den Kreisen eine Weltkarte dargestellt werden. Bei dieser wird bei der Größe auf die Depressionsrate (kleiner Kreis – geringe Rate und großer Kreis – hohe Rate) und bei der Farbe auf die Arbeitslosenrate (Orange – geringe Rate und Lila – hohe Rate) eingegangen.
Scatterplot
In dem Scatterplot wird wieder auf die Depressions- und Arbeitslosenrate der einzelnen Länder eingegangen. Für die X-Achse spricht hier die Depression. Von links, also gering, nach rechts, also hoch. Dies kann man ebenso an der ansteigenden Kreisgröße erkennen. Für die Y-Achse wird die Arbeitslosigkeit verwendet. Von unten, also gering, nach oben, also hoch. Dies kann auch an dem Wechsel der Farbe von Orange (gering) zu Lila (hoch) erkannt werden.
Linie
In dem dritten Screen wird eine Linie in mitten des Screens dargestellt. Diese soll auf die männliche und weibliche Depressionsrate eingehen. Die Linie verläuft so weit rechts, da sie so aufgeteilt ist, dass in der Mitte der Nullpunkt verläuft. Nach rechts wandern die Kreise, wenn Frauen in einem Land eine höhere Depressionsrate haben als Männer und nach links, wenn Männer ein einem Land eine höhere Depressionsrate haben. Da in keinem Land Männer eine höhere Depressionsrate als Frauen besitzen, richtet sich die Linie nach rechts aus. Diese muss also rechts verlaufen, um die Grafik der Wahrheit entsprechen zu lassen. Die Farbe der Kreise beziehungsweise die Länder verändern sich durch die Interaktion, denn auch hier wird immer noch mit der selben Interaktion, wie die der anderen Screens, auf die Jahre eingegangen. So zieht sich dieses Muster auf jedem dieser konstant fort. Die Kreisgröße richtet sich dabei wieder nach der allgemeinen Depressionsrate der Länder und der entsprechenden Jahre, auf dem der Mauszeiger gerade hovered.
Gerne auch einmal testen (Auf “Zur Demonstration” klicken)
Hinterlasse einen Kommentar