Section 3 abgeschlossen

Bericht/bericht.tex

@@ -123,9 +123,32 @@ Diese Visualisierung zeigt gut wie die Leistung der Studenten vom Bildungsgrad d
 %Weiterhin müssen sie begründen, warum die gewählte visuelle Kodierung der Daten für das zulösenden Problem passend ist.
 Es gibt auch Alternativen wie man Mehrdimensionale Daten darstellen kann: beispielsweise Chernoff-Gesichter, Sternkoordinaten oder Sternförmige Koordinaten. Aber keine dieser Alternativen ermöglicht es so einfach die Dimensionen miteinander zu vergleichen wie die Parallelen Koordinaten: Chernoff-Gesichter bilden Elemente auf einer Fläche. Aufgrund der Kompliziertheit jedes Gesichts ist es schwierig den Vergleich wahrzunehmen. Außerdem ist es schwierig bei ihnen konkrete Werte abzulesen. Eignet sich also nicht so gut für Vergleiche. Sternkoordinaten platzieren Punkte auf einer Fläche, deren Werte der verschiedenen Dimensionen nicht mehr eindeutig ablesbar sind, daher eignet sich das auch nicht für Vergleiche. Sternförmige Koordinaten sind da etwas näher dran: Die Punkte in Sternförmigen Koordinaten werden genauso dargestellt wie in parallelen Koordinaten mit dem einzigen Unterschied, dass alle Achsen sich in einem Punkt treffen und sternförmig voneinander gehen. Bei diesen Koordinaten wäre ein Vergleich machbar, da man 2 Werte von 2 Dimensionen anhand der Entfernung zum Mittelpunkt vergleichen könnte. Allerdings ist es schwieriger die Längen von 2 nichtparallelen Linien, die sich in einem Endpunkt treffen zu vergleichen, als den Anstieg einer geraden Linie wahrzunehmen. Daher sind parallele Koordinaten die beste Wahl.
 \subsubsection{Visualisierung Drei}
