Shiny Apps

.leftcol30[
<center>
<img src="https://raw.githubusercontent.com/emse-eda-gwu/2021-Spring/master/images/eda_hex_sticker.png" width=250>
</center>
]

### <svg style="height:0.8em;top:.04em;position:relative;fill:white;" viewBox="0 0 512 512"><path d="M496 128v16a8 8 0 0 1-8 8h-24v12c0 6.627-5.373 12-12 12H60c-6.627 0-12-5.373-12-12v-12H24a8 8 0 0 1-8-8v-16a8 8 0 0 1 4.941-7.392l232-88a7.996 7.996 0 0 1 6.118 0l232 88A8 8 0 0 1 496 128zm-24 304H40c-13.255 0-24 10.745-24 24v16a8 8 0 0 0 8 8h464a8 8 0 0 0 8-8v-16c0-13.255-10.745-24-24-24zM96 192v192H60c-6.627 0-12 5.373-12 12v20h416v-20c0-6.627-5.373-12-12-12h-36V192h-64v192h-64V192h-64v192h-64V192H96z"/></svg> EMSE 4575: Exploratory Data Analysis
### <svg style="height:0.8em;top:.04em;position:relative;fill:white;" viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg> John Paul Helveston
### <svg style="height:0.8em;top:.04em;position:relative;fill:white;" viewBox="0 0 448 512"><path d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"/></svg> April 14, 2021
]

---

# Quiz 5

---

# License

## These slides were modified from [Florencia D'Andrea](https://florencia.netlify.app/)'s [RLadies Shiny Meetup Slides](https://github.com/flor14/rladies_shiny_meetup_2020)

This work is licensed under a</br>[Creative Commons Attribution-ShareAlike 4.0](http://creativecommons.org/licenses/by-sa/4.0/) International License

---

# New libraries to install

```r
install.packages('shiny')
install.packages('shinyWidgets')
install.packages('rsconnect')
```

---

.leftcol40[
<center>
<img src="https://github.com/rstudio/shiny/raw/master/man/figures/logo.png" width=300>
</center>
]

# Interactive Webapps in R

## Check out the [Shiny Gallery](https://shiny.rstudio.com/gallery/)
]

---

# Week 14: .fancy[Shiny Apps]

### 1. Anatomy of a Shiny App
### 2. User Interface
### 3. Server

### Intermission

### 4. Extras
### 5. Deploying your App

---

# Week 14: .fancy[Shiny Apps]

### 1. .orange[Anatomy of a Shiny App]
### 2. User Interface
### 3. Server

### Intermission

### 4. Extras
### 5. Deploying your App

---

# Anatomy of a Shiny App

A Shiny app is a web page (UI) connected to a computer running a live R session (Server)

---

# `app.R`

Just start typing `shiny`...

<img src="images/snippet_2.png" width="80%" style="display: block; margin: auto;" />
]

```r
library(shiny)

ui <- fluidPage(
  
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)
```
]

---

# Building a shiny app

**`ui`**

1. Pick a layout function

2. Add inputs widgets

3. Add `*Output()` functions

]

**`server`**

1. Use `render*()` functions to make outputs

2. Link outputs with `output$<id>`

3. Link inputs with `input$<id>`

]

---

# Run the app 🎬

- **Option 1**: Click the "Run App" button in the toolbar:

- **Option 2**: Use a keyboard shortcut: Cmd/Ctrl + Shift + Enter.

- **Option 3**: `shiny::runApp()` with the path to the **app.R** file.

---

### `hello_shiny.app`

File -> New File -> Shiny Web App...
]

```r
*library(shiny)

# Define UI for application that draws a histogram
*ui <- fluidPage(

# Application title
    titlePanel("Old Faithful Geyser Data"),

# Sidebar with a slider input for number of bins 
    sidebarLayout(
        sidebarPanel(
            sliderInput("bins",
                        "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30)
        ),

# Show a plot of the generated distribution
        mainPanel(
           plotOutput("distPlot")
        )
    )
)

# Define server logic required to draw a histogram
*server <- function(input, output) {

output$distPlot <- renderPlot({
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

# draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
}

# Run the application 
*shinyApp(ui = ui, server = server)
```
]]

