Added introduction and mockup description

documentations/Ergebnisse/Abschlussbericht_und_Praesentation/KiMe/Datenvisualisierung.md

@@ -1,3 +1,29 @@
 # Datenvisualisierung
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+Als letzten Schritt der Datenverarbeitung betrachtet dieses Kapitel den Bereich der Datenvisualisierung. Dabei steht neben den einzelnen Darstellungen der Unternehmenskennzahlen, der Stimmungsanalyse und der Netzwerkanalyse, vor allem auch die Erstellung einer Weboberfläche im Vordergrund. Da Python als Hauptprogrammiersprache im Projekt gewählt wurde, fiel für die Umsetzung die Entscheidung auf die Python-Bibliotheken `Plotly` und `Plotly Dash`.
+
+> **Plotly** ist eine Python-Bibliothek zur Erstellung interaktiver Plots und Diagramme. Sie unterstützt eine breite Palette von Diagrammtypen, von einfachen Liniendiagrammen bis hin zu komplexen 3D-Visualisierungen, und kann in verschiedenen Umgebungen wie Jupyter-Notebooks, Webanwendungen und eigenständigen Skripten verwendet werden.
+
+> **Dash** baut auf Plotly auf und stellt ein Framework für die Erstellung interaktiver webbasierter Dashboards mit Python bereit. Mit Dash können dynamische und reaktionsfähige Benutzeroberflächen erstellen werden, in die Plotly-Diagramme und andere HTML-Komponenten integriert werden können.
+
+
+Auf weitere verwendete Bibliotheken wird in den jeweiligen Abschnitten eingegangen. Im Nachfolgenden wird beschrieben, wie der erste Entwurf einer Weboberfläche entstand und dieser anschließend umgesetzt wurde. Dabei wird auf das Zugreifen der Daten in der Produktivdatenbank, die Erstellung der einzelnen Plots und die verwendeten Elemente der Weboberfläche eingegangen.
+
+
+## Der erste Entwurf einer Weboberfläche
+
+Nachdem die Visualisierungen der drei Anwendungsbereiche (Kennzahlen, Stimmungsanalyse, Netzwerk) bereits in der ersten Phase des Projekts erarbeitet wurden, wurde anschließend und auch noch vor dem Beginn der Implementierungen im Plenum ein erster Entwurf der Weboberfläche konzipiert. Durch das Erstellen eines sogenannten Mockups, mussten die Anforderungen an das Projekt einzeln umgesetzt und die Funktionalitäten der Applikation festgelegt werden. Im Laufe der Diskussionen kristallisierten sich die folgenden Kernaspekte heraus:
+
+- **Multi-Page:** Es können nicht alle Anforderungen auf einem Dashboard visualisiert werden. Es braucht eine Applikation mit mehreren Seiten und entsprechenden Navigations-möglichkeiten.
+- **Styling:** Alle Seiten und Elemente sollen visuell aufeinander abgestimmt sein, sodass ein schlüssiges Gesamtbild entsteht. Dazu wurden ein Farbschema festgelegt und ein Header erstellt, welcher auf allen Seiten auftauchen soll.
+- **Usability:** Die Applikation soll möglichst intuitiv sein. Auf Seiten mit Bedienungshilfen oder Ähnlichem wird bewusst verzichtet.
+-  **Startseite:** Ein gesamtes Netzwerk aller Unternehmen und Personendaten soll das zentrale Element auf der Startseite werden.
+- **Unternehmensseite:** Die Detailinformationen einzelner Unternehmen sollen auf einer jeweils separaten Seite dargestellt werden. Dazu gehören allgemeine Stammdaten, wie beispielsweise Name, Adresse und Geschäftsform, die Darstellung der Unternehmenskennzahlen, die Visualisierung der Stimmungsanalyse und die Anzeige direkt mit dem Unternehmen verbundene Personen oder andere Unternehmen.
+- **Personenseite:** Auch für die Personen soll es jeweils eine Seite mit Detailinformationen geben. Da Stammdaten von Personen allerdings sensibel sind, werden hier lediglich die Verbindungen der Person und ein Netzwerk angezeigt.
+
+Insgesamt entstand ein kompletter Entwurf aller Seiten, der als Vorlage für die nachfolgenden Implementierungen dienen sollte. Die Pfeile visualisieren die gewünschten Klickwege:
+
+<img src="images/mockup.PNG" />
+
+
+Auch wenn der Entwurf aufgrund technischer Gegebenheiten im Endprodukt nicht an allen Stellen 1:1 umgesetzt werden konnte, hat er sich während der Implementierungsphase als äußerst hilfreich erwiesen. Durch das konkrete Ziel waren nur wenige Rückfragen innerhalb des Teams notwendig.

documentations/Ergebnisse/Abschlussbericht_und_Praesentation/KiMe/Plotly_Dash.md

@@ -1,22 +1,6 @@
-## Plotly & Dash
+## Grundlegender Aufbau der Plotly Dash App
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 
-### Vom Mock-Up zur Realisierung: Vorstellung des Mock-Ups
+## Abrufen der Daten aus der Produktivdatenbank
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
-
+## Visualisierung der Unternehmenskennzahlen und der Stimmungsanalyse
-### Warum haben wir uns für Plotly zur Datenvisualisierung entschieden?
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-
-### Welche Arten von Diagrammen und Visualisierungen haben wir erstellt?
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-
-### Welche Erkenntnisse konnten aus den Visualisierungen gewonnen werden, und wie haben sie zur Entscheidungsfindung beigetragen?
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-
-### Dash
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.