Include pictures of the Frontend

documentations/Ergebnisse/Abschlussbericht_und_Praesentation/TiRo/S4-5-2.md

@@ -28,7 +28,8 @@ Für das Aktualisieren des Netzwerks nach Benutzereingaben werden Callbacks verw
 
 ## Bedienung des Netzwerks auf der Homepage
 Die Homepage des Transparenzregisters sieht zur Vollendung des Projektes folgender Maßen aus:
-<!-- Bild der Homepage -->
+![Abbildung der Homepage](images/Home_page.PNG)
+
 Auf der linken Seite befindet sich eine Tabelle mit den 10  Zehn "besten" Nodes aus dem Links abgebildetet Graphen. Mit "besten" sind hier die 10 Nodes mit dem höchsten Wert der oberhalb der Tabelle gewählten Metrik. Je nach gefilterten Daten ändert sich die Tabelle automatisch und zeigt immer den aktuellen Stand zum rechts erstellten Graphen. 
 
 Der Graph auf der rechten Seite repräsentiert die Verflechtung von Unternehmen und Akteuren. Dabei stellen rote Punkte Personen wie Wirtschaftsprüfer oder Geschäftsführer dar, während blaue Punkte Unternehmen symbolisieren. Die Bedienung des Graphen erfolgt über die oberen Bedienfelder. Die ersten beiden Dropdown-Menüs ermöglichen die Auswahl der Datenbasis, auf die sich der Graph beziehen soll. Hierbei ist auch eine Mehrfachauswahl möglich. Neben den Daten kann auch das Layout des Graphen eingestellt werden, wobei für die dreidimensionale Darstellung nur begrenzte Optionen verfügbar sind.
@@ -36,11 +37,13 @@ Der Graph auf der rechten Seite repräsentiert die Verflechtung von Unternehmen
 Die initiale Erstellung eines Graphen kann mehrere Sekunden in Anspruch nehmen, wird jedoch anschließend zwischengespeichert und kann in den nächsten 30 Minuten schneller durchgeführt werden. Die anfänglichen Leistungsprobleme resultieren aus der Menge an Daten, die abgerufen, verarbeitet und dargestellt werden müssen. Das Zusammenspiel von Datenbank, NetworkX und Plotly beeinflusst hier die Gesamtperformance.
 
 ## Bedienung des Netzwerks auf der Company Page
-Nach Auswahl eines bestimmten Unternehmens kann auf der Unternehmensseite der Reiter "Verflechtung" gewählt werden, um die Verflechtungen des Unternehmens zu betrachten. Sollte das ausgewählte Unternehmen keine Verflechtungen aufweisen, wird dem Nutzer ein entsprechender Hinweistext angezeigt.
+Nach Auswahl eines bestimmten Unternehmens kann auf der Unternehmensseite der Reiter "Verflechtung" gewählt werden, um die Verflechtungen des Unternehmens zu betrachten. Sollte das ausgewählte Unternehmen keine Verflechtungen aufweisen, wird dem Nutzer ein entsprechender Hinweistext angezeigt. Im Bild rot makiert.
 <!-- Bild mit Hinweistext -->
+![Abbildung eines Hinweis Textes](images/Company_note.PNG)
 
 Bei ausreichend vorhandenen Daten wird ein kompakter Graph erstellt, der die Verflechtungen des betrachteten Unternehmens zeigt. Hierbei werden lediglich die engsten Verbindungen visualisiert. Auf dieser Seite ist keine Interaktion mit dem Graphen vorgesehen, da der Benutzer hier lediglich zusätzliche Informationen zum Unternehmen erhalten soll, ohne den gesamten Graphen durchzugehen. Diese Funktion ist für die Homepage vorgesehen.
 <!-- Bild Company Seite -->
+![Abbildung der Companypage](images/Company_page.PNG)
 
 ## Bedienung des Netzwerks auf der Person Details Page
 Die Personen-Detailseite verhält sich in Bezug auf das Netzwerk analog zur Unternehmensseite. Auch hier erhält der Nutzer lediglich zusätzliche Informationen zur Person, kann jedoch nicht weiter mit dem Graphen interagieren.

documentations/Ergebnisse/Zwischenbericht_und_Praesentation/TiRo/verflechtungsanalyse.md

@@ -88,29 +88,27 @@ analysieren, da auch Verflechtungen Graphen sind.
 ### Begriffliche Definition
 
 Graphen sind nach der Graphentheorie "Strukturen aus Punkten und
