23. Juli 20205 Min. Lesezeit

Interaktive Dokumente mit Flexdashboard

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.

Das Flexdashboard kann im angezeigten Menü des RStudios angelegt werden — Anlegen eines FlexDashboards

Flexdashboards lassen sich dann als Template auswählen.

Nach der Installation von FlexDashboard kann man das entsprechende Template auswählen — Flexdashboard 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.

Flexdashboard mit unserem Inhalt und dem einfachen Template — Einfaches Flexdashboard

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
```

In dieser Abbildung wurde das Theme im YAML-Header auf "lumen" geändert — Flexdashboard mit Theme lumen

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
```

Wir ändern nun das Layout von Spalten- auf Zeilenbasiert. Dies geschieht ebenfalls im YAML-Header — Zeilenbasiertes Layout bei Flexdashboard

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:

Ein Tabset wurde im unteren Bereich der Seite hinzugefügt — Flexdashboard mit Tabset

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:

Das Dashboard hat nun mehrere Unterseiten, um die Inhalte zu gliedern — Flexdashboard mit mehreren Seiten

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.