Was ist Flexdashboard und welchen Nutzen bietet es
Flexdashboard gehört zu den htmlwidgets in R. Es ermöglicht das schnelle Erstellen von interaktiven HTML-Dokumenten. Das interessante daran ist, dass das Dokument nach dem Erstellen keiner Pakete oder Server-Umgebung bedarf, in welcher das Dokument gehostet wird. Flexdashboard-Dokumente laufen einfach im Browser. Sogar auf dem Smartphone.
Zur Erstellung von Flexdashboards werden das Paket flexdashboard und das RStudio benötigt . Unser Beispiel nutzt zudem die Pakete igraph und sigmaNet, welche wir in einem vorherigen Beitrag bereits vorgestellt haben.
Einfachstes Beispiel mit Flexdashboard
Unser Ziel ist es drei Netzwerke zu vergleichen. Der Datensatz für die Netzwerke kann hier heruntergeladen werden.
Unsere drei Netzwerke werden mit folgendem Code erzeugt:
library(flexdashboard)
library(tidyr)
library(dplyr)
library(igraph) # Netzwerk generieren
library(sigmaNet) # Netzwerk visualisieren
# Das fertige Netzwerk
LayoutKK <- layout_with_kk(GraphHauptsitzBranche)
NetzwerkBranchenHauptsitz <- sigmaFromIgraph(GraphHauptsitzBranche, layout = LayoutKK)
# Farbe = Branche, Verknüpfung = Stadt, Größe Knoten = Umsatz, Kantenfarbe = Typ
NodeSize <- ForbesKnoten$`Umsatz(Mrd. $)`
NetzwerkBranchenHauptsitzFormatiert <- NetzwerkBranchenHauptsitz %>%
addNodeColors(colorAttr = "Branche", colorPal = "Set2") %>% # Kantenfarbe = Branche
addNodeLabels(labelAttr = "label") %>% # Namen der Unternehmen
addNodeSize(sizeVector = NodeSize, minSize = 1, maxSize = 10) %>% # Knotengröße = Umsatz
addEdgeColors(colorAttr = "Typ", colorPal = "Set3")
NetzwerkBranchenHauptsitzFormatiert
## Ausgangs-Netzwerk
# Layout: layout_nicely
plot(GraphHauptsitzBranche)
### Kreis-Layout
LayoutCirc <-layout_in_circle(GraphHauptsitzBranche)
NetzwerkForbes <- sigmaFromIgraph(GraphHauptsitzBranche, LayoutCirc)
NetzwerkForbes
Ein Flexdashboard-Dokument anlegen
Das Flexdashboard ist ein spezielles Markdown-Dokument. Zur Erzeugung müssen wir das Paket Flexdashboard installiert haben und im RStudio arbeiten. Über File -> New File -> R Markdown… können wir ein Markdown Dokument anlegen.
Flexdashboards lassen sich dann als Template auswählen.
Für unser einfaches Dashboard nutzen wir das Template:
---
title: "FlexDashboards"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(tidyr)
library(dplyr)
library(igraph) # Netzwerk generieren
library(sigmaNet) # Netzwerk visualisieren
```
```{r}
load(file = "NetzwerkWorkSpace.RData")
```
Column {data-width=650}
-----------------------------------------------------------------------
### Das fertige Netzwerk
```{r}
LayoutKK <- layout_with_kk(GraphHauptsitzBranche)
NetzwerkBranchenHauptsitz <- sigmaFromIgraph(GraphHauptsitzBranche, layout = LayoutKK)
# Farbe = Branche, Verknüpfung = Stadt, Größe Knoten = Umsatz, Kantenfarbe = Typ
NodeSize <- ForbesKnoten$`Umsatz(Mrd. $)`
NetzwerkBranchenHauptsitzFormatiert <- NetzwerkBranchenHauptsitz %>%
addNodeColors(colorAttr = "Branche", colorPal = "Set2") %>% # Kantenfarbe = Branche
addNodeLabels(labelAttr = "label") %>% # Namen der Unternehmen
addNodeSize(sizeVector = NodeSize, minSize = 1, maxSize = 10) %>% # Knotengröße = Umsatz
addEdgeColors(colorAttr = "Typ", colorPal = "Set3")
NetzwerkBranchenHauptsitzFormatiert
```
Column {data-width=350}
-----------------------------------------------------------------------
### Ausgangs-Netzwerk
```{r}
# Layout: layout_nicely
plot(GraphHauptsitzBranche)
```
### Etwas anderes Layout
```{r}
LayoutCirc <-layout_in_circle(GraphHauptsitzBranche)
NetzwerkForbes <- sigmaFromIgraph(GraphHauptsitzBranche, LayoutCirc)
NetzwerkForbes
```
Und so sieht das einfachste Flexdashboard mit unseren drei Netzwerken aus.
Andere Themes
Wir können unserem Dashboard auch ein anderes Aussehen geben. Dazu ändern wir die YAML des Markdown-Dokuments. Eine Übersicht aller in RStudio verfügbaren Themes für Flexdashboard findet sich auf der Appearance-Seite von Flexdashboard. Wir verwenden das Theme lumen, da es angenehm schlicht ist.
---
title: "FlexDashboards"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
theme: lumen
---
```{r setup, include=FALSE}
library(flexdashboard)
library(tidyr)
library(dplyr)
library(igraph) # Netzwerk generieren
library(sigmaNet) # Netzwerk visualisieren
```
```{r}
load(file = "NetzwerkWorkSpace.RData")
```
Column {data-width=650}
-----------------------------------------------------------------------
### Das fertige Netzwerk
```{r}
LayoutKK <- layout_with_kk(GraphHauptsitzBranche)
NetzwerkBranchenHauptsitz <- sigmaFromIgraph(GraphHauptsitzBranche, layout = LayoutKK)
# Farbe = Branche, Verknüpfung = Stadt, Größe Knoten = Umsatz, Kantenfarbe = Typ
NodeSize <- ForbesKnoten$`Umsatz(Mrd. $)`
NetzwerkBranchenHauptsitzFormatiert <- NetzwerkBranchenHauptsitz %>%
addNodeColors(colorAttr = "Branche", colorPal = "Set2") %>% # Kantenfarbe = Branche
addNodeLabels(labelAttr = "label") %>% # Namen der Unternehmen
addNodeSize(sizeVector = NodeSize, minSize = 1, maxSize = 10) %>% # Knotengröße = Umsatz
addEdgeColors(colorAttr = "Typ", colorPal = "Set3")
NetzwerkBranchenHauptsitzFormatiert
```
Column {data-width=350}
-----------------------------------------------------------------------
### Ausgangs-Netzwerk
```{r}
# Layout: layout_nicely
plot(GraphHauptsitzBranche)
```
### Etwas anderes Layout
```{r}
LayoutCirc <-layout_in_circle(GraphHauptsitzBranche)
NetzwerkForbes <- sigmaFromIgraph(GraphHauptsitzBranche, LayoutCirc)
NetzwerkForbes
```
Vom Spalten- zum Zeilen-basierten Layout wechseln
Wir möchten gerne das erste Netzwerk über den beiden Referenz-Netzwerken anzeigen. Das Standardlayout ist spaltenorientiert. Das heißt, dass man mit dem Column{}-Befehl in Markdown eine neue Spalte vorsieht und diese dann mit x Elementen füllen kann. Um vom Spalten- zum Zeilen-basierten Layout zu wechseln verändern wir den YAML-Header (orientation: rows) und die Column-Befehle in Markdown (Row statt Column)
---
title: "FlexDashboards"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
theme: lumen
---
```{r setup, include=FALSE}
library(flexdashboard)
library(tidyr)
library(dplyr)
library(igraph) # Netzwerk generieren
library(sigmaNet) # Netzwerk visualisieren
```
```{r}
load(file = "NetzwerkWorkSpace.RData")
```
Row {data-width=650}
-----------------------------------------------------------------------
### Das fertige Netzwerk
```{r}
LayoutKK <- layout_with_kk(GraphHauptsitzBranche)
NetzwerkBranchenHauptsitz <- sigmaFromIgraph(GraphHauptsitzBranche, layout = LayoutKK)
# Farbe = Branche, Verknüpfung = Stadt, Größe Knoten = Umsatz, Kantenfarbe = Typ
NodeSize <- ForbesKnoten$`Umsatz(Mrd. $)`
NetzwerkBranchenHauptsitzFormatiert <- NetzwerkBranchenHauptsitz %>%
addNodeColors(colorAttr = "Branche", colorPal = "Set2") %>% # Kantenfarbe = Branche
addNodeLabels(labelAttr = "label") %>% # Namen der Unternehmen
addNodeSize(sizeVector = NodeSize, minSize = 1, maxSize = 10) %>% # Knotengröße = Umsatz
addEdgeColors(colorAttr = "Typ", colorPal = "Set3")
NetzwerkBranchenHauptsitzFormatiert
```
Row {data-width=350}
-----------------------------------------------------------------------
### Ausgangs-Netzwerk
```{r}
# Layout: layout_nicely
plot(GraphHauptsitzBranche)
```
### Etwas anderes Layout
```{r}
LayoutCirc <-layout_in_circle(GraphHauptsitzBranche)
NetzwerkForbes <- sigmaFromIgraph(GraphHauptsitzBranche, LayoutCirc)
NetzwerkForbes
```
Weitere Layout-Optionen sind auf der Appearance-Seite von Flexdashboard zu finden.
Tabs für die Referenz-Netzwerke
Auf der Appearance-Seite von Flexdashboard finden wir auch eine Möglichkeit Tabsets einzubinden. Hier ein kurzer Test:
---
title: "FlexDashboards"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
theme: lumen
---
```{r setup, include=FALSE}
library(flexdashboard)
library(tidyr)
library(dplyr)
library(igraph) # Netzwerk generieren
library(sigmaNet) # Netzwerk visualisieren
```
```{r}
load(file = "NetzwerkWorkSpace.RData")
```
Row {data-width=650}
-----------------------------------------------------------------------
### Das fertige Netzwerk
```{r}
LayoutKK <- layout_with_kk(GraphHauptsitzBranche)
NetzwerkBranchenHauptsitz <- sigmaFromIgraph(GraphHauptsitzBranche, layout = LayoutKK)
# Farbe = Branche, Verknüpfung = Stadt, Größe Knoten = Umsatz, Kantenfarbe = Typ
NodeSize <- ForbesKnoten$`Umsatz(Mrd. $)`
NetzwerkBranchenHauptsitzFormatiert <- NetzwerkBranchenHauptsitz %>%
addNodeColors(colorAttr = "Branche", colorPal = "Set2") %>% # Kantenfarbe = Branche
addNodeLabels(labelAttr = "label") %>% # Namen der Unternehmen
addNodeSize(sizeVector = NodeSize, minSize = 1, maxSize = 10) %>% # Knotengröße = Umsatz
addEdgeColors(colorAttr = "Typ", colorPal = "Set3")
NetzwerkBranchenHauptsitzFormatiert
```
Row {data-width=350 .tabset}
-----------------------------------------------------------------------
### Ausgangs-Netzwerk
```{r}
# Layout: layout_nicely
plot(GraphHauptsitzBranche)
```
### Etwas anderes Layout
```{r}
LayoutCirc <-layout_in_circle(GraphHauptsitzBranche)
NetzwerkForbes <- sigmaFromIgraph(GraphHauptsitzBranche, LayoutCirc)
NetzwerkForbes
```Abbildung 6:
Das ist interessant, aber wir testen dennoch kurz, wie unser Dokument mit mehreren Seiten wirkt.
Seiten zum Dokument hinzufügen
Wir verlagern nun die Referenz-Netzwerke auf eine eigene Seite. Dazu Fügen wir nur zwei neue Zeilen Code hinzu:
---
title: "FlexDashboards"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
theme: lumen
---
```{r setup, include=FALSE}
library(flexdashboard)
library(tidyr)
library(dplyr)
library(igraph) # Netzwerk generieren
library(sigmaNet) # Netzwerk visualisieren
```
```{r}
load(file = "NetzwerkWorkSpace.RData")
```
Ziel-Netzwerk
=======================================================================
Row {data-width=650}
-----------------------------------------------------------------------
### Das fertige Netzwerk
```{r}
LayoutKK <- layout_with_kk(GraphHauptsitzBranche)
NetzwerkBranchenHauptsitz <- sigmaFromIgraph(GraphHauptsitzBranche, layout = LayoutKK)
# Farbe = Branche, Verknüpfung = Stadt, Größe Knoten = Umsatz, Kantenfarbe = Typ
NodeSize <- ForbesKnoten$`Umsatz(Mrd. $)`
NetzwerkBranchenHauptsitzFormatiert <- NetzwerkBranchenHauptsitz %>%
addNodeColors(colorAttr = "Branche", colorPal = "Set2") %>% # Kantenfarbe = Branche
addNodeLabels(labelAttr = "label") %>% # Namen der Unternehmen
addNodeSize(sizeVector = NodeSize, minSize = 1, maxSize = 10) %>% # Knotengröße = Umsatz
addEdgeColors(colorAttr = "Typ", colorPal = "Set3")
NetzwerkBranchenHauptsitzFormatiert
```
Andere Netzwerke
=======================================================================
Row {data-width=350}
-----------------------------------------------------------------------
### Ausgangs-Netzwerk
```{r}
# Layout: layout_nicely
plot(GraphHauptsitzBranche)
```
### Etwas anderes Layout
```{r}
LayoutCirc <-layout_in_circle(GraphHauptsitzBranche)
NetzwerkForbes <- sigmaFromIgraph(GraphHauptsitzBranche, LayoutCirc)
NetzwerkForbes
```Und so sieht das Ergebnis aus:
Fazit
Flexdashboard ist eine tolle Möglichkeit um Erkenntnisse mit anderen zu teilen. Dabei können alle interaktiven Elemente der htmlwidgets genutzt werden. Besonders interessant ist Flexdashboard, wenn das Dokument auf mobilen Endgeräten oder von Nutzern ohne R auf ihrem Rechner genutzt wird. Außerdem benötigt ein Flexdashboard keinen Shiny-Server.