---

# Week 14: .fancy[Shiny Apps]

### 1. Anatomy of a Shiny App
### 2. .orange[User Interface]
### 3. Server

### Intermission

### 4. Extras
### 5. Deploying your App

---

background-color: #fff
class: center

## User Interface (UI)

[Matryoshka Dolls](https://en.wikipedia.org/wiki/Matryoshka_doll)

---

background-color: #fff

### Organize panels and elements into a layout with a **layout function**

### Top level is usually `fluidPage()`

---

background-color: #fff

---

### `sidebarLayout()`

```r
ui <- fluidPage(

titlePanel("Hello Shiny!"),

* sidebarLayout(

*   sidebarPanel(
      sliderInput( 
        "bins", label = "Number of bins:",
        min = 1, value = 30, max = 50
      )
    ),

*   mainPanel(
      plotOutput("distPlot")
    )
  )
)
```
]

.rightcol60[
<img src="images/sidebarLayout.png" width="100%" style="display: block; margin: auto;" />
]

---

### `navbarPage()`: An alternative to `fluidPage()`

Think of each `tabPanel()` as it's own `fluidPage()`

```r
*ui <- navbarPage("My Application",
  tabPanel("Component 1"),
  tabPanel("Component 2"),
  tabPanel("Component 3")
)
```
]

.rightcol60[
<img src="images/navbarPage.png" width="100%" style="display: block; margin: auto;" />
]

---

### `navbarPage()`: An alternative to `fluidPage()`

Use `navbarMenu()` to create a nested menu item

```r
ui <- navbarPage("My Application",
  tabPanel("Component 1"),
  tabPanel("Component 2"),
* navbarMenu("More",
*   tabPanel("Sub-Component A"),
*   tabPanel("Sub-Component B"))
)
```
]

.rightcol60[
<img src="images/navbarMenu.png" width="100%" style="display: block; margin: auto;" />
]

---

# The UI defines the "what" and "where" for:

## 1. **.orange[Inputs]**: collect values from the user
## 2. **Output**: display something to the user

---

background-color: #fff

# **Inputs**: collect values from the user

---

## Example Input: Radio buttons in the sidebar

```r
ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
*     radioButtons(…)
    ), 
    mainPanel(…)
  )
)
```
]

.rightcol70[
<img src="images/slide_mamu2.png" width="100%" style="display: block; margin: auto;" />
]

---

## Quick practice

Open the `widgets.R` app and click the "Run App" button

---

background-color: #fff
class: center, middle

---

background-color: #fff
class: center, middle

---

## Your Turn

.leftcol80[
1. Open the `widgets.R` file.
2. Go to the [Shiny Widgets Gallery](https://shiny.rstudio.com/gallery/widget-gallery.html) and pick a new widget. 
3. Look at the code for the widget and try to add that widget to the sidebar in the `widgets.R` file below all the other widgets.
4. Debug together! (ask each other questions)
]

---

# The UI defines the "what" and "where" for:

## 1. **Inputs**: collect values from the user
## 2. **.orange[Output]**: display something to the user

---

## Example Output: Put a plot in the main panel

```r
ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      radioButtons(…) 
    ), 
    mainPanel(
*     plotOutput(…)
    )
  )
)
```
]

.rightcol70[
<img src="images/slide_mamu3.png" width="100%" style="display: block; margin: auto;" />
]

---

# **Output**: display something to the user

Output function  | Description
-----------------| ---------------
`plotOutput()`   | Display a reactive _plot_
`dataTableOutput()` | Display a `DT::datatable()`
`textOutput()`   | Display reactive _text_
`imageOutput()`  | Display an image

---

# Week 14: .fancy[Shiny Apps]

### 1. Anatomy of a Shiny App
### 2. User Interface
### 3. .orange[Server]

### Intermission

