diff --git a/bericht/bericht.pdf b/bericht/bericht.pdf
index fd1af2fd2f1741fbb774b798634cd5a3def536bd..6d698a44b5e6fff222e450346079f8a9f3d4b21f 100644
Binary files a/bericht/bericht.pdf and b/bericht/bericht.pdf differ
diff --git a/bericht/bericht.tex b/bericht/bericht.tex
index 37651e34bf77946cd055cbfca1af7ef069d55224..63081c8d777dc18de3f83711506bbc57418798a8 100644
--- a/bericht/bericht.tex
+++ b/bericht/bericht.tex
@@ -99,7 +99,7 @@ zu erfüllen. Diese Visualisierungen sind:
\begin{itemize}
\item \textbf{Scatterplot:} Stellt jeweils zwei numerische Daten auf zwei Achsen dar und ermöglicht so die Analyse von
Korrelationen zwischen verschiedenen Variablen.
- \item \textbf{Parallel-Korrdinaten-Plot:} Zeigt alle numerischen Daten der Datenmenge in einer mehrdimensionalen
+ \item \textbf{Parallel-Koordinaten-Plot:} Zeigt alle numerischen Daten der Datenmenge in einer mehrdimensionalen
Visualisierung, um komplexe Zusammenhänge übersichtlich darzustellen.
\item \textbf{Baum-Datstellung:} Visualisiert alle Smartphone-Hersteller und deren Modelle aus der Datenmenge in einer
hierarchischen Struktur.
@@ -249,33 +249,163 @@ wertvolle Einblicke bieten und sie bei der Erreichung ihrer Ziele effektiv unter
\subsection{Präsentation der Visualisierungen}
In den folgenden Abschnitten werden die vier Visualisierungen der Anwendung detailliert beschrieben.
-\subsubsection{Visualisierung Scatterplot}
-\includegraphics[width=\textwidth]{img/Scatterplot.PNG}
+\subsubsection{Scatterplot}
+\includegraphics[width=\textwidth]{img/Scatterplot.PNG}\\
+\\
+Die erste Visualisierung ist ein Scatterplot, der Zusammenhänge zwischen verschiedenen Variablen entlang zweier Achsen darstellt.
+Die Datenwerte werden als Punkte in einem 2D - Koordinatensystem codiert und abgebildet. Jeder Punkt besitzt einen identischen
+Transparenzwert, wodurch überlappende Punkte leichter erkennbar sind: Einzelne Punkte erscheinen heller (hellgrau), während eine
+Ansammlung überlappender Punkte dunkler wirkt (dunkelgrau bis schwarz). Diese farbliche Gestaltung erleichtert es, viele Datenpunkte
+mit ähnlichen Werten von einzelnen Punkten zu unterscheiden.\\
+Eine weitere implementierte Funktion ist die Auswahlmöglichkeit der Variablen für die beiden Achsen. Nutzer können vordefinierte
+Variablen auswählen und diese auf einer der beiden Achsen darstellen lassen, um Korrelationen zwischen verschiedenen Variablen wie
+verbauter Hardware, Kundenbewertungen oder Preis zu verdeutlichen.\\
+Die Achsen sind linear dargestellt, was eine einfache und verständliche Vermittlung der Daten ermöglicht. Diese lineare Darstellung
+ist gut geeignet, da die ausgewählten Datenwerte in der Regel keine zu großen Abstände aufweisen.\\
+Zusätzlich wurden interaktive Funktionen zu den Punkten hinzugefügt. Wenn ein Punkt mit dem Mauszeiger überfahren wird, werden die
+genauen Datenwerte für beide Achsen sowie das Smartphone-Modell, das dieser Punkt repräsentiert, angezeigt. Beim Anklicken eines
+Punktes entsteht eine weitere Interaktion zwischen den verschiedenen Plots, die im Abschnitt \enquote{Interaktionen} detaillierter beschrieben wird.\\
+\\
+\textbf{erfüllte Anforderungen:}
+\begin{itemize}[itemsep=0pt]
+ \item Klarheit und Verständlichkeit der Darstellung
+ \item Vergleichbarkeit von Modellen (eingeschränkt, aber an zwei Variablen)
+ \item Darstellung von Korrelationen
+ \item Einfache Handhabung und Benutzerfreundlichkeit
+\end{itemize}
-\subsubsection{Visualisierung Parallele Koordinaten}
-\includegraphics[width=\textwidth]{img/ParalleleKoordinaten.PNG}
+\subsubsection{Parallel-Koordinaten-Plot}
+\includegraphics[width=\textwidth]{img/ParalleleKoordinaten.PNG}\\
+\\
+Der Parallel-Koordinaten-Plot bildet die Datenmenge auf ein mehrdimensionale Datendarstellung ab. In der Anwendung werden zehn
+Achsen dargestellt, die jeweils einen der zehn numerischen Werte eines Smartphones repräsentieren (darunter Preis, Bewertung usw.).
+Jedes Smartphone wird durch eine Linie dargestellt, die alle Achsen des Plots durchläuft. Dabei werden die Werte an den jeweiligen
+Achsen bestimmt und für jedes Smartphone-Modell eingetragen. So wird es möglich, den Zusammenhang aller numerischen Attribute der
+Smartphone-Datenmenge innerhalb einer einzigen Visualisierung darzustellen, um effizient mögliche schwache oder optimale
+Konfigurationen von Hardware, Preis und Kundenbewertungen zu ermitteln.\\
+Die Linienfarbe (blau) wurde so gewählt, dass sich die Beschriftungen an den Achsen (schwarz) gut davon abheben und deutlich lesbar
+sind, ohne visuell ineinander zu überlappen.\\
+Wie bei der ersten Visualisierung sind die Achsen linear skaliert. Um eine übersichtlichere Darstellung für die Anwender
+zu erreichen, wurden die Wertebeschriftungen an den Achsen weggelassen. Optional kann die Beschriftung der Achsenwerte
+eingeblendet werden, wenn sich der Mauszeiger über der Achse oder deren Beschriftung befindet. Diese Einblendung der Werte
+kann für präzisere Analysen nützlich sein.\\
+Eine weitere nützliche Interaktion bieten die <<< und >>> \enquote{Buttons}, mit denen die Reihenfolge der Achsen vertauscht werden kann. Dadurch
+können die Anwender benutzerdefinierte Reihenfolgen der Achsen erstellen. Eine andere Anordnung der Achsen kann eine neue Perspektive
+auf die Daten eröffnen und möglicherweise bessere, zielgerichtetere Ergebnisse liefern.\\
+Zusätzlich bietet die Visualisierung Filteroptionen, mit denen die Ergebnismenge im Plot eingeschränkt werden kann, um detailliertere,
+anwendungsorientierte Analysen durchzuführen. Die Datenmenge kann nach Smartphone-Marken und dem Vorhandensein bestimmter
+Smartphone-Funktionen (z.B. 5G, NFC, IR-Blaster) gefiltert werden.\\
+Beim Anklicken der Achsenbeschriftung über der Achse wechselt die Darstellung zu einem anderen Plot, was im Abschnitt \enquote{Interaktionen}
+detaillierter beschrieben wird.\\
+\\
+\textbf{erfüllte Anforderungen:}
+\begin{itemize}[itemsep=0pt]
+ \item Klarheit und Verständlichkeit der Darstellung
+ \item Interaktive Filteroptionen (Brand, 5G, NFC, IR-Blaster)
+ \item Vergleichbarkeit von Modellen (anhand von zehn Achsen)
+ \item Darstellung von Korrelationen
+ \item Einfache Handhabung und Benutzerfreundlichkeit
+\end{itemize}
-\subsubsection{Visualisierung Tree}
-\includegraphics[width=\textwidth]{img/Tree.PNG}
+\subsubsection{Tree}
+\includegraphics[width=\textwidth]{img/Tree.PNG}\\
+\\
+Für die dritte Visualisierung der Anwendung wurde eine hierarchische Baumdarstellung (Tree) gewählt. Diese Visualisierung ordnet
+den verschiedenen Smartphone-Marken die jeweiligen Modelle zu und ermöglicht es den Anwender, einen umfassenden Überblick über
+alle Modelle eines Herstellers zu erhalten.\\
+Dank benutzerfreundlicher Interaktionsmöglichkeiten und Navigationsoptionen können sich die Anwender auf das Wesentliche
+konzentrieren und effizient, auch ohne technisches Wissen, Analysen wie z.B. Marktanalysen durchführen. Zu diesen Optionen gehören
+das Zoomen in und aus verschiedenen Bereichen des Baumes, das Fokussieren auf einen bestimmten Abschnitt durch Anklicken eines
+Baumknotens (nicht Blattknoten) sowie das Navigieren durch den Baum durch Bewegen und Gedrückthalten des Mauszeigers.\\
+Die Knoten des Baumes sind nach ihren Bezeichnern sortiert (Hersteller, Model) und variieren in der Größe je nach Anzahl der ihnen untergeordneten
+Smartphone-Modelle. Diese Sortierung erleichtert das Auffinden spezifischer Knoten, während die unterschiedlichen Knotengrößen
+eine visuelle Darstellung der Anzahl untergeordneter Modelle bieten, wodurch die Übersichtlichkeit verbessert wird.\\
+Zusätzlich bietet die Baumdarstellung Filteroptionen, mit denen die Knotenanzahl im Baum eingeschränkt werden kann, um
+spezifische Smartphone-Modelle zu finden und weitere Analysen durchzuführen. Die Datenmenge kann nach Smartphone-Marken und dem
+Vorhandensein bestimmter Smartphone-Funktionen (z.B. 5G, NFC, IR-Blaster) gefiltert werden. Anzeigen informieren zudem über die
+aktuelle Anzahl der im Baum dargestellten Smartphone-Modelle und die Gesamtzahl der Smartphones in der Datenmenge.\\
+Die Datenmenge kann auch manuell reduziert werden, indem eine Anzahl zu entfernender Knoten angegeben wird. Diese Funktion wurde
+ursprünglich für Testzwecke eingeführt, um die Darstellung bei unterschiedlichen Knotengrößen im Baum zu testen. Es stellte sich
+jedoch heraus, dass eine Begrenzung des Baumes die Übersichtlichkeit erhöht, weshalb diese optionale Anpassungsmöglichkeit für die
+Anwender beibehalten wurde.\\
+Durch das Anklicken eines Blattknotens (Smartphone-Modells) gelangt man zu einer detaillierteren Visualisierung, die im Abschnitt
+\enquote{Interaktionen} näher beschrieben wird.\\
+\\
+\textbf{erfüllte Anforderungen:}
+\begin{itemize}[itemsep=0pt]
+ \item Klarheit und Verständlichkeit der Darstellung
+ \item Interaktive Filteroptionen (Brand, 5G, NFC, IR-Blaster)
+ \item Hierarchische Strukturen
+ \item Einfache Handhabung und Benutzerfreundlichkeit
+\end{itemize}
-\subsubsection{Visualisierung Starplot}
-\includegraphics[width=\textwidth]{img/Starplot.PNG}
+\subsubsection{Starplot}
+\includegraphics[width=\textwidth]{img/Starplot.PNG}\\
+\\
+Zusätzlich zu den drei bereits vorgestellten Visualisierungen wurde ein Starplot mit Vergleichsfunktion integriert, um die
+Möglichkeiten für effiziente Analysen durch weitere sinnvolle Interaktionen zu erweitern (die Interaktionen zwischen den Plots
+werden im Abschnitt \enquote{Interaktionen} detaillierter beschrieben).\\
+Die Starplot-Darstellung bietet der Zielgruppe die Möglichkeit, zwei Smartphones nebeneinander zu vergleichen. Ein Starplot ist
+eine sternförmige Darstellung mehrdimensionaler Daten, die in diesem Fall Informationen zu einem bestimmten Smartphone visualisiert.
+Die einzelnen Variablenwerte des Smartphones werden auf zehn Achsen (ähnlich dem Parallelkoordinaten-Plot) eingetragen und durch
+eine Linie miteinander verbunden, die sich zu einem Kreis schließt. Anhand dieser Linie können die Anwender an den Achsen ablesen,
+wie stark eine Hardwarekomponente, der Preis oder die Kundenbewertung im Vergleich zum Minimum und Maximum aller Smartphone-Modelle
+ausgeprägt ist.\\
+Im Designprozess wurde entschieden, zwei Starplots nebeneinander darzustellen, um einen direkten Vergleich zu ermöglichen und
+Unterschiede sowie Gemeinsamkeiten zwischen den Modellen einfach erkennen zu können.\\
+Die Starplots ändern sich je nach Eingabe der Smartphone-ID oder durch Interaktionen mit anderen Plots, sodass jeweils das
+entsprechende Modell dargestellt wird. Der exakte Wert, den ein Smartphone für eine bestimmte Variable aufweist, kann angezeigt
+werden, indem der Mauszeiger über den Achsenbezeichner bewegt wird.\\
+\\
+\textbf{erfüllte Anforderungen:}
+\begin{itemize}[itemsep=0pt]
+ \item Klarheit und Verständlichkeit der Darstellung
+ \item Vergleichbarkeit von Modellen (zwei nebeneinander)
+ \item Darstellung von Korrelationen (einigermaßen, da es sich auf ein Smartphone bezieht)
+ \item Einfache Handhabung und Benutzerfreundlichkeit
+\end{itemize}
\subsection{Interaktion}
-Die präsentierten Visualisierungstechniken müssen interaktiv zu einer Anwendung verknüpft werden.
-Die Interaktion mit einer Visualisierung soll in den anderen Visualisierungen zu einer Änderung führen.
-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. Wenn sie keine der geforderten Interaktionen umsetzen, erhalten Sie im gesamten Projekt deutlichen Punktabzug.
+Die plot-übergreifenden Interaktionen bieten eine effiziente und vorteilhafte Bedienung,
+die über die einzelnen Visualisierungen hinausgeht und zusätzliche Analysemöglichkeiten eröffnen. Innerhalb der
+Anwendung wurden drei Hauptinteraktionen dieser Art implementiert.
+\begin{itemize}
+ \item \textbf{Scatterplot -> Starplot} : Beim Klicken auf einen Datenpunkt im Scatterplot wechselt die Anwendung
+ zur Starplot-Darstellung und projiziert die Datenwerte des ausgewählten Smartphones auf das ältere (upgedatete) der beiden
+ vorhandenen Starplots. Dadurch kann der Anwender bei Bedarf alle Variablen des Smartphones, das im Scatterplot
+ ausgewählt wurde, einsehen und es gleichzeitig mit einem anderen Modell vergleichen. Diese Interaktion ist
+ besonders nützlich, wenn der Anwender von einer groben Analyse mehrerer Datenwerte (z.B. zur Identifizierung
+ optimaler Smartphone-Komponenten) zu einer detaillierten Analyse einzelner Modelle übergehen möchte.
+ So können einzelne Smartphone-Modelle hinsichtlich ihrer Komponenten, Kundenbewertungen und Preise miteinander
+ verglichen werden, um die eigene Produktionsplanung und -entwicklung zu optimieren.
+ \item \textbf{Parallel-Koordinaten-Plot -> Scatterplot} : Beim Klicken auf einen Achsenbezeichner (über der Achse)
+ im Parallel-Koordinaten-Plot wechselt die Darstellung zum Scatterplot und setzt die Variablen des angeklickten
+ Bezeichners sowie des nachfolgenden Bezeichners als Datenwerte für die x- und y-Achse fest. So kann der Anwender
+ die Linien zwischen zwei Achsen im Parallel-Koordinaten-Plot genauer aufschlüsseln und diese als Punkte in einem
+ zweidimensionalen Koordinatensystem auswerten. Dies ermöglicht eine detailliertere Analyse von Korrelationen
+ zwischen den beiden Variablen. Mit dieser Funktion können Smartphone-Komponenten im Verhältnis zu Preis oder
+ Bewertung übersichtlicher im Scatterplot untersucht werden.
+ \item \textbf{Tree -> Starplot} : Ähnlich wie bei der Interaktion im Scatterplot, führt das Klicken auf
+ einen Blattknoten im Baumdiagramm zur Starplot-Darstellung, wobei die Daten des ausgewählten Smartphones
+ im älteren der beiden Starplots aktualisiert werden. Diese Interaktion bietet eine umfassende Übersicht
+ über alle numerischen Daten eines angeforderten Modells. Auf diese Weise ermöglicht die Baumdarstellung
+ zunächst eine grobe Analyse der Konkurrenten (Hersteller) und ihrer Modelle mit optionalen Filtermöglichkeiten.
+ Im zweiten Schritt kann dann eine detaillierte Modellanalyse durchgeführt werden, die wertvolle Informationen
+ über die Stärken und Schwächen der Konfiguration eines Smartphone-Modells liefert. Diese Erkenntnisse können
+ direkt in den Planungs- und Entwicklungsprozess neuer, optimierter Smartphone-Modelle für den Markt einfließen.
+ \item \textbf{Buttons Plot Switch} : Die Anwendung bietet eine einfache Interaktion, bei der mittels Buttons
+ zwischen den verschiedenen Plots gewechselt werden kann. Diese Funktion erleichtert die Bedienung der Anwendung
+ und ermöglicht einen schnellen Wechsel zwischen den Visualisierungen.
+\end{itemize}
\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.
\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.
-\subsection{Anwendung Visualisierung Eins}
-\subsection{Anwendung Visualisierung Zwei}
-\subsection{Anwendung Visualisierung Drei}
+
+\subsection{Anwendung Scatterplot}
+\subsection{Anwendung Parallel-Koordianten-Plot}
+\subsection{Anwendung Tree}
+\subsection{Anwendung Starplot}
\section{Verwandte Arbeiten}
Führen sie eine kurze Literatursuche in der wissenschaftlichen Literatur zu Informationsvisualisierung und Visual Analytics nach ähnlichen Anwendungen durch. Diskutieren sie mindestens zwei Artikel. Stellen sie Gemeinsamkeiten und Unterschiede dar.
@@ -285,9 +415,50 @@ Fassen sie die Beiträge ihre Visualisierungsanwendung zusammen. Wo bietet sie f
Was wären mögliche sinnvolle Erweiterungen, entweder auf der Ebene der Visualisierungen und/oder auf der Datenebene?
+\newpage
\section*{Anhang: Git-Historie}
+\begin{tabular}{l l}
+ \textbf{Datum} & \textbf{Commit} \\
+ 2024-05-29 & InfoVisualProjekt erstellt \\
+ 2024-05-29 & install more elm packages \\
+ 2024-06-11 & csv Datei \\
+ 2024-06-11 & Csv Datei kopiert \\
+ 2024-06-11 & get csv data test \\
+ 2024-06-11 & get csv data gitlab test \\
+ 2024-06-11 & get csv data index gitlab test \\
+ 2024-06-11 & url kommentar hinzugefügt \\
+ 2024-06-19 & einlesen korrigiert \\
+ 2024-06-23 & Scatterplot Basic hinzugefügt und einlesen geändert \\
+ 2024-06-23 & Parser korrigiert \\
+ 2024-06-23 & Buttons aus anderer Elm Datei: update ausprobiert \\
+ 2024-06-24 & Html.select ausgetestet \\
+ 2024-06-25 & css ausprobiert \\
+ 2024-06-25 & update main.js \\
+ 2024-06-26 & Scatterplot Attribute wechselbar \\
+ 2024-06-26 & padding angepasst \\
+ 2024-06-26 & Kommentare entfernt und Types imported \\
+ 2024-06-26 & Vorbereitung Parallel Koordinaten \\
+ 2024-07-23 & Grundgerüst ParallelKoordinaten erstellt und neu Model.elm für bessere Ordnung \\
+ 2024-07-24 & Grundgerüst Tree erstellt, ExtendedFunctions für map10 und listmap10 \\
+ 2024-08-09 & StarPlot begonnen, Change Position Parallel, Buttons für wechseln Plot \\
+ 2024-08-13 & Starplot fertig, input ID, Interaktion: Scatterplot -> Starplot, Tree -> Starplot \\
+ 2024-08-13 & ParallelPlot Achsen Beschriftung unterhalb nicht sichtbar behoben \\
+ 2024-08-13 & Starplot vergleich (2 Starplots mit Änderungsfunktion), \\
+ & Änderung an Main, Model und Starplot \\
+ 2024-08-14 & Interaktion Parallel und ScatterPlot, Fehler behoben bei Scatterplot mit Attribut \\
+ & Sichtbarkeit in select, Filter Optionen Tree umgesetzt \\
+ 2024-08-15 & Filter ParallelCoordinates, Tree Knotengrößen Anpassung und Text Umbruch in \\
+ & Leaf angepasst \\
+ 2024-08-15 & Css bei allen Plots, etwas Gestaltung der Webseite (Caption, Menü für Plots \\
+ & und Beschreibung), Anpassung Submit Button update Fehlerbehandlung \\
+ 2024-08-16 & RAM Scatterplot Fehler behoben, Einheiten hinzugefügt, Plot-Beschreibung \\
+ & hinzugefügt, RAM Daten fehlerhaft in csv für ein paar Smartphones angepasst \\
+ 2024-08-20 & elm.json test-dependencies Eintrag entfernt \\
+ 2024-08-21 & Hints hinzugefügt bei Starplot in Beschreibung \\
+ 2024-08-xx & Code aufgeräumt (Kommentar-Code entfernt)
+\end{tabular}
+\newpage
\printbibliography
-
\end{document}
diff --git a/bericht/literatur.bib b/bericht/literatur.bib
index 1b015a8c5c6ca9fadeac83826dec48e2400dc70e..329420f05f33311d152d045412f1f0e4587a6a81 100644
--- a/bericht/literatur.bib
+++ b/bericht/literatur.bib
@@ -1,25 +1,3 @@
-% This file was created with JabRef 2.10.
-% Encoding: UTF-8
-
-
-@inbook{Munzner2008,
- title = {Process and Pitfalls in Writing Information Visualization Research Papers},
- author = {Munzner, Tamara},
- editor = {Kerren, Andreas
- and Stasko, John T.
- and Fekete, Jean-Daniel
- and North, Chris},
- pages = {134--153},
- publisher = {Springer Berlin Heidelberg},
- year = {2008},
- address = {Berlin, Heidelberg},
- abstract = {The goal of this chapter is to help authors recognize and avoid a set of pitfalls that recur in many rejected information visualization papers, using a chronological model of the research process. Selecting a target paper type in the initial stage can avert an inappropriate choice of validation methods. Pitfalls involving the design of a visual encoding may occur during the middle stages of a project. In a later stage when the bulk of the research is finished and the paper writeup begins, the possible pitfalls are strategic choices for the content and structure of the paper as a whole, tactical problems localized to specific sections, and unconvincing ways to present the results. Final-stage pitfalls of writing style can be checked after a full paper draft exists, and the last set of problems pertain to submission.},
- booktitle = {Information Visualization: Human-Centered Issues and Perspectives},
- doi = {10.1007/978-3-540-70956-5_6},
- isbn = {978-3-540-70956-5},
- url = {https://doi.org/10.1007/978-3-540-70956-5_6}
-}
-
@article{Daten,
author = {Nitya verma},
title = {Smartphone Dataset (Cleaned)},