diff --git a/bericht/bericht.pdf b/bericht/bericht.pdf
index 6d698a44b5e6fff222e450346079f8a9f3d4b21f..42ccc63eb41ac0ece5115e39aa395f89ac8f5f66 100644
Binary files a/bericht/bericht.pdf and b/bericht/bericht.pdf differ
diff --git a/bericht/bericht.tex b/bericht/bericht.tex
index 63081c8d777dc18de3f83711506bbc57418798a8..b94f69f13d5e52d96a43d341163c10d522cae6ed 100644
--- a/bericht/bericht.tex
+++ b/bericht/bericht.tex
@@ -8,6 +8,7 @@
\usepackage{enumitem}
\usepackage{csquotes}
\usepackage{graphicx}
+\usepackage{subcaption}
% Dimensionen bitte nicht ändern.
\usepackage[left=2cm, right=2cm, top=2cm, bottom=2cm, bindingoffset=1cm, includeheadfoot]{geometry}
%Zeilenabstand bitte nicht ändern
@@ -109,6 +110,7 @@ zu erfüllen. Diese Visualisierungen sind:
In den folgenden Abschnitten werden die verwendeten Daten, die erstellten Visualisierungstechniken und deren Umsetzung
und deren Anwendungensfälle detailliert beschrieben.
+\newpage
\section{Daten}
Die verwendeten Daten stammen von Kaggle\cite{Daten} und liegen im CSV-Format vor. Diese Datensammlung umfasst Informationen
zu verschiedenen Hardware-Komponenten, Preisen, Bewertungen und weiteren Merkmalen einer großen Anzahl älterer und aktueller
@@ -156,18 +158,18 @@ Beschriftung oder als Filter. Fehlende Datenwerte wurden in Elm als Nothing-Wert
\\
\textbf{Verarbeitungschritte:}
\begin{enumerate}[]
- \item Auswahl der Daten (nach Sinnhaftigkeit für Projekt)
- \item Zuordnung der Daten zu einer Arten (numerische vergleichbare Werte, Wahrheitswerte, textuelle Beschreibungen)
- \item Falls nötig manuelle Anpassung einzelner (fehlerhafter) Werte
- \item Parsen der Datenwerte von der CSV-Datei:
+ \item Auswahl der Daten nach ihrer Relevanz für das Projekt
+ \item Zuordnung der Daten zu Kategorien (numerische vergleichbare Werte, Wahrheitswerte, textuelle Beschreibungen)
+ \item Falls erforderlich, manuelle Korrektur einzelner fehlerhafter Werte
+ \item Parsen der Datenwerte aus der CSV-Datei:
\begin{itemize}
- \item Falls numerischer Wert in Zeichenkette - extrahieren durch entfernen der Textinhalte und parsen zu Datentyp
- \item Falls numerischer Wert - extrahieren und parsen zu Datentyp
- \item Falls Wahrheitswert - in Elm Wahrheitwert übersetzen
- \item Falls Wert nicht vorhanden (egal welcher Art) - in Elm Nothing übersetzen
- \item sonst - als Zeichenkette speichern
+ \item Bei numerischen Werten in Zeichenketten: Extraktion durch Entfernen von Textinhalten und Umwandlung in den entsprechenden Datentyp
+ \item Bei numerischen Werten: Extraktion und Umwandlung in den entsprechenden Datentyp
+ \item Bei Wahrheitswerten: Übersetzung in Elm-Wahrheitswerte
+ \item Bei fehlenden Werten (unabhängig von der Art): Übersetzung in Elm-Nothing
+ \item Andernfalls: Speicherung als Zeichenkette
\end{itemize}
- \item Speicherung der Daten im Model
+ \item Speicherung der geparsten Daten im Model
\end{enumerate}
Anmerkung: Da bei einigen wenigen Smartphone-Modellen in der CSV-Datei falsche Datenwerte für den RAM und den internen Speicher
vorlagen, wurden diese Daten korrigiert oder ergänzt. Beispielsweise waren bei einigen Modellen RAM und interner Speicher
@@ -187,6 +189,7 @@ oder einer bestimmten Zeit verwendete Hardware ermöglichen, was helfen würde,
und -planung auszuschließen. Die Daten zu den verkauften Einheiten könnten zudem den tatsächlichen Erfolg eines Modells
verdeutlichen, anstatt sich ausschließlich auf Kundenbewertungen zu stützen.
+\newpage
\section{Visualisierungen}
\subsection{Analyse der Anwendungsaufgaben}
Um das Zielproblem zu lösen, müssen die Anwender mehrere spezifische Anwendungsaufgaben bearbeiten. Diese
@@ -369,7 +372,7 @@ werden, indem der Mauszeiger über den Achsenbezeichner bewegt wird.\\
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}
+\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
@@ -398,10 +401,114 @@ Anwendung wurden drei Hauptinteraktionen dieser Art implementiert.
und ermöglicht einen schnellen Wechsel zwischen den Visualisierungen.
\end{itemize}
+\newpage
\section{Implementierung}
+Während des Projekts wurde eine Visualisierungsanwendung in Elm entwickelt, die in mehrere Module unterteilt
+ist. Für jede der vier Visualisierungen wurde ein eigenes Modul erstellt, das alle wichtigen Funktionen
+für die Gestaltung und Interaktionen der jeweiligen Darstellung bereitstellt (Scatterplot.elm,
+ParallelCoordinates.elm, TreeView.elm, Starplot.elm). Zur Organisation und Integration aller
+Visualisierungen dient das Modul Main.elm, welches als Startpunkt des Elm-Programms fungiert. Es beinhaltet
+die Initialisierung des Modells (Model.elm), die Update-Funktionen für Interaktionen sowie die allgemeine
+Auswahl, welche Visualisierung dargestellt werden soll (View). Darüber hinaus werden in Main.elm die Daten
+aus der CSV-Datei in eine bestimmte Datenstruktur geparsed, die im Modul SmartPhoneType.elm definiert ist.
+Um diese Aufgaben zu erfüllen, importiert Main.elm alle zuvor genannten Module sowie zusätzliche Elm-Pakete.\\
+\\
+Die aus der CSV-Datei geparsten Daten werden im Modell (siehe Abb. 1(a)) als eine Liste vom Typ Smartphone
+gespeichert (siehe Abb. 1(b)). Diese Liste enthält alle möglichen Attribute eines Smartphones, die aus der
+CSV-Datei extrahiert werden konnten, wie z. B. Preis, Bewertung und verschiedene Hardware-Details.\\
+\begin{figure}[h]
+ \begin{subfigure}[c]{0.4\textwidth}
+ \includegraphics[width=\textwidth]{img/SmartphoneType.PNG}
+ \subcaption{SmartPhoneType}
+ \end{subfigure}
+ \begin{subfigure}[c]{0.6\textwidth}
+ \includegraphics[width=\textwidth]{img/Model1.PNG}
+ \subcaption{Modelausschnitt}
+ \end{subfigure}
+ \caption{SmartPhoneType und Modelausschnitt}
+\end{figure}
+\\
+Das Modell wird hauptsächlich zur Verwaltung der verschiedenen Zustände der Visualisierungs-Interaktionen und
+zur Speicherung der Smartphone-Daten verwendet. Das Attribut data enthält die Liste der geparsten Smartphones.
+Die weiteren Attribute dienen der Zustandsverwaltung der Darstellung, wie zum Beispiel scatterplotOptions
+(für Scatterplot-Optionen) und plotVisible (um anzugeben, welche Plots aktuell dargestellt werden sollen).\\
+\\
+Die ScatterPlotOptions (siehe Abb. 2(a)) enthalten Informationen zu den aktuellen Attribut- und Einheitenbezeichnern
+an den Achsen sowie eine Liste der Werte für diese Attribute.\\
+Die ParallelPlotOption (siehe Abb. 2(d)) speichert Zustandsinformationen zur Reihenfolge der Achsen (Bezeichner,
+Einheiten und Werte) sowie zusätzliche Filteroptionen.\\
+Die TreeOption (siehe Abb. 2(c)) enthält Informationen über die Zoom-Zustände, ausgewählte Filteroptionen und
+manuell entfernte Knoten.\\
+Die StarPlotOption (siehe Abb. 2(b)) speichert Informationen zu den zwei aktuellen Modell-IDs für beide Starplots,
+sowie Eingaben für die IDs und den Zustand, welches Starplot als nächstes bei einer Interaktion mit anderen Plots
+überschrieben werden soll.\\
+\begin{figure}[h]
+ \begin{subfigure}[c]{0.5\textwidth}
+ \includegraphics[width=\textwidth]{img/Model2.PNG}
+ \subcaption{ScatterPlotOPtion}
+ \end{subfigure}
+ \begin{subfigure}[c]{0.5\textwidth}
+ \includegraphics[width=\textwidth]{img/Model6.PNG}
+ \subcaption{StarPlotOption}
+ \end{subfigure}
+ \begin{subfigure}[c]{0.5\textwidth}
+ \includegraphics[width=\textwidth]{img/Model5.PNG}
+ \subcaption{TreeOption}
+ \end{subfigure}
+ \begin{subfigure}[c]{0.5\textwidth}
+ \includegraphics[width=\textwidth]{img/Model3.PNG}
+ \subcaption{ParallelPlotOption}
+ \end{subfigure}
+ \caption{Teile vom Model}
+\end{figure}
+\\
+Die FilterOption (siehe Abb. 3), die bei den ParallelPlotOption und TreeOption verwendet wird, enthält Zustände
+zu den ausgewählten Filtern. Dazu gehören der gewählte Hersteller und das Vorhandensein bestimmter
+Smartphone-Funktionen wie 5G oder NFC.\\
+\begin{figure}[h]
+ \center
+ \includegraphics[]{img/Model4.PNG}
+ \caption{FilterOption}
+\end{figure}
+\\
+Das letzte Modul ExtendedFunctions.elm enthält zusätzliche erstellte Funktionen wie map10 und listmap10.
+Diese ähneln den in Elm vorhandenen Funktionen, bieten jedoch Unterstützung für mehr Parameter. Die Funktion
+map10 ist vergleichbar mit Maybe.map, und listmap10 ähnelt List.map, nur dass beide Funktionen jeweils 10
+Parameter verarbeiten können. Da diese Funktionen die Möglichkeiten der Sprache Elm erweitern und für die
+Parallelkoordinaten-Visualisierung benötigt wurden, um Attribute und Listen auf eine Funktion abzubilden,
+wurden sie in einem separaten Modul bereitgestellt.\\
+\\
+Dank der Übungen gestaltete sich die Umsetzung einiger Plots einfacher als ursprünglich erwartet. Der Aufwand
+für den Scatterplot und den Parallelen-Koordinaten-Plot war relativ gering, da größere Teile aus den vorhandenen
+Übungsaufgaben übernommen werden konnten und nur kleinere Anpassungen, wie etwa neue Interaktionen oder
+Designänderungen, nötig waren.\\
+Anders verhielt es sich bei den beiden anderen Plots (Tree und Starplot), die von Grund auf geplant und
+recherchiert werden mussten.
+Für den Tree-Plot war es erforderlich, nach neuen Paketen zu suchen, um die Navigation durch den Baum für den
+Anwender so einfach wie möglich zu gestalten und ein ansprechendes Design zu erzielen. Beim Starplot war zwar
+keine Einarbeitung in neue Pakete nötig, jedoch mussten aufwendigere Designs erstellt, Interaktionen hinzugefügt
+und das grundlegende Gerüst für den Starplot komplett neu entwickelt werden. Insgesamt lässt sich sagen, dass die
+Plots, die in den Übungen behandelt wurden, mit weniger Aufwand umgesetzt werden konnten als der Tree-Plot mit
+einem anderen Paket und der Starplot.\\
+\\
+Im Folgenden werden einige wichtige Elm-Pakete, die bei der Implementierung verwendet wurden, genannt und kurz deren Einsatz erläutert:
+\begin{itemize}
+ \item \textbf{BrianHicks/elm-csv und NoRedInk/elm-json-decode-pipeline}: Diese Pakete wurden für das Parsen der CSV-Daten verwendet.
+ \item \textbf{elm-community/typed-svg}: Diente zur Erstellung von SVG-Grafiken in allen Plots.
+ \item \textbf{elm-community/list-extra}: Ermöglichte das einfache Ändern der Reihenfolge von Elementen in einer Liste: insbesondere
+ genutzt im Parallelen-Koordinaten-Plot, um die Achsen zu vertauschen.
+ \item \textbf{gampleman/elm-visualization und gampleman/elm-rosetree}: Eingesetzt zur Darstellung des Baums.
+ \item \textbf{folkertdev/one-true-path-experiment}: Verwendet für die Darstellung von Linien (Pfaden) in den Parallelen-Koordinaten- und Starplots.
+ \item \textbf{myrho/elm-round}: Zum Runden von Float-Zahlen auf zwei Dezimalstellen.
+ \item \textbf{avh4/elm-color}: Diente zur Farbgestaltung von SVG-Elementen.
+\end{itemize}
+Die Elm-Anwendung wurde in JavaScript (main.js) übersetzt und in eine HTML-Seite (index.html) integriert. Um das
+Design der Webseite anzupassen, wurden CSS-Klassen verwendet, die einzelne Teile der Elm-Anwendung verändern.
+Diese CSS-Design-Implementierungen sind in einer separaten CSS-Datei (style.css) gespeichert, die ebenfalls in die
+HTML-Seite eingebunden wird. Alle diese Dateien befinden sich im Ordner \enquote{public}. Die HTML-Seite präsentiert
+die erstellte Visualisierungsanwendung.
\section{Anwendungsfälle}
-
\subsection{Anwendung Scatterplot}
\subsection{Anwendung Parallel-Koordianten-Plot}
\subsection{Anwendung Tree}
@@ -460,5 +567,11 @@ Was wären mögliche sinnvolle Erweiterungen, entweder auf der Ebene der Visuali
\newpage
\printbibliography
+
+\section*{Anmerkung}
+\textbf{Verwendete Hilfsmittel:}\\
+ChatGPT\cite{chatgpt}, für die sprachliche und grammatikalische Verbesserung meiner geschriebenen
+Texte. Der Inhalt meines Berichtes entstammt von mir und hat sich durch die Verwendung des Hilfsmittels
+nicht geändert.
\end{document}
diff --git a/bericht/img/Model1.PNG b/bericht/img/Model1.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..d0cfe40b2db8c8bd0a84809a9e28d5298308275b
Binary files /dev/null and b/bericht/img/Model1.PNG differ
diff --git a/bericht/img/Model2.PNG b/bericht/img/Model2.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..18f75b928224fabb2e34cd75c6fc094a12c14589
Binary files /dev/null and b/bericht/img/Model2.PNG differ
diff --git a/bericht/img/Model3.PNG b/bericht/img/Model3.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..3d40ce88723fd2fab8e415137d84c76428916859
Binary files /dev/null and b/bericht/img/Model3.PNG differ
diff --git a/bericht/img/Model4.PNG b/bericht/img/Model4.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..2c4208fedd0d735e73529d2992f2fd6ce9b7a8e8
Binary files /dev/null and b/bericht/img/Model4.PNG differ
diff --git a/bericht/img/Model5.PNG b/bericht/img/Model5.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..04a3a16e49c2560e02aa4c07f7432a986d058fe8
Binary files /dev/null and b/bericht/img/Model5.PNG differ
diff --git a/bericht/img/Model6.PNG b/bericht/img/Model6.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..ed3dfd5e1598535c82296cd9537a236f002e76ff
Binary files /dev/null and b/bericht/img/Model6.PNG differ
diff --git a/bericht/img/SmartphoneType.PNG b/bericht/img/SmartphoneType.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..5b5266a8d3c428bccfb61e6bc88d852f4f721b9b
Binary files /dev/null and b/bericht/img/SmartphoneType.PNG differ
diff --git a/bericht/literatur.bib b/bericht/literatur.bib
index 329420f05f33311d152d045412f1f0e4587a6a81..e46460ad514558a2aaf6239f1d4d11a0cf4ca997 100644
--- a/bericht/literatur.bib
+++ b/bericht/literatur.bib
@@ -1,11 +1,11 @@
-@article{Daten,
+@online{Daten,
author = {Nitya verma},
title = {Smartphone Dataset (Cleaned)},
year = {2024},
url = {https://www.kaggle.com/datasets/nityaverma19/smartphone-dataset-cleaned}
}
-@article{Code,
+@online{Code,
author = {Tom Schindler},
title = {GitLab: InfoVisualProjekt Code},
year = {2024},
@@ -13,7 +13,7 @@
url = {https://gitlab.informatik.uni-halle.de/akfns/infovisualprojekt}
}
-@article{Anwendung,
+@online{Anwendung,
author = {Tom Schindler},
title = {Anwendung: Smartphone Analyse Tool},
year = {2024},
@@ -21,3 +21,10 @@
url = {https://infovisualprojekt-akfns-bfb2b698162b3251098cb9fc9246a929585a1a2.gpages.informatik.uni-halle.de/}
}
+@online{chatgpt,
+ author = {OpenAI},
+ title = {ChatGPT},
+ url = {https://openai.com/blog/chatgpt},
+ urldate = {2023-09-30}
+}
+