-Verbindungen zwischen diesen Punkten" [@DiskreteMathematik S. 257]. Die
+Verbindungen zwischen diesen Punkten" [1]. Die
 Punkte werden als **Ecken/Knoten** oder im Englischen ***Nodes*** und
 die Verbindungen als **Kanten/Verbindungen**, oder im Englischen
 ***Edges*** bezeichnet. Dabei liegt der Kern eines Graphen nicht in der
 Visualisierung, sondern in dessen mengentheoretischen Eigenschaften.
-[@DiskreteMathematik S. 257]
+[1]
 
 Es gibt diverse Arten von Graphen: **Ungerichtete Graphen** und
 **gerichtete Graphen** beziehungsweise **Digraphen**. Für ungerichtete
 Graphen gilt folgende Definition:
 
-::: displayquote
+*"Ein ungerichteter Graph $G$ ist ein Paar ($V$, $E$). Hierbei ist $V$
-"Ein ungerichteter Graph $G$ ist ein Paar ($V$, $E$). Hierbei ist $V$
 eine endliche Menge, welche die Ecken repräsentiert, und $E$ ist eine
 Menge, die aus Mengen der Form $v1$, $v2$ besteht, wobei $v1$, $v2$
-$\in$ $V$ gilt. $E$ repräsentiert die Menge der Kanten."
+$\in$ $V$ gilt. $E$ repräsentiert die Menge der Kanten."*
-[@DiskreteMathematik S. 257]
+[1]
-:::
 
 Anhand dieser Definition lassen sich Graphen mit beliebig vielen Kanten
 zwischen den Ecken bilden. Die Kanten müssen dabei nicht geradlinig
 verlaufen, sodass derselbe Graph auf verschiedene Weisen dargestellt
-werden kann. [@DiskreteMathematik vgl. S. 257-258]
+werden kann. [1]
 
 Im Gegensatz dazu besitzen gerichtete Graphen Kanten mit einer
 vorgegebenen Richtung. Diese Richtung wird anhand eines Pfeiles auf der
@@ -118,19 +116,17 @@ Kante visualisiert. Auch ein gerichteter Graph kann auf verschiedene
 Arten dargestellt werden. Eine mögliche Definition von gerichteten
 Graphen ist die folgende:
 
-::: displayquote
+*"Ein gerichteter Graph oder Digraph $D$ ist eine Struktur ($V$, $E$).
-"Ein gerichteter Graph oder Digraph $D$ ist eine Struktur ($V$, $E$).
 Hierbei ist $V$ eine endliche Menge der Ecken und $E$ ist eine Menge,
 die aus Paaren der Form ($v1$, $v2$) besteht, wobei $v1$, $v2$ $\in$ $V$
 gilt. E repräsentiert die Menge der gerichteten Kanten, welche auch
-Bögen genannt werden." [@DiskreteMathematik S. 258]
+Bögen genannt werden."* [1]
-:::
 
 Die bereits angesprochene Möglichkeit, einen Graphen mit denselben
 Eigenschaften auf unterschiedlichste Weise darzustellen, bezeichnet man
 als **Isomorphie**. Es ist einfach von einem Graph einen isomorphen
 Graphen zu erzeugen, aber deutlich komplexer die Isomorphie von zwei
-Graphen festzustellen. [@MathematikInformatiker vgl. S. 272]
+Graphen festzustellen. [2]
 
 ### Sociogram/ Social Network/ Social Graph
 
@@ -144,7 +140,7 @@ Ein solcher Graph oder ein solches Netz wird aufgebaut, indem jede Ecke
 des Graphen einen Akteur (Person oder Unternehmen), jede Kante eine
 Verbindung (Beauftragung, Verwandschaft, Arbeitsverhältnis) darstellt.
 Die Kanten können mit Gewichten versehen werden. Jede Kante ist dabei
-gerichtet.[@SocialMediaAnalysis vgl. S. 8]
+gerichtet.[3]
 
 Das Ergebnis kann als *Social Graph, Social Network* oder *Sociogram*
 bezeichnet werden. In dieser Arbeit wird hauptsächlich der Begriff
@@ -157,7 +153,7 @@ eine *Triad*, welche offen oder geschlossen sein kann. Offen bedeutet,
 dass über einen Knoten die anderen beiden verbunden sind. Hingegen ist
 bei einer geschlossenen *Triad* jeder Knoten mit beiden anderen Knoten
 über eine Kante verbunden. Die größte soziale Gruppe stellt ein *Quad*
