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

section 4 abgeschlossen

parent f25b61c1
No related branches found
No related tags found
No related merge requests found
No preview for this file type
......@@ -151,9 +151,10 @@ Die 3. Visualisierung ist mit der 2. und der 1. verknüpft: Wenn man auf einen S
Damit unterstützen die Visualisierungen so ziemlich alle sinnvolle Interaktionsmöglichkeiten. Eine Interaktionsmöglichkeit, die auf der ersten blick sinnvoll zu sein scheint wäre beispielsweise bei der 2. Visualisierung noch hinzufügen, dass beim Drübergehen mit der Maus über eine Linie die Koordinaten dieser Linie angezeigt werden. Das würde den Vergleich sicherlich vereinfachen, wenn man die genauen Zahlen sieht, allerdings gibt es sehr viele Linien im Plot der parallelen Koordinaten, sodass es schwierig sein sollte genau eine Linie zu treffen. Außerdem würden die Zahlen der Koordinaten über der ohnehin schon vollen Visualisierung schweben und sicherlich nicht besonders einfach zu lesen sein, wenn andere Linien darüber liegen. Ebenso würde diese Interaktionsmöglichkeit es verhindern, dass Nutzer die Linien mit der Maus verfolgen, was für viele Nutzer sicherlich nicht so gut wäre. Denn beim verfolgen einer Linie mit der Maus würden dann ständig verschiedene Zahlen erscheinen, da man immer wieder auf andere Linien zeigt, sodass der Bildschirm quasi anfängt zu flackern, was dem Wahrnehmen der Visualisierung ordentlich stören würde.
\section{Implementierung}
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.
%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.
\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.
......
This diff is collapsed.
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