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.
Diese Interaktive Datengrafik aus dem Fach “Programmiertes Entwerfen II” beschäftigt sich mit der schulischen Leistung von Personen anhand verschiedener Parameter. Die Aufgabe ist, eine interaktive Datengrafik zu entwickeln. Dabei wird auf die gezielte Verwendung von Farbe, Form, Position, Animation und Interaktion zur Kodierung und Strukturierung der Information geachtet. Alphanumerische oder symbolische Zeichen werden bewusst nicht verwendet. Das Ziel in diesem Projekt ist, die schulische Leistung von Schülern anhand verschiedener Parameter zu vergleichen. Unter diese Parameter fallen der schulische Abschluss der Eltern, die Prüfungsergebnisse, ein Vorbereitungstest, das Geschlecht und die jeweilige Ethnie.
Bei dem verwendeten Datensatz handelt es sich um 1001 Personen, welche eine schulische Prüfung absolviert haben. Es geht dabei vor allem um die drei Prüfungsfächer “Writing”, “Reading” und “Math” (zu Deutsch: Schreiben, Leseverständnis, Mathe). Der sogenannte “Score” dieser Prüfungsfächer kann zwischen 1 und 100 liegen. Außerdem sind die Parameter “Gender” male/female (zu Deutsch: Geschlecht) , “Ethnicity” A,B,C,D,E (zu Deutsch: Ethnie), “Parent Education” bachelor’s degree/some college/master’s degree/associate’s degree/high school (zu Deutsch: schulischer Abschluss der Eltern), “Test” completed/none (zu Deutsch: Vorbereitungstest) vertreten. Mit dem Parameter “Test” ist ein Vorbereitungstest auf die Prüfung gemeint, welcher entweder absolviert (“Completed”), oder nicht absolviert (“None”), wurde.
In der Finalen Variante werden zu Beginn alle Personen einzeln als Punkte dargestellt. Diese können in fünf verschiedenen Farben eingefärbt sein. Diese fünf Farben stehen für die fünf unterschiedlichen Ethnien (A/B/C/D/E) die dieser Datensatz führt. Somit sind zu Beginn der interaktiven Datengrafik alle Personen des Datensatzes, gefärbt in ihrer Ethnie, zu sehen. Durch einen Hover Button der den Bildschirm in zwei Hälften teilt kann zwischen der Ansicht “Ethnie” und “Geschlecht” gewechselt werden. Um die Ansicht “Ethnie” zu erhalten muss auf die rechte Seite des Bildschirms geklickt werden. Um auf die Ansicht “Geschlecht” zu wechseln muss auf die linke Seite des Bildschirms geklickt werden.
Die Ansicht “Geschlecht” wird durch eine andere Farbcodierung erkenntlich gemacht. Die Farbe “Weiß” steht hierbei für das weibliche Geschlecht, die Farbe “Grau” für das männliche. Durch das visuelle Feedback an dem unteren Rand des Bildschirms kann man den Hover Button erkennen. Der Nutzer kann stets entscheiden welche Ansicht er sehen möchte. Jetzt muss die erste Interaktion getätigt werden. Es wird mit dem Anwählen verschiedener Tasten gearbeitet. Drückt der Nutzer jetzt beispielsweise auf den Buchstaben “M” so wird er auf die nächste Ansicht geleitet. Hier sieht der Nutzer den Score “Mathe” auf der Y-Achse. Die X-Position spielt hierbei keine Rolle. Da die jeweilige Punktzahl der unterschiedlichen Fächer von 0 bis 100 reicht, kann man dies an der Y-Achse gut wiedergeben. Am oberen Rand des Bildschirms befinden sich damit die in diesem Fach sehr guten Schüler, unten die weniger guten Schüler. Der Nutzer kann auch hier zwischen den Ansichten “Ethnie” und “Geschlecht” wechseln.
Drückt er nun beispielsweise die Taste “R” so wird der Score “Leseverständnis” Prüfung angezeigt. Das Prinzip ist dasselbe wie bei dem “Mathe” Score. Am oberen Rand des Bildschirms befinden sich die Schüler, die in diesem Fach sehr gut abgeschnitten haben. Am unteren Rand die, die weniger gut abgeschnitten haben. Drückt der Nutzer nun die Taste “W” so wird ihm der Score der “Deutsch” Note nach dem selben Prinzip angezeigt. Im nächsten Schritt wird der Parameter “Test” eingeführt. Drückt der Nutzer die Taste “T” so kann er sehen, welche Personen einen Vorbereitungstest für die Prüfungen belegt haben und welche nicht. Auf der Linken Seite des Bildschirms sammeln sich alle, die den Vorbereitungstest belegt haben, auf der Rechten die, die ihn nicht belegt haben. Die Y-Position gibt dabei den Durchschnitt der drei Prüfungsergebnisse an. Wählt der Nutzer nun wieder die Tasten “W”, “M” oder “R” an, so kann er diese mit dem zusätzlichen Parameter “Test” betrachten. So hat die X-Position ab jetzt einen Wert (links = Test belegt, rechts =. Test nicht belegt). Soll jetzt ein Reset durchgeführt werden, so muss lediglich die Taste “Enter” gedrückt werden. Die Datenvisualisierung kann nun von Neuem gestartet werden.
Hinterlasse einen Kommentar