-dar und besteht aus vier Ecken.[@SocialNetworkAnalysis S. 12-14]
+dar und besteht aus vier Ecken.[4]
 
 Die Ansammlung von mehreren Akteuren durch enge Verbindungen wird als
 ***Cluster*** oder ***Group*** bezeichnet.
@@ -173,7 +169,7 @@ einem anderen zu gelangen. Dieser Wert kann auf einen Teil des Graphen
 sowie auf den gesamt Graphen gemittelt werden. Ist der Median der
 *number of hops* im Gesamtgraphen beispielsweise bei 5, so werden
 Verbindungen, die diesen Schwellwert überschreiten, zu einem Cluster
-kombiniert. [@SocialMediaAnalysis S. 9]
+kombiniert. [3]
 
 Weitere Einsichten werden über ein Netzwerk erlangt, in dem man Teile
 des Netzwerkes oder das gesamte Netzwerk in drei verschiedene Level
@@ -181,7 +177,7 @@ abstrahiert. **Element-Level** ist die Betrachtung der Auswirkungen und
 Einflüsse einzelner Ecken und Kanten. **Group-Level** analysiert die
 Zusammenhänge und Dichte von Gruppen innerhalb des Netzes.
 **Network-Level** ist das Interesse an den topologischen Eigenschaften
-des Netzwerks. [@IntroductionSNA vgl.]
+des Netzwerks. [5]
 
 #### Element-Level Metriken
 
@@ -202,7 +198,7 @@ mit sich selbst verbindet.
 Akteuren verbindet, die ähnlich sind hinsichtlich der Größe des Grades.
 
 **Homophily** ist die Wahrscheinlichkeit von Verbindungen sehr ähnlicher
-Akteure untereinander. [@IntroductionSNA vgl.]
+Akteure untereinander. [5]
 
 Weitere Algorithmen und Kennzahlen sind die Folgenden:
 
@@ -241,7 +237,7 @@ dieser Kennzahl muss allerdings mit Vorsicht agiert werden.
 Eine hohe *Betweeness Centrality* kann ausdrücken, dass ein Akteur einen
 großen Einfluss und Autorität über einen Cluster im Netzwerk verfügt, es
 kann jedoch auch sein, dass der Akteur nur als Vermittler beider Enden
-dient. [@SNA101 Vgl.]
+dient. [7]
 
 Dieser Wert lässt sich dadurch berechnen, indem jedes Ecken-Paar des
 Netzwerkes genommen wird und die Anzahl der zwischen ihnen liegenden
@@ -266,7 +262,7 @@ Bei der Interpretation dieser Kennzahl können Informationsverteiler
 bestimmt werden, jedoch haben in einem sehr verbundenen Netzwerk die
 Ecken meist einen sehr ähnlichen *Closeness Centrality* Wert. Daher ist
 es bei diesen Netzwerken sinnvoll, eher Informationsverteiler in den
-einzelnen Clustern auszumachen. [@SNA101 Vgl.]
+einzelnen Clustern auszumachen. [7]
 
 Dieser Wert wird berechnet, indem man die Gesamtanzahl an Schritte zu
 einer Ecke zählt und diesen Wert invertiert.
@@ -289,7 +285,7 @@ allerdings, dass die ungerichteten Graphen deutlich besser
 funktionieren. Die Problematiken der *Eigenvector Centrality* bei
 gerichteten Graphen kann mittels der *Katz Centrality* behoben werden,
 welche aber in dieser Arbeit nicht weiter behandelt wird.
-[@NetworksAnIntro Vgl. S. 169-171]
+[6]
 
 Berechnet wird die Kennzahl je Knoten durch das Bilden eines
 Eigenvektors und Iterieren über jede der Kanten. Wenn die Kennzahl durch
@@ -304,8 +300,7 @@ eingehenden Verbindungen ausgestattet. Die Verbindungen werden dann
 abhängig vom ausgehenden Knoten gewichtet. Diese Kennzahl wird genutzt,
 um bei *directed Graphs* einflussreiche Akteure auszumachen. Es war
 einer der ersten Rangfolgen Algorithmen hinter der Google Search Engine
-und wurde nach dem Entwickler und Gründer Larry Page benannt. [@SNA101
+und wurde nach dem Entwickler und Gründer Larry Page benannt. [7]
-vgl.]
 
 Akteure mit einem hohen *PageRank Centrality* Wert können als besonders
 einflussreich über ihre direkten Verbindungen hinaus interpretiert
@@ -317,8 +312,7 @@ werden.
 ein k-Wert abhängig von seinem degree. Die Knoten werden dann gruppiert
 und gefiltert. Werte mit einem niedrigen k-Wert werden raus genommen.
 Somit bleiben nur Werte mit einem hohen k-Wert übrig und es bilden sich
