Skip to content
Snippets Groups Projects
Commit 74750a97 authored by Sabed Ger's avatar Sabed Ger
Browse files

Bilder vom Code zum Abschnitt Implementierung hinzugefügt

parent a84919e3
No related branches found
No related tags found
No related merge requests found
Bericht/Bilder/Model+Types.jpg

200 KiB

Bericht/Bilder/callColoredShapesPlot.jpg

273 KiB

Bericht/Bilder/coloredShapesPlot.jpg

628 KiB

No preview for this file type
......@@ -156,7 +156,12 @@ Damit unterstützen die Visualisierungen so ziemlich alle sinnvolle Interaktions
%Beschreiben Sie die Implementierung ihrer Visualisierungsanwendung in Elm. Stellen die Gliederung ihres Quellcodes vor. Haben Sie verschiedene Elm-Module erstellt. Was war aufwändig umzusetzen, was ließ sich mit dem vorhanden Code aus den Übungen relativ einfach umsetzen?
%
%Wie sieht die Elm-Datenstruktur für das Model aus, in dem die verschiedenen Zustände der Interaktion gespeichert werden können.
Das Elm-Programm besteht aus 3 Modulen: Das Hauptmodul StudentsPerformanceInExams, Plots und Util. StudentsPerformanceInExams ist das Hauptmodul, dessen main-funktion verwendet wird. Das Model hat einige Einträge für das Verwalten der Http-Anfrage: In httpState wird gespeichert ob es gerade am Laden ist oder schon erfolgreich ist oder fehlgeschlagen ist. In fullTexts wird der empfangene Text aus der Http-Anfrage gespeichert. In error wird der Fehler gespeichert, falls es einen Fehler gibt. Falls alles gut läuft, dann wird zunächst aus der erhaltenen Html-Datei der csv-String extrahiert und dann an den csv-Decoder weitergegeben, der dann die Daten aufbaut und ebenfalls in das Model einspeichert. Im Model wird außerdem gespeichert welche Visualisierung gerade gezeigt wird. Beim Start des Programms wird zunächst einfach nur eine Tabelle mit allen Daten angezeigt. In einem select (Funktioniert nicht auf allen Browsern. Funktionsfähig unter Firefox.) kann man dann die Visualisierung auswählen. Dann wird noch das Model des Plots im Model gespeichert, welches besonders für die 2. Visualiserung notwendig ist, damit dort die Interaktionen funktionieren. Das Hauptmodul enthält im Grunde genommen nur die main-Funktion und alle ihre Bestandteile sowie alle Funktionen, die fest mit der Datenstruktur der spezifischen Daten zusammenhängt. In Plots sind alle Plots sowie die Datenverarbeitung, welche unabhängig von den spezifischen Daten verläuft (also nur noch Typen wie XyData oder Listen verwendet). Dort ist die Scatterplotfunktion vorzufinden, die in Visualisierung 1 verwendet wird. Diese musste nicht mehr verändert werden seit der letzten Übungsserie, in der sie verwendet wurde. Ebenso ist die ParallelCoordsPlot-Funktion in diesem Modul. Diese Funktion musste nur noch geringfügig erweitert werden im Vergleich zur Übung, um die Auswahl von 2 Dimensionen, die dann in einem Scatterplot dargestellt werden. Das aufwändigste war die neue coloredShapesPlot-Funktion zu erstellen, die die 3. Visualisierung aufbaut. Mit Icons hatten wir uns in der Übung nicht beschäftigt, sodass ich diese Funktion vollständig neu aufbauen musste. Für diesen Plot habe ich neue Datenstrukturen erstellt, die die notwendigen Daten Strukturiert an diese Plot-Funktion übergeben. Eines davon ist MultiDimNominalData. Dieser Typ ist ähnlich zu der bisher bekannten MultiDimData mit dem Unterschied, dass nicht nur die Beschriftung der Dimensionen notwendig ist, sondern auch die Beschriftung jedes einzelnen Wertes jeder Dimension, damit die Zuordnung der restlichen Attribute zu dem Wert möglich ist. Da die Punkte gruppiert nach durchschnittlicher Leistung sind, ist hier auch eine Liste von Listen von entsprechenden Punkten notwendig. Ein solcher Punkt ist analog dem MultiDimPoint mit dem Unterschied, dass die Daten selbst Strings sind. Auch notwendig für die Plotfunktion ist die Information zu den Icons selbst. Mit dem neuen Typ ColoredShape wird die Art der Shapes definiert: Für jeden Wert jeder Dimension wird eine Farbe gespeichert in insgesamt einer Liste von Listen von Farben. Außerdem werden die Koordinaten der Sektoren hier gespeichert. Zussätzlich wird die gesamte Breite und Höhe eines Icons abgespeichert. Diese werden mit der Konstruktorfunktion dieses Typs automatisch berechnet. Die Plot-Funktion selbst nimmt dann nur noch diese Daten und platziert die Icons mit den festgelegten Koordinaten, den Farben und den Werten immer hin. Die Umrechnung von den relativen Koordinaten, die in der Definition des Shapes gespeichert sind, in die im Plot tatsächlich verwendeten Koordinaten erfolgt per Svg.translate. Das Ergibt im Ergebnis eine Architektur für die ColoredShapes, in der leicht die Form sowie die Farben des Icons angepasst werden können. Dafür müssen nur die Argumente an die Plot-Funktion verändert werden. Im Modul Util sind einige allgemein benutzbare Funktionen. Hauptsächlich für Listen aber auch ein paar andere.
Das Elm-Programm besteht aus 3 Modulen: Das Hauptmodul StudentsPerformanceInExams, Plots und Util. StudentsPerformanceInExams ist das Hauptmodul, dessen main-funktion verwendet wird. Das Model hat einige Einträge für das Verwalten der Http-Anfrage: In httpState wird gespeichert ob es gerade am Laden ist oder schon erfolgreich ist oder fehlgeschlagen ist. In fullTexts wird der empfangene Text aus der Http-Anfrage gespeichert. In error wird der Fehler gespeichert, falls es einen Fehler gibt. Falls alles gut läuft, dann wird zunächst aus der erhaltenen Html-Datei der csv-String extrahiert und dann an den csv-Decoder weitergegeben, der dann die Daten aufbaut und ebenfalls in das Model einspeichert. Im Model wird außerdem gespeichert welche Visualisierung gerade gezeigt wird. Beim Start des Programms wird zunächst einfach nur eine Tabelle mit allen Daten angezeigt. In einem select (Funktioniert nicht auf allen Browsern. Funktionsfähig unter Firefox.) kann man dann die Visualisierung auswählen. Dann wird noch das Model des Plots im Model gespeichert, welches besonders für die 2. Visualiserung notwendig ist, damit dort die Interaktionen funktionieren.
\includegraphics[scale=0.387]{Bilder/Model+Types.jpg}\\
Das Hauptmodul enthält im Grunde genommen nur die main-Funktion und alle ihre Bestandteile sowie alle Funktionen, die fest mit der Datenstruktur der spezifischen Daten zusammenhängt. In Plots sind alle Plots sowie die Datenverarbeitung, welche unabhängig von den spezifischen Daten verläuft (also nur noch Typen wie XyData oder Listen verwendet). Dort ist die Scatterplotfunktion vorzufinden, die in Visualisierung 1 verwendet wird. Diese musste nicht mehr verändert werden seit der letzten Übungsserie, in der sie verwendet wurde. Ebenso ist die ParallelCoordsPlot-Funktion in diesem Modul. Diese Funktion musste nur noch geringfügig erweitert werden im Vergleich zur Übung, um die Auswahl von 2 Dimensionen, die dann in einem Scatterplot dargestellt werden. Das aufwändigste war die neue coloredShapesPlot-Funktion zu erstellen, die die 3. Visualisierung aufbaut. Mit Icons hatten wir uns in der Übung nicht beschäftigt, sodass ich diese Funktion vollständig neu aufbauen musste. Für diesen Plot habe ich neue Datenstrukturen erstellt, die die notwendigen Daten Strukturiert an diese Plot-Funktion übergeben. Eines davon ist MultiDimNominalData.\\
\includegraphics[scale=0.35]{Bilder/coloredShapesPlot.jpg}\\ Dieser Typ ist ähnlich zu der bisher bekannten MultiDimData mit dem Unterschied, dass nicht nur die Beschriftung der Dimensionen notwendig ist, sondern auch die Beschriftung jedes einzelnen Wertes jeder Dimension, damit die Zuordnung der restlichen Attribute zu dem Wert möglich ist. Da die Punkte gruppiert nach durchschnittlicher Leistung sind, ist hier auch eine Liste von Listen von entsprechenden Punkten notwendig. Ein solcher Punkt ist analog dem MultiDimPoint mit dem Unterschied, dass die Daten selbst Strings sind. Auch notwendig für die Plotfunktion ist die Information zu den Icons selbst. Mit dem neuen Typ ColoredShape wird die Art der Shapes definiert: Für jeden Wert jeder Dimension wird eine Farbe gespeichert in insgesamt einer Liste von Listen von Farben. Außerdem werden die Koordinaten der Sektoren hier gespeichert. Zussätzlich wird die gesamte Breite und Höhe eines Icons abgespeichert. Diese werden mit der Konstruktorfunktion dieses Typs automatisch berechnet. Die Plot-Funktion selbst nimmt dann nur noch diese Daten und platziert die Icons mit den festgelegten Koordinaten, den Farben und den Werten immer hin. Die Umrechnung von den relativen Koordinaten, die in der Definition des Shapes gespeichert sind, in die im Plot tatsächlich verwendeten Koordinaten erfolgt ausschließlich per Svg.translate. Das Ergibt im Ergebnis eine Architektur für die ColoredShapes, in der leicht die Form sowie die Farben des Icons angepasst werden können. In folgendem Bild sieht man wie anpassbar der Aufruf dieses Plots ist:\\
\includegraphics[scale=0.437]{Bilder/callColoredShapesPlot.jpg}\\
Dafür müssen nur die Argumente der Plot-Funktion verändert werden. Im Modul Util sind einige allgemein benutzbare Funktionen. Hauptsächlich für Listen aber auch ein paar andere.
\section{Anwendungsfälle}
%Präsentieren sie für jede der drei Visualisierungen einen sinnvollen Anwendungsfall in dem ein bestimmter Fakt, ein Muster oder die Abwesenheit eines Musters visuell festgestellt wird. Begründen sie warum dieser Anwendungsfall wichtig für die Zielgruppe der Anwenderinnen ist. Diskutieren sie weiterhin, ob die oben beschriebene Information auch mit anderen Visualisierungstechniken hätte gefunden werden können. Falls dies möglich wäre, vergleichen sie die den Aufwand und die Schwierigkeiten ihres Ansatzes und der Alternativen.
......@@ -182,9 +187,13 @@ introductory chemistry course \grqq\ \cite{Vis1} werden die Leistungen von Stude
\glqq The Impact of Social Performance Visualization on Students\grqq\ \cite{Vis2} visualisiert die Leistungen von Studenten und vergleicht diese mit dem Mittelwert der Klasse. Es ist auf Studenten ausgelegt und soll ihnen helfen und sie motivieren besser zu lernen. In ihrer Übersichtsvisualisierung verwenden sie eine Darstellung, die einem Tachometer ähnelt, in der in einem Halbkreis verschiedene Leistungswerte, die relativ zum Durchschnitt der Klasse sind, dargestellt sind und ein Pfeil der anzeigt, wo sich gerade der Student, der die Anwendung verwendet sich bezogen auf die Leistung im Vergleich zur Klasse befindet. Außerdem verwenden sie ein Säulendiagramm, welches pro Thema anzeigt wie oft der Student den Selbsttest zu diesem Thema sich angeschaut hat, relativ zum Rest der Klasse. Und als 3. Visualisierung verwenden sie eine Treemap, welche den Themenbaum darstellt sowie zeigt die Farbe jedes Blatts in einer Farbskala an wie gut man das Thema kennt und wie gut der Rest der Klasse das Thema kennt. Warum in der Visualisierung eine Treemap notwendig ist, wird allerdings nicht klar. Sie beabsichtigen ja eigentlich den Vergleich der Leistung des Studenten mit dem Klassendurchschnitt, dafür wären dann ja beliebige Anordnungen von Rechtecken passend. Ihre Arbeit hat eine Ähnlichkeit zu dieser, da beide arbeiten die Leistungen von Studenten vergleichen mit dem Unterschied, dass diese Arbeit Gruppen von Studenten miteinander vergleicht um den Einfluss bestimmter Eigenschaften auf die Leistung herauszufinden während \cite{Vis2} einen Studenten mit dem Durchschnitt einer Gruppe vergleicht. Für diese unterschiedliche Vergleiche werden unterschiedliche Visualisierungstechniken verwendet.
\section{Zusammenfassung und Ausblick}
Fassen sie die Beiträge ihre Visualisierungsanwendung zusammen. Wo bietet sie für die Personen der Zielgruppe einen echten Mehrwert.
%Fassen sie die Beiträge ihre Visualisierungsanwendung zusammen. Wo bietet sie für die Personen der Zielgruppe einen echten Mehrwert.
Was wären mögliche sinnvolle Erweiterungen, entweder auf der Ebene der Visualisierungen und/oder auf der Datenebene?
%Was wären mögliche sinnvolle Erweiterungen, entweder auf der Ebene der Visualisierungen und/oder auf der Datenebene?
Die in diesem Bericht vorgestellte Visualisierungsanwendung stellt die Leistungen von Studentengruppen mit unterschiedlichen Eigenschaften gegenüber und ermöglicht es so den Anwendern den Einfluss dieser Eigenschaften auf die Leistung der Studenten zu analysieren und neue Erkenntnisse darüber zu gewinnen. Diese Erkenntnisse können dann von Studenten genutzt werden um bessere Entscheidungen für ihr Studium zu treffen ob sie beispielsweise zu dem Vorbereitungskurs hingehen oder nicht. Die Erkenntnisse können auch von Lehrenden genutzt werden um ihre Lehre zu verbessern. Es kann ihnen beispielsweise dabei helfen herauszufinden was sie besser machen können damit mehr Studenten die Prüfung bestehen.
Diese Visualisierungsanwendung kann auf vielfältige Weise noch erweitert werden. Die wichtigste Erweiterung ist es echte Daten von echten Veranstaltungen zur Analyse vorzunehmen um dadurch in der Lage zu sein konkreten Lehrenden und Studierenden in konkreten Veranstaltungen weiterzuhelfen. Aber auch die Visualisierungen können noch erweitert werden. Beispielsweise wurde in diesem Bericht erwähnt, dass es in der Überblickvisualisierung mit den farbigen Icons doch recht schwierig sein kann Informationen daraus zu gewinnen. Man könnte beispielsweise andere Icons dafür ausprobieren mit neuen Formen, Symbolen, Linien und Farben. Oder vielleicht auch ohne Farben. Vielleicht gibt es Icons in denen die Informationen einfacher wahrzunehmen sind. Außerdem könnte man die Studentengruppen noch weiter aufteilen als bisher. In dieser Anwendung wurden bisher immer alle Daten genommen und an einer Eigenschaft aufgeteilt und miteinander verglichen. Man könnte aber auch eine Eigenschaft an einem Wert festhalten und an einer weiteren Eigenschaft aufteilen und vergleichen. Oder auch ohne direkt aufzuteilen, sondern stattdessen in den bisherigen Plots gewisse Datenpunkte, die gewisse Eigenschaften erfüllen farbig markieren. So könnte man noch weitere Erkenntnisse gewinnen.
\section*{Anhang: Links}
\begin{itemize}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment