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.


DateiFlexDashboard
.zip
Download ZIP • 30KB

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.


Anlegen eines FlexDashboards

Flexdashboards lassen sich dann als 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.

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


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

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:

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.

9 Ansichten