### 4. Extras
### 5. Deploying your App

---

# Building a shiny app

**`ui`**

1. Pick a layout function, e.g. `sidebarLayout()`

2. Add inputs widgets

3. Add `*Output()` functions

]

**`server`**

1. Use `render*()` functions to make outputs

2. Link outputs with `output$<id>`

3. Link inputs with `input$<id>`

]

---

background-color: #fff

---

# Using `renderPlot()`: make a plot

```r
library(ggplot2)

ggplot(mpg) +
  geom_point(
    aes(x = displ, y = hwy, color = class))
```
]

.rightcol[
<img src="figs/unnamed-chunk-20-1.png" width="504" style="display: block; margin: auto;" />
]

---

## Link plot to output with `output$<id>`

```r
ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      radioButtons(…) 
    ), 
    mainPanel(
*     plotOutput(
*       outputId = "mpg_plot"
*     )
    )
  )
)
```
]

```r
server <- function(input, output, session) {
* output$mpg_plot <- renderPlot({
    ggplot(mpg) +
      geom_point(
        aes(x = displ, y = hwy, color = class))
  })
}
```
]

---

## Link user inputs to plot with `input$<id>`

```r
ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      radioButtons(
*       inputId = "xvar",
        label = "Select the x-axis variable:",
        selected = "displ",
        choices = c(
*         "Highway miles per gallon" = "hwy",
*         "City miles per gallon" = "cty",
*         "Engine displacement, in litres" = "displ")
      ),
    ), 
    mainPanel(
      plotOutput(
        outputId = "mpg_plot" 
      ) 
    )
  )
)
```
]]

```r
server <- function(input, output, session) {
  output$mpg_plot <- renderPlot({ 
    ggplot(mpg) +
      geom_point(
*       aes_string(
*         x = input$xvar,
          y = "hwy", 
          color = "class")) 
  })
}
```

**Note**: I switched the ggplot code from</br>`aes()` to `aes_string()`
]]

---

## Quick practice

Open the `mpg.R` app and click the "Run App" button

---

## Your Turn

.leftcol[
1. Open the `caseConverter.R` file.
2. In the `server`: Write code in the provided `renderText()` to convert the input text to lower case.
3. Run the app and test that it's working.
4. In the `ui` main panel: Add two more `textOutput()` functions for also displaying the input text in "upper" case and "title" case.
3. In the `server`: Define two more outputs to convert the input text to "upper" case and "title" case.
]

---

background-color: #fff
class: center

# Intermission

---

# Week 14: .fancy[Shiny Apps]

### 1. Anatomy of a Shiny App
### 2. User Interface
### 3. Server

### Intermission

### 4. .orange[Extras]
### 5. Deploying your App

---

# Use html functions to add text

```r
ui <- fluidPage(
  h1("Header 1"),
  h2("Header 2"),
  h3("Header 3"),
  h4("Header 4"),
  p("Some text"),
  br(),
  p(strong("Some bold text")),
  p(em("Some italic text")),  
  p(code("Some code")),  
  hr(),
  a(href="https://eda.seas.gwu.edu/2021-Spring/", 
    "Class home page"),
  HTML("<p>Raw html</p>")
)
```
]

---

# Can also just use plain markdown

```r
ui <- fluidPage(
  markdown("
  # Header 1
  ## Header 2
  ### Header 3
  #### Header 4
  Some text
  **Some bold text**
  _Some italic text_
  `Some code`
  [Class home page](https://eda.seas.gwu.edu/2021-Spring/)
  ")
)
```
]

---

# Quick practice

- Give the app a title by inserting a level 1 header in the `fluidPage()` function and before the `sidebarLayout()` function.
- In the main `ui` panel, add a short description of what the app does.  
]

---

background-color: #fff
class: center

## Add a theme with ["shinythemes"](https://rstudio.github.io/shinythemes/) package

---

### .center[Insert theme at top of main `ui` layout function]

