Dashboards II

# Dashboards II
### Reporting mit R <a href='https://therbootcamp.github.io'> The R Bootcamp </a> <a href='https://therbootcamp.github.io/RmR_2021Feb/'> </a>  <a href='https://therbootcamp.github.io'> </a>  <a href='mailto:therbootcamp@gmail.com'> </a>  <a href='https://www.linkedin.com/company/basel-r-bootcamp/'> </a>
### Februar 2021

---

<div class="my-footer">
 
 
 <img src="https://raw.githubusercontent.com/therbootcamp/therbootcamp.github.io/master/_sessions/_image/by-sa.png" height=14 style="vertical-align: middle"/>
 
 <a href="https://therbootcamp.github.io/">
 
 
 www.therbootcamp.com
 
 
 </a>
 <a href="https://therbootcamp.github.io/">
 
 Reporting mit R | Februar 2021
 
 </a>
 
 </div>

---

# Unser Dashboard

---

# <mono>shiny</mono>

<ul>
 <li class="m1"><mono>flexdashboards</mono> zeigen <high>Daten in Fenstern</high>. </li>
 <li class="m2"> Mit <mono>shiny</mono> können Dashboards um <high>interaktive Funktionen</high> erweitert werden. </li>
 <ul>
 <li>Daten <high>filtern</high></li>
 <li>Variablen <high>auswählen</high></li> 
</ul>

]

<img src="image/shiny.png" > 
 from <a href="rstudio.com">rstudio.com</a>

]

---

# <mono>shiny</mono>

> <mono>shiny</mono> is a framework for creating web applications using R code. It is designed primarily with data scientists in mind, and to that end, you can create pretty complicated Shiny apps with no knowledge of HTML, CSS, or JavaScript. Hadley Wickham in <a href="https://mastering-shiny.org/">Mastering Shiny</a>

]

]

---

# Beispiele

---

# Beispiele

---

# <mono>shiny</mono> App

<ul>
 <li class="m1">Eine shiny App besteht aus <high>zwei Teilen</high>.</li> 
 <li class="m2">Das <high>UI</high> (user interface) gestaltet die angezeigte Webseite.</li>
 <li class="m3">Der <high>Server</high>-Teil verarbeitet den Input durch den Nutzer.</li>
</ul>

]

]

---

# Interfaces

<ul>
 <li class="m1">Die Interaktion mit der App erfolgt über <high>Widgets</high>, z.B.:</li> 
 <ul class="level">
 <li>Slider</li>
 <li>Checkboxen</li>
 <li>Dropdown Menus</li>
 </ul> 
 <li class="m2">Widget-Eingaben werden in einem <highm>input-R-Object</highm> an den Server-Code weitergegeben.</li>
 <ul class="level">
 <li><mono>input</mono> ist eine <highm>Liste</highm> mit einem Element pro Widget. </li>
 <li style="padding-top:10px">Neue Eingabe = <high>Update</high> von <mono>input</mono>.</li>
 </ul>
</ul>

]

<img src="image/shiny-inputs2.png" > 
 adapted from <a href="https://deanattali.com/blog/building-shiny-apps-tutorial/">deanattali.com</a>

]

---

# <mono>input</mono>

]

]

---

# Reaktivität

<ul>
 <li class="m1"><mono>input</mono> kann nur in <high>reaktiver Umwelt</high> gelesen werden (z.B., <mono>render*</mono>).</li>
 <li class="m2">Reaktive Umwelten bzw. <high>reaktive Objekte</high> (eigentlich eine Funktion) können mit <mono>reactive()</mono> gesetzt werden.</li> 
 <li class="m3">Jeder <high>Codeblock</high>, in dem reaktive Objekte verwendet werden, wird erneut ausgeführt wenn es eine Eingabe gibt.</li>
</ul>

]

]

---

# Reaktivität

]

]

---

# <mono>render*()</mono>

<ul>
 <li class="m1">Um Veränderungen durch <high>reaktive Objekte</high> zu ermöglichen, müssen die entsprechenden Outputs mit speziellen Funktionen <high>gerendert</high> werden.</li> 
 <li class="m2">Verschiedene <highm>render*()</highm> Funktionen existieren in <mono>shiny</mono>, z.B.:</li>
 <ul class="level">
 <li><mono>renderPlot()</mono></li>
 <li><mono>renderTable()</mono></li>
 <li><mono>renderText()</mono></li>
 </ul>
 <li class="m3">Viele Pakete bieten <high>eigene</high> render Funktionen, z.B. <mono>renderLeaflet()</mono> oder <mono>renderPlotly()</mono>.</li>
</ul>

]

]

---

# <mono>{...}</mono>

<ul>
 <li class="m1">Mit geschweiften Klammern <mono>{}</mono> können mehrere Zeilen Code als zusammenhängender <high>Code Block</high> definiert werden.</li> 
 <li class="m2">Verwende <mono>{}</mono> innerhalb <mono>reactive()</mono> und <mono>render*()</mono> Funktionen.</li> 
</ul>

]

```r
# Beispiel Code Block
{
 a <- 1
 a
 a + 2
}
```

```
## [1] 3
```

```r
# Code Block in renderPlot()
renderPlot({
 n_colors <- length(unique(basel$bildung))
 farben <- viridis(n_colors)
 ggplot(...) +
 geom_point() +
 scale_color_manual(values = farben)
 })
```

]

---

# Beispiel

<ul>
 <li class="m1">Input definiert <high>Merkmal</high>.</li> 
 <li class="m2">Reaktiver Datensatz, <high>gefiltert</high> nach Input.</li> 
 <li class="m3">Verwendung des reaktiven Datensatzes in zwei verschiedenen <high>Plots</high>.</li> 
</ul>

]

```r
# Widget für User Input
checkboxGroupInput("MERKMAL", "TITEL", ...)

# Reaktive Daten generieren
DATEN_REAKTIV <- reactive({
 DATEN %>% 
 filter(VARIABLE %in% input$MERKMAL)
 })

# Verwende Reaktive Daten mit Klammern
# Plot 1
renderPlot({
  DATEN_REAKTIV() %>% 
    ggplot(aes(...)) +
    geom_point()
  })

# Plot 2
renderPlot({
  DATEN_REAKTIV() %>% 
    ggplot(aes(...)) +
    geom_histogram()
  })
```

]

---

# Ansätze

<ul>
 <li class="m1"><mono>shiny</mono></li> 
 <ul class="level">
 <li>Pro: Volle Flexibilität.</li>
 <li>Contra: Hohe Komplexität.</li>
 </ul>
 <li class="m2"><mono>shinydashboard</mono></li>
 <ul class="level">
 <li>Pro: Niedrigere Komplexität.</li>
 <li>Contra: Weniger Flexibilität.</li>
 </ul>
 <li class="m3"><mono>flexdashboard</mono></li>
 <ul class="level">
 <li>Pro: Sehr einfach, da Ausbau von Markdown.</li>
 <li>Contra: Niedrige Flexibilität.</li>
 </ul>
</ul>

]

<img src="image/choices_kid.png" > 
 from <a href="www.benfoolery.com/">benfoolery.com</a>

]

---

<h1><a href="https://therbootcamp.github.io/RmR_2020Jun/_sessions/DashboardsII/DashboardsII_practical.html">Practical</a></h1>