Shiny Apps

]

# Week 13: .fancy[Shiny Apps]

### <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:white;overflow:visible;position:relative;"><path d="M243.4 2.6l-224 96c-14 6-21.8 21-18.7 35.8S16.8 160 32 160v8c0 13.3 10.7 24 24 24H456c13.3 0 24-10.7 24-24v-8c15.2 0 28.3-10.7 31.3-25.6s-4.8-29.9-18.7-35.8l-224-96c-8.1-3.4-17.2-3.4-25.2 0zM128 224H64V420.3c-.6 .3-1.2 .7-1.8 1.1l-48 32c-11.7 7.8-17 22.4-12.9 35.9S17.9 512 32 512H480c14.1 0 26.5-9.2 30.6-22.7s-1.1-28.1-12.9-35.9l-48-32c-.6-.4-1.2-.7-1.8-1.1V224H384V416H344V224H280V416H232V224H168V416H128V224zm128-96c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z"/></svg> EMSE 4572: Exploratory Data Analysis
### <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:white;overflow:visible;position:relative;"><path d="M272 304h-96C78.8 304 0 382.8 0 480c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32C448 382.8 369.2 304 272 304zM48.99 464C56.89 400.9 110.8 352 176 352h96c65.16 0 119.1 48.95 127 112H48.99zM224 256c70.69 0 128-57.31 128-128c0-70.69-57.31-128-128-128S96 57.31 96 128C96 198.7 153.3 256 224 256zM224 48c44.11 0 80 35.89 80 80c0 44.11-35.89 80-80 80S144 172.1 144 128C144 83.89 179.9 48 224 48z"/></svg> John Paul Helveston
### <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:white;overflow:visible;position:relative;"><path d="M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z"/></svg> November 30, 2022

]

---

---

---

---

---

# Quiz 5

### Instructions will be posted in the #class channel on slack

]

]

---

# 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')
```

---

]

</br>

# Interactive Webapps in R

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

]

---

# Week 13: .fancy[Shiny Apps]

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

### Intermission

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

---

# Week 13: .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`

You can insert all the code at once with the shinyapp snippet!

Just start typing `shiny`...

]

```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.

---

## Your Turn

### `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 13: .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")
    )
  )
)
```

]

]

---

### `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")
)
```

]

]

---

### `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"))
)
```

]

]

---

# 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(…)
  )
)
```

]

]

---

## 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

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(…)
    )
  )
)
```

]

]

---

# **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 13: .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))
```

]

]

---

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

`ui`

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

]

`server`

```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>`

`ui`

```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" 
      ) 
    )
  )
)
```

]]

`server`

```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

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 13: .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

See example in `html.R` app

```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/2022-Fall/",
    "Class home page"),
  HTML("<p>Raw html</p>")
)
```

]

]

---

# Can also just use plain markdown

See example in `markdown.R` app

```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/2022-Fall/)
  ")
)
```

]

]

---

# Quick practice

Open your `caseConverter.R` app and add html functions or markdown to add the following:

- 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>
    )
  )
)
```

]

]

---

## 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 13: .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

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!)