```r
library(shinythemes)

ui <- fluidPage(
* theme = shinytheme("sandstone"),
  sidebarLayout(
    sidebarPanel(
      <insert widgets>
    ), 
    mainPanel(
      <insert outputs>
    )
  )
)
```
]

.rightcol60[
<img src="https://rstudio.github.io/shinythemes/images/sandstone.png" width="100%" style="display: block; margin: auto;" />
]

---

## Fancier widgets with ["shinyWidgets"](http://shinyapps.dreamrs.fr/shinyWidgets/) package

### Open the `shinyWidgets.R` app and click the "Run App" button

---

# Common shiny situations

### - Filtering for a single category: `federalSpending.R`
### - Filtering for multiple categories: `federalSpendingCompare.R`

---

### .center[Filtering for a single category: `federalSpending.R`]

```r
ui <- fluidPage(

h1("Federal R&D Spending by Department"),

sidebarLayout(

sidebarPanel(
      selectInput(
*       inputId = "department",
        label = "Choose a department:",
        selected = "DOD",
        choices = c(...)
    ),

mainPanel(
      plotOutput("spendingPlot")
    )
  )
)
```
]]

```r
server <- function(input, output){
  output$spendingPlot <- renderPlot({

# Filter out the data based on the user input
*   data <- federal_spending %>%
*     filter(department == input$department)

ggplot(data) +
      geom_col(
        aes(x = year, y = rd_budget),
        fill = "steelblue", width = 0.7, alpha = 0.8) +
      scale_y_continuous(
        labels = scales::dollar,
        expand = expansion(mult = c(0, 0.05))) +
      theme_half_open(font_size = 18) +
      labs(
        x = "Year",
        y = "$USD Millions",
        title = paste("Federal R&D Spending"))

})
}
```
]]

---

### .center[Filtering for multiple categories: `federalSpendingCompare.R`]

```r
ui <- fluidPage(

h1("Federal R&D Spending by Department"),

sidebarLayout(

sidebarPanel(
      selectInput(
        inputId = "department",
        label = "Choose a department:",
        selected = "DOD",
*       multiple = TRUE,
        choices = c(...)
    ),

mainPanel(
      plotOutput("spendingPlot")
    )
  )
)
```
]]

```r
server <- function(input, output){
  output$spendingPlot <- renderPlot({

# Filter out the data based on the user input
    data <- federal_spending %>% 
*     filter(department %in% input$department)

ggplot(data) +
      geom_col(
        aes(x = year, y = rd_budget),
        fill = "steelblue", width = 0.7, alpha = 0.8) +
*     facet_wrap(~department) +
      scale_y_continuous(
        labels = scales::dollar,
        expand = expansion(mult = c(0, 0.05))) +
      theme_half_open(font_size = 18) +
      labs(
        x = "Year",
        y = "$USD Millions",
        title = paste("Federal R&D Spending"))

})
}
```
]]

---

# If you really want to get good at this:

## 1. Print out this [Cheatsheet](https://shiny.rstudio.com/articles/cheatsheet.html)

## 2. Watch this [2.5 Hour Comprehensive RStudio Tutorial](https://shiny.rstudio.com/tutorial)

## 3. Use this reference manual: [Mastering Shiny](https://mastering-shiny.org/)

---

# Week 14: .fancy[Shiny Apps]

### 1. Anatomy of a Shiny App
### 2. User Interface
### 3. Server

### Intermission

### 4. Extras
### 5. .orange[Deploying your App]

---

# You can deploy an app for free on [shinyapps.io](https://www.shinyapps.io/)

### Follow [the RStudio guide](https://shiny.rstudio.com/articles/shinyapps.html)

1. Create a shinyapps.io account
2. Open your tokens, click "Show", copy the code
3. Run the code in RStudio 
4. Deploy your app:

```r
library(rsconnect)
deployApp()
```

---

## Your Turn

.leftcol80[
1. Open the `internetUsers.R` file.
2. Modify the server code so that the inputs control the plot.
3. Deploy your app to shinyapps.io
]

---

## Fill out course evals: https://gwu.smartevals.com/

### (please be specific!)