+%Präsentieren sie die visuelle Abbildungen und Kodierungen der Daten und Interaktionsmöglichkeiten. 
+Zum besseren Verständnis der Visualisierung wird oberhalb der eigentlichen Visualisierung die Legende angezeigt. Dort sieht man welcher Wert von welcher Dimension durch welche Farbe dargestellt wird. Die Farben wurden dabei so gewählt, dass sie möglichst aussagekräftig sind. So wurde beim Geschlecht für männlich blau und für weiblich rot gewählt und bei der Vorbereitung für die Prüfung grün für bestanden und rot für kein Vorbereitungskurs abgeschlossen. Zur Legende gehört auch das weiß gefärbte Icon. Durch das Drübergehen mit der Maus über die einzelnen Flächen dieses Icons wird rechts dargestellt welche Dimension in diesem Teil des Icons dargestellt wird. Bei jedem Icon wird während die Maus auf einen bestimmten Sektor zeigt dieser Sektor schwarz gefärbt, sodass man besser sieht auf welchen Sektor man gerade zeigt. So sieht man im folgenden Bild, dass im rechten oberen Icon der rechte obere Sektor von der im Bild unsichtbaren Maus betreten wird. Deshalb ist die Fläche schwarz. Wie bei dem Legende-Icon werden nun rechts die Daten zu diesem Sektor angezeigt. Es wird immer die durchschnittliche Leistung angezeigt und der in diesem Sektor kodierte Wert. Die Visualisierung ist so aufgebaut, dass in jeder Zeile alle Icons die selbe durchschnittliche Leistung haben. Ganz oben mit der höchsten Leistung von 100 und weiter nach unten mit einer immer niedrigeren Leistung. Auf diese Weise sieht man auch die Verteilung der durchschnittlichen Leistung, wobei Leistungswerte zu denen es keine Studenten gibt weggelassen werden. Klickt man auf einen der Sektoren eines Icons, so werden die Daten an dieser Dimension aufgespaltet und in einem QQ-Plot der 1. oder 2. Visualisierung gegenübergestellt. Ob die 1. oder 2. Visualisierung geöffnet wird hängt davon ab ob die Dimension binär ist, also nur 2 mögliche verschiedene Werte hat oder mehr. Bei einer binären Dimension wird die 1. Visualisierung geöffnet, ansonsten wird die 2. Visualisierung geöffnet.
+
+%Sie müssen  begründen, warum und wiegut ihre Designentscheidungen die erstellten Anforderungen erfüllen.
+Diese Visualisierung gibt einen Überblick darüber welche Studenten eher dazu geneigt sind bessere Leistungen zu erzielen und welche Studenten eher dazu geneigt sind schlechtere Leistungen zu erzielen. So kann man in dieser Visualisierung gleichzeitig mehrere Einflussfaktoren miteinander vergleichen und schauen welche Bedingungen erfüllen die Studenten, die gute Leistungen erzielen und welche Bedingungen erfüllen die Studenten, die schlechte Leistungen erzielen. So ist beispielsweise auffallend, dass die meisten Studenten, die gute Leistungen erzielen mindestens eine von 2 Bedingungen erfüllen: sie haben den Vorbereitungskurs abgeschlossen oder ihre Eltern haben einen hohen Bildungsgrad. Studenten, die einen Bildungsgrad geringer als blau haben und den Vorberteitungskurs nicht abgeschlossen haben sind eher selten unter den besten Leistungen zu finden. Ebenso kann man erkennen, dass unter den schlechtesten Leistungen die meisten den Vorbereitungskurs nicht abgeschlossen haben und  / oder deren Eltern einen niedrigen Bildungsgrad haben. Durch die vielen Daten die in dieser Visualisierung dargestellt sind, ist es aber auch nicht leicht in dieser Menge von bunten Icons Informationen zu finden. Da muss man etwas genauer hingucken und sich erstmal mit der Codierung der Daten, die oben in der Legende gut abgelesen werden kann, vertraut machen um Aussagen treffen zu können. Genau deswegen dient diese Visualisierung auch nur dem Überblick und gibt die Interaktionsmöglichkeit zu anderen Visualisierungen zu wechseln, in denen man die Daten etwas genauer betrachten kann.
+
+\includegraphics[scale=0.52]{Bilder/Visualisierung3.jpg}
+
+%Weiterhin müssen sie begründen, warum die gewählte visuelle Kodierung der Daten für das zulösenden Problem passend ist.
+Diese Icons ermöglichen kompakt mehrdimensionale Daten darzustellen, sodass man gleichzeitig alle Daten auf einen Bildschirm bekommen kann und trotzdem die verschiedenen Werte der verschiedenen Daten ablesen kann. Die Verwendung von Farbe ist dabei notwendig um auch Dimensionen darzustellen, die mehr als 2 verschiedene Werte einnehmen können. Ebenso bauen Menschen gerne zu Farben bestimmte Assoziationen auf. So würde beispielsweise jeder dem männlichen Geschlecht einen Blauton vergeben und dem weiblichen Geschlecht einen Rotton. Solche Assoziationen bei der Wahl der Farben zu verwenden hilft auch den Betrachtern die Daten aus den Farben wieder zu decodieren. Solche Assoziationen wurden bei der Visualisierung auch versucht bei den nominalen Daten, die übrigens auch binär sind, zu verwenden. Die Daten Rasse / ethnische Gruppe, die nur von A bis E durchnummeriert sind und die Daten Bildungsgrad der Eltern können als Ordinale Daten betrachtet werden. Für Ordinale Daten passt gut eine Farbabstufung. Um die verschiedenen Werte aber trotzdem gut voneinander unterscheiden zu können wurde eine Farbabstufung gewählt, die möglichst gut voneinander verschiedene Farben beinhaltet und dabei auch eine recht bekannte Farbabstufung sein sollte: Weiß, Grün, Blau, Purpur, Gelb, Rot. Die Sortierung der Daten nach durchschnittlicher Punktzahl ermöglicht es leicht zu erkennen wo Icons zu Studenten mit hoher Leistung und wo Icons zu Studenten mit geringerer Leistung sind, sodass Vergleiche in Bezug auf die Leistung vereinfacht werden. Alternativ statt solcher Bunter Icons könnte man beispielsweise Chernoff-Gesichter verwenden. Allerdings sollte es schwierig sein beispielsweise anhand der Breite der Nase den Bildungsgrad abzulesen, sodass Chernoff-Gesichter für nicht-binäre Daten nicht so gut geeignet sind, während bei farbigen Icons verschiedene Farben genutzt werden können. Ebenso passen Farben gut zu nominalen und ordinalen Daten.
+
 
 \subsection{Interaktion}
