Interactive Science

class: center, middle, inverse, title-slide

# Interactive Science
## Using Shiny and R to Make Research Accessible (and to Let it Shine)
### Cosima Meyer
### 2020-08-27

---

## Researcher and data lover

.left-column[
<img src="5.png" width=100 height=100>

<img src="7.png" width=100 height=100>
]

.right-column[
**PhD Candidate** and **researcher** at the University of Mannheim

**Co-founder** and **co-editor** of the data science blog [**Methods Bites**](https://www.mzes.uni-mannheim.de/socialsciencedatalab/)

**Maintainer** and **author** of the CRAN package [**overviewR**](https://cosimameyer.github.io/overviewR/)
]

---

## Shiny App

[![](shinyapp-conflict-new.png)](https://cosima-meyer.shinyapps.io/conflict-elections/)

---

## Why Shiny?

- Allows **(data) storytelling**

- **Interactive science** (and much more)

- **Good-looking low-cost tool** to present results or to generate a web application more generally

---
class: inverse, center, middle

# How to set-up a ShinyApp in R

---
class: inverse, center, middle
background-image: url(logos-all.png)
background-size: 800px

---

# Setting up a ShinyApp in R

- **UI** (user interface): The look (or **body**) of your app

- **Server**: The **brain** of your app; defines what it really does

- **shinyApp()**: Brings UI and server together

- Programming in Shiny is **reactive** (does not follow a sequential logic but is event-based)

---
background-image: url("body.png")
background-size: 200px
background-position: 95% 8%

### ui.R

Define how your **body** looks like

---
background-image: url("body.png")
background-size: 150px
background-position: 95% 8%

### ui.R

![](ui2.png)

---
background-image: url("head.png")
background-size: 200px
background-position: 95% 8%

### server.R

Create the **brain** of your app

---

### shinyApp()

**As a last step:**

Bring your **UI** and your **server** together

.center[

```r
shinyApp(ui = ui, server = server)
```
]

---

### Reactive programming

**Let the magic happen - everything needs to be connected**

---
class: inverse, middle, center

# Practice session

---
class: inverse, middle, center

# Lessons learned

---
class:

### Lessons learned

- **ShinyApps** are a **powerful** tool

- **Start simple** (use the most basic example you can find and build upon this)

- Make a **(hand-written) concept of your app**

- Order of the workflow might be counter-intuitive: 
  - UI
  - server

- Sliders for [**timelines**](https://echarts4r.john-coene.com/reference/timeline-opts.html) and [**download buttons**](https://echarts4r.john-coene.com/articles/toolbox.html) are not so easily implemented (but **echarts4r** helps here!)

- If you deploy your ShinyApp: 
  - [**shinyapps.io**](https://www.shinyapps.io) makes your life easy
  - You only load your packages with `library(...)` but do not install them in your ShinyApp file (they need to be installed beforehand, of course!)

---
### Plotting interactive figures

.left-column[
<img src="plotly-logo copy.png" width=100 height=100>

<img src="echarts4-logo.png" width=100 height=100>
]

.right-column[

[**Plotly**](https://plotly.com)

- Straight-forward logic
- Easy to implement on ggplot2 objects
- Works on maps as well

[**leaflet**](https://leafletjs.com)

- Great and easily accessible for interactive maps

[**echarts4r**](https://echarts4r.john-coene.com)

- Gives you a great look out of the box
- Works good on mobile devices
- More difficult to customize
- If you are used to ggplot2, plotly might be more accessible
]

---

### Arranging your ShinyApp

.pull-left[
**Classic ShinyApp**
<img src="shinyapp2.png" width=350 height=200>

- Less complex

- Good for simple ShinyApps

]

.pull-right[
**Shiny dashboard**
<img src="shinydashboard2.png" width=350 height=200>

- Out-of-the box, enterprise-ready dashboards

- Mobile ready

- Easy to arrange single components

- More accessible for larger apps with more components

]
---

### Arranging your ShinyApp: How the UI differs

.pull-left[
**Classic ShinyApp**
<img src="shinyapp2.png" width=350 height=200>

```r
fluidPage(
  titlePanel(title = "NAME"),
  sidebarLayout(sidebarPanel(),
                mainPanel()))
```

]

.pull-right[
**Shiny dashboard**
<img src="shinydashboard2.png" width=350 height=200>

```r
dashboardPage(
  dashboardHeader(title = "NAME"),
  dashboardSidebar(),
  dashboardBody())
```

]

---
class: inverse, middle, center

# What else can you do with Shiny in science?

---

### Visualization of survey data sets

[![](scotland.png)](https://scotland.shinyapps.io/sg-scottish-household-survey-data-explorer/)

---

### Make your appendix interactive

[![](appendix.png)](http://134.155.108.111:3838/Populism/)

---

### Search engines for scientific articles

[![](coro2vid.png)](https://cosima-meyer.shinyapps.io/coro2vid-19-shinyapp/)

---

### Gender balance check

[![](gender.png)](https://jlsumner.shinyapps.io/syllabustool/)

---
class: inverse
background-image: url("computer.png")
background-size: 200px
background-position: 95% 8%

# More resources

.pull-left[.small[
- Shiny

- [R Studio tutorial](https://shiny.rstudio.com/tutorial/)
  - [Hadley Wickham: Mastering Shiny](https://mastering-shiny.org)
  - [Konstantin Gavras and Nick Baumann: Shiny Apps: Development and Deployment](https://www.mzes.uni-mannheim.de/socialsciencedatalab/article/shiny-apps/) on Methods Bites
  - [Julie Scholler: Intro to Shiny Web App](https://juliescholler.gitlab.io/files/M2/M2-CM3-Shiny.html#1)
  - [Kaleen L. Medeiros: Introduction to Shiny](https://github.com/klmedeiros/rladies-tunisia-july2020-intro-shiny)
  - [CheatSheet](https://shiny.rstudio.com/images/shiny-cheatsheet.pdf)
]]
  
.pull-right[.small[
- echarts4r
  - [echarts4r vignette](https://echarts4r.john-coene.com/index.html)
  - [Paul Simmering: Exploring echarts4r](https://rpubs.com/paul_simmering/echarts)
  
- Value boxes
  - [Joshua Kunst: valueBoxes and Sparklines](https://jkunst.com/blog/posts/2020-06-26-valuebox-and-sparklines/)

- Shiny dashboards
  - [R Studio tutorial](https://rstudio.github.io/shinydashboard/)
  - [Themes](https://github.com/nik01010/dashboardthemes)

- Optimizing your ShinyApp
  - [Make your ShinyApp faster](https://appsilon.com/r-shiny-faster-updateinput-css-javascript/)
  - [shiny.worker](https://www.r-bloggers.com/shiny-worker-speed-up-r-shiny-apps-by-offloading-heavy-calculations/)
]]

---
class: inverse, middle, center

---
.footer[Illustrations are either created by myself or provided by www.canva.com]