Plotting: 2.0

class: center, middle, inverse, title-slide

# Plotting: 2.0
## Shiny
### The R Bootcamp<br/>Twitter: <a href='https://twitter.com/therbootcamp'><span class="citation">@therbootcamp</span></a>
### April 2018

---

---
## This is Shiny

# [https://shiny.rstudio.com/gallery/](https://shiny.rstudio.com/gallery/)

# [https://www.showmeshiny.com/](https://www.showmeshiny.com/)

---
## What is Shiny?

<div class="figure" style="text-align: center">
<img src="https://raw.githubusercontent.com/therbootcamp/therbootcamp.github.io/master/_sessions/_image/shiny_definition.png" alt="&lt;a href=http://shiny.rstudio.com/https://raw.githubusercontent.com/therbootcamp/therbootcamp.github.io/master/_sessions/_image/shiny-cheatsheet.pdf&gt;R Studio&lt;/a&gt;" width="90%" />
<p class="caption"><a href=http://shiny.rstudio.com/https://raw.githubusercontent.com/therbootcamp/therbootcamp.github.io/master/_sessions/_image/shiny-cheatsheet.pdf>R Studio</a></p>
</div>

---
## What does that mean?

.pull-left45[

- Shiny allows you to easy create interactive websites to explore, analyse, and visualize data

- No need to learn HTML, CSS, Javascript

]

.pull-right45[

### I can easily do this all in Shiny!

]

---
## Histogram Example

---
## FFTrees Example

https://econpsychbasel.shinyapps.io/shinyfftrees/

---
## Balloon Analogue Risk Task

https://econpsychbasel.shinyapps.io/shinypsych_bart/

---
## Shiny

<div class="figure" style="text-align: center">
<img src="https://raw.githubusercontent.com/therbootcamp/therbootcamp.github.io/master/_sessions/_image/whatyoucando.png" alt="&lt;a href = http://shiny.rstudio.com&gt;R Studio&lt;/a&gt;" width="60%" />
<p class="caption"><a href = http://shiny.rstudio.com>R Studio</a></p>
</div>

---
## Shiny Tutorials

.pull-left45[

### R Studio has great tutorials for creating Shiny Apps

<div class="figure" style="text-align: center">
<img src="https://raw.githubusercontent.com/therbootcamp/therbootcamp.github.io/master/_sessions/_image/learnshiny_B.png" alt="&lt;a href = http://shiny.rstudio.com&gt;R Studio&lt;/a&gt;" width="100%" />
<p class="caption"><a href = http://shiny.rstudio.com>R Studio</a></p>
</div>

]

.pull-right45[

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

<div class="figure" style="text-align: center">
<img src="https://raw.githubusercontent.com/therbootcamp/therbootcamp.github.io/master/_sessions/_image/shinygallery.png" alt="&lt;a href = http://shiny.rstudio.com&gt;R Studio&lt;/a&gt;" width="90%" />
<p class="caption"><a href = http://shiny.rstudio.com>R Studio</a></p>
</div>

]

---
# How programming a Shiny App looks

---
## Structure of a Shiny App

---
 <br>
 <br>
 <br>
 
 # Let's explore the user interface of an app!
 
 ### P.S. You'll create this app in the practical!

---
## User Interface

---
## User Interface

---
## User Interface

---
## User Interface

---
## User Interface

---
## User Interface

---
## User Interface

---
## User Interface

---
## User Interface

---
### The final app!

---
## User Interface

The user interface typically contains two main components: Widgets and

---

## User Interface, Widgets

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

---
## User Interface, Layout

- You can control the layouts of apps with layout functions

---
## Server

<font size = 4>All R code that creates plots, does machine learning, accesses databases, searches twitter data (really anything!) goes in the `server()` function.</font>

---
## Server

.pull-left4[

<font size = 5>To present output (e.g.; a plot), it must be <b>rendered</b> in the server using a special rendering function renderXX()</font><br><br>

<font size = 5>Once it is rendered, it is sent to the <b>output</b> and displayed in the user interface using an <b>xxOutput()</b> function.</font>

]

.pull-right55[

### To send output to the user interface, you must use a render function

]

---
## Server

.pull-left45[

]

.pull-right45[

```r
library(shiny)

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

server <- function(input, output) {

# Define x
  x <- ChickWeight$weight

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

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

]

---
## Rendering output

The Shiny cheatsheet explains the most common functions for rendering and presenting output.

---
## Publishing (hosting) an app

.pull-left45[
<br>
<br>
- You can always run a Shiny app locally on your machine.
- To get it online, you need to put it on a Shiny Server.
- 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[

<div class="figure" style="text-align: center">
<img src="https://raw.githubusercontent.com/therbootcamp/therbootcamp.github.io/master/_sessions/_image/shinypublish.png" alt="&lt;a href = http://shiny.rstudio.com&gt;R Studio&lt;/a&gt;" width="100%" />
<p class="caption"><a href = http://shiny.rstudio.com>R Studio</a></p>
</div>

]

---
## Practical

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

---
## Questions?

.pull-left45[

]

.pull-right45[

<div class="figure" style="text-align: center">
<img src="https://raw.githubusercontent.com/therbootcamp/therbootcamp.github.io/master/_sessions/_image/shinygallery.png" alt="&lt;a href = http://shiny.rstudio.com&gt;R Studio&lt;/a&gt;" width="90%" />
<p class="caption"><a href = http://shiny.rstudio.com>R Studio</a></p>
</div>

]

---

## Plotting II Pratical

<p><font size=6><b><a href="https://therbootcamp.github.io/BaselRBootcamp_2018April/_sessions/D3S3_PlottingII/PlottingII_practical.html">Link to Plotting II practical</a>

---

## ggplotgui