Interactive Plotting

class: center, middle, inverse, title-slide

# Interactive Plotting
## with Shiny
### Basel R Bootcamp <a href='https://therbootcamp.github.io'>www.therbootcamp.com</a> <a href='https://twitter.com/therbootcamp'>@therbootcamp</a>
### July 2018

---

layout: true

<div class="my-footer">
<a href="https://therbootcamp.github.io/">BaselRBootcamp, July 2018</a>
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
&emsp;&emsp;&emsp;&emsp;&emsp;
<a href="https://therbootcamp.github.io/">www.therbootcamp.com</a>
</div>

---

---
## This is Shiny

---

# What is Shiny?

<img src="https://github.com/therbootcamp/therbootcamp.github.io/blob/master/_sessions/_image/shiny_definition.png?raw=true" height="450px"></img> 
 <a href="http://shiny.rstudio.com/https://raw.githubusercontent.com/therbootcamp/therbootcamp.github.io/master/_sessions/_image/shiny-cheatsheet.pdf">RStudio cheat sheet</a>

---

# What does that mean?

.pull-left4[

<high>Create interactive websites</high> to explore, analyse, and visualize data all within R Studio!

No need to learn `HTML`, `CSS`, `Javascript`!

]

.pull-right5[
Example

 <img src="https://raw.githubusercontent.com/therbootcamp/therbootcamp.github.io/master/_sessions/_image/shiny_ss.png"></img>

]

---

## Scatterplot App

---

## FFTrees Shiny App

<a href="https://econpsychbasel.shinyapps.io/shinyfftrees/">econpsychbasel.shinyapps.io/shinyfftrees</a>

---

## Balloon Analogue Risk Task (BART) Shiny App

<a href="https://econpsychbasel.shinyapps.io/shinypsych_bart/">econpsychbasel.shinyapps.io/shinypsych_bart</a>

---

# Shiny

---

.pull-left4[

# Shiny is a new world...

Shiny is built on R, but it is a <high>very</high> different animal.

Good News

All of your standard plotting and analysis code will still be <high>regular R</high>

Bad News

To program a full app, you must learn the <high>reactive</high> language of Shiny.

Learn by example. Tons of shiny apps online. Most code is available.

]

.pull-right55[
 

 <img src="https://raw.githubusercontent.com/therbootcamp/therbootcamp.github.io/master/_sessions/_image/learnshiny_B.png"></img>

<center><a href = http://Shiny.rstudio.com>shiny.rstudio.com, </a><a href = "https://shiny.rstudio.com/gallery/">RStudio Shiny Example Gallery</a>

]
---
# How programming a Shiny App looks

---
# Structure of a Shiny App

---

P.S. You'll create a very similar app in the practical!

<div class="center_text_2">
 
 Let's explore the user interface of an app!
 
</div>

---
# User Interface

---
# User Interface

---
# User Interface

---
# User Interface

---
# User Interface

---
# User Interface

---
# User Interface

---
# User Interface

---
# User Interface

---
# The final app!

---
# User Interface

Main components: <high>Widgets</high>, <high>layouts</high>, and <high>plots</high>

---

# User Interface, Widgets

Widgets are simple fields added to the user interface for users to add inputs.

---

# Server

.pull-left35[

All code that creates plots, does machine learning ... (really anything!) goes in the <high>server()</high> function.

To present output like a plot, it must be <high>rendered</high> in the server using a special rendering function like `renderPlot()`

Once it is rendered, it is sent to the output and displayed in the user interface using an <high>output function</high> like `plotOutput()`.

]

.pull-right6[

]

---

.pull-left45[

# Server

```r
library(shiny)

# User Interface:
ui <- fluidPage(
 mainPanel(
 textInput("Title", "Title"),
 plotOutput("myplot") # Create the plot output$displot
 )
)

server <- function(input, output) {

x <- ChickWeight$weight # Define x

# Send rendered plot to output
 output$myplot <- renderPlot({
 hist(x, main = input$Title)
 })
}

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

]

.pull-right45[
 
<iframe src="https://econpsychbasel.shinyapps.io/barebones_hist/" width="800" height="550"></iframe>

]

---

# Publishing (hosting) an app

.pull-left45[

You can always <high>run a Shiny app locally</high> on your machine.

To get it online, you need to put it on a <high>Shiny Server</high>.

Publish an app (with some restrictions) at http://shinyapps.io from RStudio with one click!

Install a local server at your business (RStudio: $10,000 / year)

Other providers exist (e.g.; Amazon Web Services)

]

.pull-right45[

]

---
# Practical

In the practical, we will create the following app from scratch, and publish it online!

---

# Practical

<a href="https://therbootcamp.github.io/BaselRBootcamp_2018July/_sessions/Shiny/Shiny_practical.html">Link to practical</a>