-Erklären sie die möglichen Interaktionen mit den einzelnen Visualisierungen und die möglichen Verknüpfungen zwischen ihnen. Begründen Sie warum die konkreten Interaktionen umgesetzt wurden und welche Zwecke für die Anwenderinnen mit ihnen unterstützt werden. Begründen sie ebenfalls warum sie andere Interaktionsmöglichkeiten nicht umgesetzt haben. 
+%Erklären sie die möglichen Interaktionen mit den einzelnen Visualisierungen und die möglichen Verknüpfungen zwischen ihnen. Begründen Sie warum die konkreten Interaktionen umgesetzt wurden und welche Zwecke für die Anwenderinnen mit ihnen unterstützt werden. Begründen sie ebenfalls warum sie andere Interaktionsmöglichkeiten nicht umgesetzt haben.
+
+Bei der 1. Visualisierung (2D-Plot) kann man mit der Maus über die einzelnen Punkte gehen. Wenn die Maus auf einen der abgebildeten Punkte zeigt, dann wird dieser Punkt farblich hervorgehoben, damit die Nutzer einfacher erkennen können auf welchen Punkt sie gerade zeigen. Ebenso werden die genauen Koordinaten des Punktes eingeblendet, sodass die beiden Werte des selben Quantils besser miteinander verglichen werden können.
+
+Bei der 2. Visualisierung (multidimensionaler Plot) kann man mit der Maus über die Dimensionsachsen gehen. Ist die Maus über einer solchen Achse, dann wird die Beschriftung der Achse eingeblendet. So kann man während die Maus nicht über der Achse ist, alle Linien genau erkennen und während die Maus über einer Achse ist, stört die Beschriftung ein wenig bei der genauen Erkennung der Linien, dafür kann man grob die Werte der Linien ablesen. Geht man mit der Maus über eines der Dreiecke oben, so signalisiert das Dreieck durch einen Helligkeitsunterschied, dass die Maus gerade auf das Dreieck zeigt. Und einen klick auf das Dreieck tauschen 2 benachbarte Dimensionen ihre Plätze. So können Betrachter alle möglichen Paare von Dimensionen nebeneinander legen und diese so einfacher miteinander vergleichen. Ebenso hilft das wenn man die Dimensionen nach eigenen bestimmten Eigenschaften sortieren will, so kann man das gleich in der Visualisierung machen. Beispielsweise könnte man absteigend sortieren nach der niedrigsten Leistung oder nach der höchsten Leistung oder auch nach der geschätzten mittleren Leistung.
+
+Bei der 3. Visualisierung (Überblick) gibt es Interaktionsmöglichkeiten mit den Icons. Beim Drübergehen mit der Maus wird der Sektor des Icons, auf welches gerade die Maus zeigt schwarz, damit man erkennt auf welchen Sektor man gerade zeigt. Ebenso wird rechts die durchschnittliche Leistung des Studenten, welcher durch dieses Icon dargestellt wird angezeigt sowie der decodierte Wert des Sektors. Bei dem weißen Icon der Legende wird stattdessen rechts dargestellt, dass es sich um die Legende handelt und der Name der Dimension des Sektors wird auch dargestellt. Das Legenden-Icon ist notwendig, damit Nutzer sich einfacher mit der Codierung der Daten vertraut machen können. Bei den anderen Icons wird rechts der decodierte Wert dargestellt, für den Fall, dass Nutzer gerade vergessen haben welchen Wert diese Farbe repräsentiert. Auch das hilft diese Visualisierung zu verstehen. Es wäre anstrengender für die Nutzer jedes Mal zurück nach oben zur Legende zu schauen. Die durchschnittliche Leistung wird rechts angezeigt, damit man sieht welche Leistung das Icon hat. Da anderweitig die genaue Leistung nicht abgelesen werden kann, ist das notwendig.
+
+Die 2. Visualisierung ist mit der 1. verknüpft: Wenn man 2 Achsen durch klicken auf diese ausgewählt hat, dann werden in der ersten Visualisierung die 2 Datenreihen gegenüber gestellt, sodass man diese 2 Dimensionen einfacher miteinander vergleichen kann. Da der eindimensionale Abstand im 2D-Plot einfacher wahrgenommen werden kann als unterschiedliche Neigungen von Geraden im multidimensionalen Plot, vereinfacht diese Interaktionsmöglichkeit den Vergleich.
+
+Die 3. Visualisierung ist mit der 2. und der 1. verknüpft: Wenn man auf einen Sektor eines Icons klickt, dann werden die gesamten Daten an der Dimension dieses Sektors aufgespalten und die Leistungen der verschiedenen Werte dieser Dimension werden dann entweder in der 1. oder in der 2. Visualisierung gegenübergestellt. Welche der beiden Visualisierungen gewählt wird, hängt davon ab wie viele mögliche Werte diese Daten haben können. Gibt es nur 2 mögliche Werte, so werden nur 2 Dimensionen benötigt und es wird in der 1. Visualisierung angezeigt. Gibt es mehr als 2 mögliche Werte, so kann das nicht mehr in einem 2D-Plot dargestellt werden und dann wir es in der 2. Visualisierung dargestellt. Diese Interaktionsmöglichkeit ermöglicht es zunächst den Benutzern sich einen Überblick in der 3. Visualisierung zu verschaffen und dann an einem beliebigen Sektor die Daten aufzuspalten und miteinander genauer vergleichen zu können.
+
+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?