-semi-autonome Gruppierungen innerhalb des Netzwerks. [@SNAAlgorithms
+semi-autonome Gruppierungen innerhalb des Netzwerks. [8]
-vgl.]
 
 Der k-Wert bietet eine Möglichkeit für das Transparenzregister
 verschiedene Zoom Stufen einzubauen, damit gerade bei hohen Mengen an
@@ -328,7 +322,7 @@ Daten man noch einen Überblick gewinnt.
 um von einer Ecke zur anderen zu kommen. Der kürzeste Weg gibt die Route
 an, mit der man mit so wenigen "hops" wie möglich durchs Netz kommt. Die
 "hops" können auch gewichtet werden, um Distanzen berechnen zu können
-oder die Menge an "hops". [@SNAAlgorithms Vgl.]
+oder die Menge an "hops". [8]
 
 Dieser Wert sagt etwas zur Weite des Netzwerks aus. Im Zusammenhang mit
 dem Projekt liefert diese Metrik eher unwichtigere Erkenntnisse.
@@ -431,10 +425,13 @@ geladen.
 df_nodes['shape'] = df_nodes['type'].map(node_shape)
 
 # define color based on branche
-	node_color = {'Automobilhersteller': ' #729b79ff',
+node_color = {
+	'Automobilhersteller': ' #729b79ff',
 	'Automobilzulieferer': '#475b63ff',
 	'Branche 3': '#f3e8eeff',
-		'Branche 4': '#bacdb0ff', 'Branche 5': '#2e2c2fff'}
+	'Branche 4': '#bacdb0ff', 
+	'Branche 5': '#2e2c2fff',
+}
 df_nodes['color'] = df_nodes['branche'].map(node_color)
 
 # add information column that can be used for
@@ -450,17 +447,14 @@ geladen.
 Als Ergebnis erhält man ein Dataframe mit den verschiedenen
 Automobilherstellern.
 
-::: center
+  | **ID**      |      **Name**      |       **Typ** |
-::: {#tab:table1}
+ |--------|--------|--------|
-  **ID**            **Name**             **Typ**
+  |1|         Porsche Automobil Holding  |  Company |
-  -------- --------------------------- ---------
+  | 2        |       Volkswagen AG     |     Company |
-  1         Porsche Automobil Holding    Company
+  | 3       |         Volkswagen        |    Company |
-  2               Volkswagen AG          Company
+
-  3                Volkswagen            Company
+*Tabelle 1: Tabelle der Automobilhersteller.*
 
-  : Tabelle der Automobilhersteller.
-:::
-:::
 
 Neben den Daten zu den Firmen wird noch eine zweite Tabelle
 \"relations\" eingelesen, welche die Beziehungen zwischen den Akteuren
@@ -500,15 +494,13 @@ Anschließend wird der erzeugte Graph mit PyVis visualisiert.
 # calculate and update size of the nodes
 depending on their number of edges
 for node_id, neighbors in adj_list.items():
-	# df["edges"] = measure_vector.values()
+	df["edges"] = measure_vector.values()
 
 size = 10  # len(neighbors)*5
 
 next(
-	(node.update({"size": size}) for node in net.nodes
+(node.update({"size": size}) for node in net.nodes if node["id"] == node_id),
-	if node["id"] == node_id),
+	None,)
-	None,
-	)
 
 # set the node distance and spring lenght using repulsion
 net.repulsion(node_distance=150, spring_length=50)
@@ -528,7 +520,7 @@ Des Weiteren können Einstellungen an der Physik vorgenommen werden, um
 die Ansicht des Graphen zu verändern, beispielsweise die Knoten
 auseinander zu ziehen.
 
-![Abbildung eines Graphens mit Mockdaten](abbildungen/Graph.PNG){width="80%"}
+![Abbildung eines Graphens mit Mockdaten](abbildungen/Graph.PNG)
 
 ### Anwendung der Social Network Analysis (SNA)
 
@@ -576,9 +568,7 @@ adj_list = net.get_adj_list()
 	next(
 	(
 	node.update({"size": size})
-	for node in net.nodes
+	for node in net.nodes if node["id"] == node_id),
-	if node["id"] == node_id
-	),
 		None,
 		)
 ```
@@ -588,8 +578,7 @@ betweennes_centrality* und *closeness_centrality* durchgeführt. Über die
 *save_graph* Methode kann das Netzwerk dank des Pyvis Frameworks als
 HTML gespeichert und das fertige Netz im Browser betrachtet werden.
 
-![Netzwerk mit der Metrik eigenvector
+![Netzwerk mit der Metrik eigenvector centrality.](abbildungen/Eigenvector.PNG)
-centrality.](abbildungen/Eigenvector.PNG){width="80%"}
 
 Anhand der Veränderung des Netzwerks kann man sehen, wie die
 Auswirkungen der Kennzahlen sind. Der Eigenvector misst, wie viele
@@ -599,7 +588,7 @@ vor allem die Porsche AG in diesem Beispiel deutlich hervor, da diese
 viele direkt Verbindungen hat und mit dem Audi Knoten verbunden ist, der
 wiederum die zweit meisten Verknüpfungen besitzt.
 
-![Netzwerk mit der Metrik degree centrality.](abbildungen/Degree.PNG){width="80%"}
+![Netzwerk mit der Metrik degree centrality.](abbildungen/Degree.PNG)
 
 Die *Degree Centrality* zeigt hingegen ein etwas anderes Bild. Hier sind
 die Hauptakteure noch einmal deutlich größer im Verhältnis zu den
@@ -609,8 +598,7 @@ und "Skoda Auto", da alle nur eine direkte Verbindung besitzen. Beim
 vorherigen Graphen war "Seat" größer, da es mit einem einflussreichen
 Knoten verbunden war und Hella nicht.
 
-![Netzwerk mit der Metrik betweenness
+![Netzwerk mit der Metrik betweenness centrality.](abbildungen/Betweenness.PNG)
-centrality.](abbildungen/Betweenness.PNG){width="80%"}
 
 Im dritten Graphen mit der *betweenness centrality* sieht man, dass die
 Blätter keinen Knoten mehr haben, da dieser nicht als \"Brücke\"
@@ -618,8 +606,7 @@ fungiert. In einem sehr großen Netzwerk könnte man solche Knoten
 wegfallen lassen, um ein genaueren Überblick der wichtigen Akteure zu
 erhalten.
 
-![Netzwerk mit der Metrik closeness
+![Netzwerk mit der Metrik closeness centrality.](abbildungen/Closeness.PNG)
-centrality.](abbildungen/Closeness.PNG){width="80%"}
 
 Die letzte Metrik der Element-Level Metriken zeigt ein eher homogenes
 Bild. Die Knoten sind generell größer, was daran liegt, dass es hier
@@ -733,8 +720,7 @@ dienten Personen und Firmen. Die Unternehmen wurden grün dargestellt,
 sind aber aufgrund der Größe eher schlecht von den Personen mit blauen
 Punkten zu unterscheiden.
 
-![Graph mit Unternehmens- und
+![Graph mit Unternehmens- und Personendaten](abbildungen/Transparenzregister_Graph.PNG)
-Personendaten](abbildungen/Transparenzregister_Graph.PNG){width="80%"}
 
 ### Handlungsempfehlung
 
@@ -834,3 +820,24 @@ welche Erkenntnisse mithilfe der SNA auf den Daten gewonnen werden
 können. Liefern die vorgeschlagenen Metriken die zu erwartenden
 Resultate? Sind alle Metriken überhaupt mit den Daten anwendbar? Diese
 Fragestellungen werden im Rahmen des Projektes angegangen.
+
+### Literaturverzeichnis
+
+- **[1]** S. Iwanowski und R. Lang, „Graphentheorie,“ ger, in Diskrete Mathematik mit
+Grundlagen, Wiesbaden: Springer Fachmedien Wiesbaden, 2020, S. 257–320, isbn:
+3658327596.
+
+- **[2]** P. Hartmann, „Graphentheorie,“ ger, in Mathematik für Informatiker, Wiesbaden:
+Springer Fachmedien Wiesbaden, 2020, S. 269–300, isbn: 9783658265236.
+- **[3]** I. Pitas, Graph-Based Social Media Analysis. CRC Press, 2016, isbn: 9780429162602.
+
+- **[4]** X. Fu, Social Network Analysis. CRC Press, 2017, isbn: 9781315369594.
+
+- **[5]** E. Yüksel,  https://medium.com/@emreeyukseel/a-brief-introduction-to-social-network-analysis-2d13427f5189.
+
+- **[6]** M. Newmans, Networks An introduction. Oxford University Press Inc., 2010, isbn:
+9780199206650.
+
+- **[7]** A. Disney,https://cambridge-intelligence.com/keylines-faqs-social-network-analysis/.
+
+- **[8]** C. Intelligence,  https://cambridge-intelligence.com/social-network-analysis/.