d1_shiny_slides.RMD

---
title: "Data Visualisation using RShiny"
author: "Laurie Baker, Elaine Ferguson, Will Harvey and Rachel Steenson"
date: "**Tanzania**, August 2019"
output: 
  ioslides_presentation:
    widescreen: true
runtime: shiny
---

```{r, echo=FALSE, results='hide', message=FALSE, warning=FALSE}
library(dplyr)
library(ggplot2)
library(lubridate)
library(leaflet)
library(rgdal)
library(kableExtra)
library(shiny)
library(png)
library(RColorBrewer)

# Load data
raw_data <- read.csv("data/raw_data.csv", stringsAsFactors = FALSE)
region_shp <- readOGR("data/TZ_Region_2012", "TZ_Region_2012")

# Format as a date
raw_data$date <- as.Date(raw_data$date) 

# Create breaks for ts app
yrs <- c(unique(year(raw_data$date)), 2015) # Extract year and take only the unique years
plot_breaks = seq(from=0, to=12*length(yrs)-1, by=12)

# Create a colour palette
col_palette <- brewer.pal(name="Dark2", n=8)
```

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

<style>
div.footnotes {
position: absolute;
bottom: 0;
margin-bottom: 10px;
width: 80%;
font-size: 0.6em;}
.blue {color: #4E23B8;}
.ui-background {background-color: #fcf0cd;}
.server-background {background-color: #dfecfc;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('slide:not(.backdrop):not(.title-slide)').append('<div class=\"footnotes\">');

$('footnote').each(function(index) {
var text  = $(this).html();
var fnNum = (index+1).toString();
$(this).html(fnNum.sup());

var footnote   = fnNum + '. ' + text + '<br/>';
var oldContent = $(this).parents('slide').children('div.footnotes').html();
var newContent = oldContent + footnote;
$(this).parents('slide').children('div.footnotes').html(newContent);
});
});
</script>

<!----------------------------------------------------------------------------->
## Course Overview {.smaller}

<h3><b>Day 1:</b></h3>
<ul>
<li> 1.1 Getting to know your data </li>
<li> 1.2 Data subsetting and summarising </li>
<li> 1.3 Build exploratory plots </li>
<li> <b class="blue"> 1.4 Building an interactive plot in RShiny </b></li>
</ul>

<h3><b>Day 2:</b></h3>
<ul>
<li> 2.1 Introduction to leaflet </li>
<li> 2.2 Building a leaflet map in R </li>
<li> 2.3 Build an interactive map in RShiny </li>
</ul>

<h3><b>Day 3:</b></h3>
<ul>
<li> 3.1 Review </li>
<li> 3.2 Build your own apps! </li>
</ul>

<!----------------------------------------------------------------------------->
## Building an interactive plot in RShiny  

A shiny app is normally built with 2 sections:  

- The <b>ui</b> (user interface) contains code for the part of the app that the user sees.  
- The <b>server</b> contains code for the processing behind the user interface.

These can be contained in one R script, or as multiple R scripts saved in the same folder. 

<!----------------------------------------------------------------------------->
## Your turn

Complete section 1.4a of the handout.

<!----------------------------------------------------------------------------->
## Summary - section 1.4a  

  - The 2 methods are very similar
  - It can be easier to separate your code and sections using the 'multiple file' layout.  

All of our examples and practice sections will use seperate <b>server.R</b> and <b>ui.R</b> files.  
  
Whenever we show example code, <span class="ui-background">ui code will have a yellow background</span> and <span class="server-background">server code will have a blue background</span>.

<!----------------------------------------------------------------------------->
## Inputs  

- To make the app interactive, you need an **input** that the user can change  
- Shiny includes a selection of functions for this called <b>widgets</b>.
- These are used in the <b>ui</b> to set the options for the user to interact with. 

``` {r, echo=FALSE}
widgets <- data.frame(Name=c("actionButton()", "checkboxInput()", "checkboxGroupInput()",
                             "dateInput()", "dateRangeInput()", "numericInput()", "radioButtons()",
                             "selectInput()", "sliderInput()", "textInput()"),
                      Description=c("a button click input", "a single checkbox",
                                    "a set of checkboxes where multiple can be selected", 
                                    "a calendar for date selection",
                                    "a pair of calendars for start and end date selection",
                                    "a free-text for numbers", "a set of buttons where only 1 can be selected",
                                    "a dropdown menu", "a slider bar", "a free-text for letters/words"))
kable_styling(kable(widgets), font_size=16, bootstrap_options="condensed") %>%
  column_spec(column=1, background="#fcf0cd")
```

<!----------------------------------------------------------------------------->
## Outputs  

- An **output** is required to show the user the effects of their **input**  
- ``render()`` is used in the <b>server</b> to generate the output
- ``output()`` is used in the <b>ui</b> to display the output to the user

``` {r, echo=FALSE}
outputs <- data.frame("render"=c("renderImage()", "renderPlot()", "renderPrint()",
                                 "renderTable()", "DT::renderDataTable()", "renderText()", 
                                 "rendeerUI()"),
                      "output"=c("imageOutput()", "plotOutput()", "verbatimTextOutput()",
                                 "tableOutput()", "dataTableOutput()", 
                                 "textOutput()", "uiOutput() or htmlOutput()"),
                      "Produces"=c("an image", "a plot/map", "any printed output formatted as code",
                                   "a table", "an interactable table", "any character string formatted to match app", 
                                   "any character string formatted with raw HTML code"))
kable_styling(kable(outputs), font_size=16, bootstrap_options="condensed") %>%
  column_spec(column=1, background="#dfecfc") %>%
  column_spec(column=2, background="#fcf0cd")
```

<!----------------------------------------------------------------------------->
## Using inputs and outputs together

<b>ui</b>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
# Input
radioButtons(inputId = "radio", label = "Choose a number:", selected = 1, 
             choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3)) 

# Output
verbatimTextOutput("chosen_number")
```

<b>server</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
# Render
output$chosen_number <- renderPrint({
  input$radio 
})
```

<!----------------------------------------------------------------------------->
## Using inputs and outputs together

<br>

```{r, echo=FALSE}
shinyApp(
  
  ui = fluidPage(
    tags$head(
      tags$style(HTML("
      #txt {font-size: 20px;}
      #txt b {font-family: 'Lucida Console', Monospace; color: #5bb662; font-size: 20px; font-weight: normal;}
    "))),
    
    HTML("<div id='txt'>Input: <b>radioButtons()</b></div>"),
    radioButtons(inputId="radio", label="Choose a number:", selected=1, 
                 choices=list("Choice 1"=1, "Choice 2"=2, "Choice 3"=3)), 
    
    br(),
    
    HTML("<div id='txt'>Input: <b>textOutput()</b></div>"),
    verbatimTextOutput("chosen_number")
  ),
  
  server = function(input, output) {
    output$chosen_number <- renderPrint({
      input$radio 
    })
  },
  
  options = list(height = 500)
)
```

<!----------------------------------------------------------------------------->
## 
<center>
<h2 class="blue"> What if we want the user to select <br> 
what data is shown? </h2>
</center>

<!----------------------------------------------------------------------------->
## User defined barplot

Before, we had you create a barplot of cases by sex:

```{r, eval = F, echo = T}
ggplot() + 
  geom_bar(data=raw_data, aes(x=sex, fill=sex)) + 
  theme_classic()
```

And by species:

```{r, eval = F, echo = T}
ggplot() + 
  geom_bar(data=raw_data, aes(x=species, fill=species)) + 
  theme_classic()
```

<br>
<span class="blue">What part of the code changes to make those two plots?<span>

<!----------------------------------------------------------------------------->
## User defined barplot

- In Shiny, we can let the user define what to plot.  
- E.g. rather than showing 2 plots, the user can swap between sex or species using the dropdown menu provided.
<br><br>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
selectInput(inputId = "xaxis", 
            label = h3("Select the x-axis variable:"),
            choices = list("Sex" = "sex", "Species" = "species"),
            selected = 1)
```

```{r, echo=FALSE}
shinyApp(
  
  ui = fluidPage(
    tags$head(
      tags$style(HTML("
      #txt {font-size: 20px;}
      #txt b {font-family: 'Lucida Console', Monospace; color: #5bb662; font-size: 20px; font-weight: normal;}
    "))),
   selectInput("xaxis", label = h3("Select the x-axis variable:"),
                    choices = list("Sex" = "sex", "Species" = "species"),
                    selected = 1)
  ),
  
  server = function(input, output) {}
)
```

<!----------------------------------------------------------------------------->
## User defined barplot {.smaller}

- The plot is made interactive by using the user's selection as an input in our server code.<br>
- We then make the plot visible to the user by adding an output to the ui.<br>

```{r, eval = F, echo = T, class.source="server-background"}
output$barPlot <- renderPlot({
  ggplot() + 
    geom_bar(data=raw_data, aes_string(x=input$xaxis, fill=input$xaxis)) + 
    theme_classic()
})
```

```{r, eval = F, echo = T, class.source="ui-background"}
plotOutput("barPlot", height=200)
```

```{r, echo=FALSE}
shinyApp(
  
  ui = fluidPage(
    tags$head(
      tags$style(HTML("
      #txt {font-size: 20px;}
      #txt b {font-family: 'Lucida Console', Monospace; color: #5bb662; font-size: 20px; font-weight: normal;}
    "))),
    sidebarLayout(
      sidebarPanel(
        selectInput("xaxis", label = h4("Select the x-axis variable:"),
                    choices = list("Sex" = "sex", "Species" = "species"),
                    selected = 1)
      ),
      mainPanel(
        plotOutput("barPlot", height=200)
      )
    )
  ),
  
  server = function(input, output) {
    output$barPlot <- renderPlot({
      ggplot() +
        geom_bar(data=raw_data, aes_string(x=input$xaxis, fill=input$xaxis)) +
        theme_classic() +
        theme(axis.text = element_text(size=14),
              axis.title = element_text(size=18),
              plot.title = element_text(size=20),
              legend.title = element_text(size=18),
              legend.text = element_text(size=14))
    })
  }
)
```

<!----------------------------------------------------------------------------->
## Your turn  

Read the <em>App Guide</em> handout, then complete section 1.4b of the handout.<br><br>
<center><img src="figures/day1_barplot_1.png" style="width: 90%;" /></center>

<!----------------------------------------------------------------------------->
## Summary - section 1.4b ui code

<b>shinyUI Side Panel</b>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
selectInput(inputId = "xaxis", 
            label = h3("Select the x-axis variable:"),
            choices = list("Sex" = "sex", "Species" = "species", "Age" = "age"),
            selected = 1)
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4b server code

<b>shinyServer Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
output$barPlot <- renderPlot({
  ggplot() +
    geom_bar(data=raw_data, 
             aes_string(x=input$xaxis), 
             fill=col_palette[1]) +
    labs(x=paste0(input$xaxis), y="Number of records") +
    ...
})
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4b app

```{r, echo=FALSE}
shinyApp(
  
  ui = fluidPage(
    tags$head(
      tags$style(HTML("
      #txt {font-size: 20px;}
      #txt b {font-family: 'Lucida Console', Monospace; color: #5bb662; font-size: 20px; font-weight: normal;}
    "))),
    sidebarLayout(
      sidebarPanel(
        selectInput("xaxis", label = h3("Select the x-axis variable:"),
                    choices = list("Sex" = "sex", "Species" = "species", "Age" = "age"),
                    selected = 1)
      ),
      mainPanel(
        plotOutput("barPlot", height=400)
      )
    )
  ),
  
  server = function(input, output) {
    output$barPlot <- renderPlot({
      ggplot() +
        geom_bar(data=raw_data, aes_string(x=input$xaxis), fill=col_palette[1]) +
        labs(x=paste0(input$xaxis), y="Number of records") +
        theme_classic() +
        theme(axis.text = element_text(size=14),
              axis.title = element_text(size=18),
              plot.title = element_text(size=20),
              legend.title = element_text(size=18),
              legend.text = element_text(size=14))
    })
  }
)
```

<!----------------------------------------------------------------------------->
## Your turn  

Complete section 1.4c of the handout.<br><br>
<center><img src="figures/day1_barplot_2.png" style="width: 90%;" /></center>

<!----------------------------------------------------------------------------->
## Summary - section 1.4c ui code

<b>shinyUI Side Panel</b>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
# Existing text output
verbatimTextOutput("output_text") 

# New text output
verbatimTextOutput("output_values") 
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4c server code 

<b>shinyServer Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
# Existing text output
output$output_text <- renderPrint({ 
  paste0("You have chosen to show '", input$xaxis, "' on the x-axis.")
})

# New text output
output$output_values <- renderPrint({
  summary(raw_data[[input$xaxis]])
})
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4c app

```{r, echo=FALSE}
shinyApp(
  
  ui = fluidPage(
    tags$head(
      tags$style(HTML("
      #txt {font-size: 20px;}
      #txt b {font-family: 'Lucida Console', Monospace; color: #5bb662; font-size: 20px; font-weight: normal;}
    "))),
    sidebarLayout(
      sidebarPanel(
        selectInput("xaxis", label = h3("Select the x-axis variable:"),
                    choices = list("Sex" = "sex", "Species" = "species", "Age" = "age"),
                    selected = 1),
        br(),
        verbatimTextOutput("output_text"),
        br(),
        verbatimTextOutput("output_values")
      ),
      mainPanel(
        plotOutput("barPlot", height=400)
      )
    )
  ),
  
  server = function(input, output) {
    output$barPlot <- renderPlot({
      ggplot() +
        geom_bar(data=raw_data, aes_string(x=input$xaxis), fill=col_palette[1]) +
        labs(x=input$xaxis, y="Number of records") +
        theme_classic() +
        theme(axis.text = element_text(size=14),
              axis.title = element_text(size=18),
              plot.title = element_text(size=20),
              legend.title = element_text(size=18),
              legend.text = element_text(size=14))
    })
    output$output_text <- renderPrint({
      paste0("You have chosen to show '", input$xaxis, "' on the x-axis.")
    })
    output$output_values <- renderPrint({
      summary(raw_data[[input$xaxis]])
    })
  }
)
```

<!----------------------------------------------------------------------------->
## Making your code 'reactive'  

- All code within the server must be contained within a **reactive** element, otherwise the app will fail to run.  
- The previous examples used ``render()`` functions, which are **reactive** but limited to a small amount of code.  

```{r echo=TRUE, eval=FALSE, class.source="ui-background"}
output$output_text <- renderPrint({
    paste0("You have chosen to show '", input$xaxis, "' on the x-axis.")
    })
```


## Making your code 'reactive' contd 
- If we want to process the data based on user input (e.g. filter, summarise), we need to wrap the code within a **reactive function**.  
  
- ``reactive()``  
- ``eventReactive()``
- ``reactiveValues()``
- ``observeEvent()``

<!----------------------------------------------------------------------------->
## 
<center>
<h2 class="blue"> What if we want the user to subset the data? </h2>
</center>

<!----------------------------------------------------------------------------->
## The ``reactive()`` function

- The ``reactive()`` function is used to carry out data processing in response to one or more user inputs, with the output saved as an object  

- Objects created in the function should be done with an ``=`` NOT ``<-``  

- The last line of the function should be the object you would like to be saved overall (e.g. a data subset)  

- When <b>any</b> input used in the ``reactive`` function is changed, the output will automatically update

<!----------------------------------------------------------------------------->
## An example with the ``reactive()`` function {.smaller}

<b>shinyUI Side Panel</b>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
radioButtons(inputId = "select_species", label = "Select a Species:",  
             choices = sort(unique(raw_data$species))),
```

<b>shinyUI Main Panel</b>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
tableOutput("chosen_species_info")
```

<b>shinyServer Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
data_sub <- reactive({
  data_subset = raw_data %>%
    filter(species == input$select_species)
  data_subset = head(data_subset)
  data_subset
})

output$chosen_species_info <- renderTable({
  data_sub()
})
```

<!----------------------------------------------------------------------------->
## An example with the ``reactive()`` function

<br><br>

```{r, echo=FALSE}
shinyApp(
  
  ui = fluidPage(
    tags$head(
      tags$style(HTML("
      #txt {font-size: 20px;}
      #txt b {font-family: 'Lucida Console', Monospace; color: #5bb662; font-size: 20px; font-weight: normal;}
    "))),
    
    sidebarLayout(
      sidebarPanel(
        HTML("<div id='txt'>Input: <b>radioButtons()</b></div>"),
        radioButtons(inputId = "select_species", label = "Select a Species:",  
                     choices = sort(unique(raw_data$species)))),
      mainPanel(
        
        HTML("<div id='txt'>Output: <b>tableOutput()</b></div>"),
        tableOutput("chosen_species_info")
      ))),
  
  server = function(input, output) {
    data_sub <- reactive({
      data_subset = raw_data %>%
        filter(species == input$select_species)
      data_subset = head(data_subset)
      data_subset
    })
    
    output$chosen_species_info <- renderTable({
      data_sub()
    })
  },
  
  options = list(height = 500)
)
```

<!----------------------------------------------------------------------------->
## Your turn  

Complete section 1.4d of the handout.<br><br>
<center><img src="figures/day1_timeseries_1.png" style="width: 90%;" /></center>

<!----------------------------------------------------------------------------->
## Summary - section 1.4d ui code

<b>Above shinyUI Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
options_list <- c("All Regions", sort(unique(raw_data$region)))
```

<b>shinyUI Side Panel</b>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
selectInput("select_region", label = h3("Select a Region:"),
            choices = options_list,
            selected = 1)
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4d server code (1/2)

<b>Above shinyServer Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
overall_summary <- raw_data %>%
  group_by(month) %>%
  summarise(n = length(month)) %>%
  mutate(region = "All Regions")

region_summary <- raw_data %>%
  group_by(month, region) %>%
  summarise(n = length(month))

summary_data <- bind_rows(overall_summary, region_summary)
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4d server code (2/2)

<b>shinyServer Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
data_subset <- reactive({
  data_sub = summary_data %>%
    filter(region==input$select_region | region=="All Regions")
  as.data.frame(data_sub)
})

output$tsPlot <- renderPlot({
   ggplot() +
      geom_path(data=data_subset(), aes(x=month, y=n, color=region), size=1) +
      scale_color_manual(name="Region", values=col_palette) +
      labs(title=input$select_region, x="Date (Month)", y="Number of records") + 
    ...
})
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4d app

```{r, echo=FALSE}
overall_summary_1.4d <- raw_data %>%
  group_by(month) %>%
  summarise(n = length(month)) %>%
  mutate(region = "All Regions")
region_summary_1.4d <- raw_data %>%
  group_by(month, region) %>%
  summarise(n = length(month))
summary_data_1.4d <- bind_rows(overall_summary_1.4d, region_summary_1.4d)

shinyApp(
  ui = fluidPage(
    sidebarLayout(
      sidebarPanel(
        selectInput("select_region", label = h3("Select a Region:"),
                    choices = c("All Regions", sort(unique(raw_data$region))),
                    selected = 1)),
      mainPanel(
        plotOutput("tsPlot", height=400)))
  ),
  server = function(input, output) {
    data_subset <- reactive({
      data_sub = summary_data_1.4d %>%
        filter(region==input$select_region | region=="All Regions")
      as.data.frame(data_sub)
    })
    output$tsPlot <- renderPlot({
      ggplot() +
        geom_path(data=data_subset(), aes(x=month, y=n, color=region), size=1) +
        scale_color_manual(name="Region", values=col_palette) +
        labs(title=input$select_region, x="Date (Month)", y="Number of records") +
        scale_x_continuous(breaks=plot_breaks, labels=yrs,
                           limits=c(min(overall_summary_1.4d$month), max(overall_summary_1.4d$month))) +
        theme_classic() +
        theme(axis.text = element_text(size=14), legend.text = element_text(size=14),
              axis.title = element_text(size=18), legend.title = element_text(size=18),
              plot.title = element_text(size=20))
    })
  }
)
```

<!----------------------------------------------------------------------------->
## Your turn  

Complete section 1.4e of the handout.<br><br>
<center><img src="figures/day1_timeseries_2.png" style="width: 90%;" /></center>  

<!----------------------------------------------------------------------------->
## Summary - section 1.4e ui code

<b>shinyUI Side Panel </b>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
checkboxGroupInput("select_species", label = h3("Select a Species"),
                         choices = list("Cat" = "cat", "Dog" = "dog", "Human"="human", 
                                        "Jackal"="jackal", "Lion"="lion"),
                         selected = c("cat", "dog", "human", "jackal", "lion"))
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4e server code (1/2) {.smaller}

<b>Above shinyServer Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
overall_summary <- raw_data %>%
  group_by(month) %>%
  summarise(n = length(month)) %>%
  mutate(region="All data",
         species="All data")

region_allspecies_summary <- raw_data %>%
  group_by(month, region) %>%
  summarise(n = length(month)) %>%
  mutate(species="All species")

species_allregions_summary <- raw_data %>%
  group_by(month, species) %>%
  summarise(n = length(month)) %>%
  mutate(region="All Regions")

region_species_summary <- raw_data %>%
  group_by(month, region, species) %>%
  summarise(n = length(month))

summary_data <- bind_rows(overall_summary, region_allspecies_summary, 
                          species_allregions_summary, region_species_summary)
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4e server code (2/2) {.smaller}

<b>shinyServer Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
data_subset <- reactive({
  
  data_sub = summary_data %>%
    filter(region==input$select_region | region=="All data")
  
  if(length(input$select_species)>0){
    data_sub = data_sub %>%
      filter(species %in% input$select_species | species=="All species" | species=="All data")
  } else {
    data_sub = data_sub %>%
      filter(species=="All species" | species=="All data")
  }
  
  data_sub = data_sub %>%
    group_by(month, region, species) %>%
    summarise(n = sum(n))
  as.data.frame(data_sub)
})
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4e app

```{r, echo=FALSE}
overall_summary_1.4e <- raw_data %>%
  group_by(month) %>%
  summarise(n = length(month)) %>%
  mutate(region="All data",
         species="All data")
region_allspecies_summary_1.4e <- raw_data %>%
  group_by(month, region) %>%
  summarise(n = length(month)) %>%
  mutate(species="All species")
species_allregions_summary_1.4e <- raw_data %>%
  group_by(month, species) %>%
  summarise(n = length(month)) %>%
  mutate(region="All Regions")
region_species_summary_1.4e <- raw_data %>%
  group_by(month, region, species) %>%
  summarise(n = length(month))
summary_data_1.4e <- bind_rows(overall_summary_1.4e, region_allspecies_summary_1.4e, 
                               species_allregions_summary_1.4e, region_species_summary_1.4e)

shinyApp(
  ui = fluidPage(
    sidebarLayout(
      sidebarPanel(
        selectInput("select_region", label = h3("Select a Region:"),
                    choices = c("All Regions", sort(unique(raw_data$region))),
                    selected = 1),
        br(),
        checkboxGroupInput("select_species", label = h3("Select a Species"),
                           choices = list("Cat" = "cat", "Dog" = "dog", "Human"="human", 
                                          "Jackal"="jackal", "Lion"="lion"),
                           selected = c("cat", "dog", "human", "jackal", "lion"))),
      mainPanel(
        plotOutput("tsPlot", height=400)))),
  
  server = function(input, output) {
    data_subset <- reactive({
      data_sub = summary_data_1.4e %>%
        filter(region==input$select_region | region=="All data")
      if(length(input$select_species)>0){
        data_sub = data_sub %>%
          filter(species %in% input$select_species | species=="All species" | species=="All data")
      } else {
        data_sub = data_sub %>%
          filter(species=="All species" | species=="All data")
      }
      data_sub = data_sub %>%
        group_by(month, region, species) %>%
        summarise(n = sum(n))
      as.data.frame(data_sub)
    })
    output$tsPlot <- renderPlot({
      ggplot() +
        geom_path(data=data_subset(), aes(x=month, y=n, color=species), size=1) +
        scale_color_manual(name="Species", values=col_palette) +
        labs(title=input$select_region, x="Date (Month)", y="Number of records") +
        scale_x_continuous(breaks=plot_breaks, labels=yrs, 
                           limits=c(min(overall_summary_1.4e$month), max(overall_summary_1.4e$month))) +
        theme_classic() +
        theme(axis.text = element_text(size=14),
              axis.title = element_text(size=18),
              plot.title = element_text(size=20),
              legend.title = element_text(size=18),
              legend.text = element_text(size=14))
    })
  }
)
```

<!----------------------------------------------------------------------------->
## Your turn  

Complete section 1.4f of the handout.<br><br>
<center><img src="figures/day1_timeseries_3.png" style="width: 90%;" /></center>  

<!----------------------------------------------------------------------------->
## Summary - section 1.4f ui code

<b>shinyUI Side Panel</b>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
sliderInput("age_slider", label = h3("Select a maximum age"),
                  min = min_age, max = max_age, value = c(min_age, max_age))
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4f server code {.smaller}

<b>shinyServer Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
data_subset <- reactive({

    data_sub = summary_data %>%
      filter(region==input$select_region | region=="All data")

    if(length(input$select_species)>0){
      data_sub = data_sub %>%
        filter(species %in% input$select_species | species=="All species" | species=="All data")
    } else {
      data_sub = data_sub %>%
        filter(species=="All species" | species=="All data")
    }

    data_sub = data_sub %>%
      filter(age >= input$age_slider[1] & age <= input$age_slider[2] | is.na(age))

    data_sub = data_sub %>%
      group_by(month, region, species) %>%
      summarise(n = sum(n))
    as.data.frame(data_sub)
  })
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4f app

```{r, echo=FALSE}
overall_summary_1.4f <- raw_data %>%
  group_by(month) %>%
  summarise(n = length(month)) %>%
  mutate(region="All data",
         species="All data")
region_allspecies_summary_1.4f <- raw_data %>%
  group_by(month, region, age) %>%
  summarise(n = length(month)) %>%
  mutate(species="All species")
species_allregions_summary_1.4f <- raw_data %>%
  group_by(month, species, age) %>%
  summarise(n = length(month)) %>%
  mutate(region="All Regions")
region_species_summary_1.4f <- raw_data %>%
  group_by(month, region, species, age) %>%
  summarise(n = length(month))
summary_data_1.4f <- bind_rows(overall_summary_1.4f, region_allspecies_summary_1.4f, 
                               species_allregions_summary_1.4f, region_species_summary_1.4f)

shinyApp(
  ui = fluidPage(
    sidebarLayout(
      sidebarPanel(
        selectInput("select_region", label = h4("Select a Region:"),
                    choices = c("All Regions", sort(unique(raw_data$region))),
                    selected = 1),
        br(),
        checkboxGroupInput("select_species", label = h4("Select a Species"),
                           choices = list("Cat" = "cat", "Dog" = "dog", "Human"="human", 
                                          "Jackal"="jackal", "Lion"="lion"),
                           selected = c("cat", "dog", "human", "jackal", "lion")),
        br(),
        sliderInput("age_slider", label = h4("Select a maximum age"),
                  min = min(raw_data$age), max = max(raw_data$age), value = c(min(raw_data$age), max(raw_data$age)))),
      mainPanel(
        plotOutput("tsPlot", height=400)))),
  
  server = function(input, output) {
    data_subset <- reactive({
      data_sub = summary_data_1.4f %>%
        filter(region==input$select_region | region=="All data")
      if(length(input$select_species)>0){
        data_sub = data_sub %>%
          filter(species %in% input$select_species | species=="All species" | species=="All data")
      } else {
        data_sub = data_sub %>%
          filter(species=="All species" | species=="All data")
      }
      data_sub = data_sub %>%
        filter(age >= input$age_slider[1] & age <= input$age_slider[2] | is.na(age))
      data_sub = data_sub %>%
        group_by(month, region, species) %>%
        summarise(n = sum(n))
      as.data.frame(data_sub)
    })
    output$tsPlot <- renderPlot({
      ggplot() +
        geom_path(data=data_subset(), aes(x=month, y=n, color=species), size=1) +
        scale_color_manual(name="Species", values=col_palette) +
        labs(title=input$select_region, x="Date (Month)", y="Number of records") +
        scale_x_continuous(breaks=plot_breaks, labels=yrs, 
                           limits=c(min(overall_summary_1.4f$month), max(overall_summary_1.4f$month))) +
        theme_classic() +
        theme(axis.text = element_text(size=14),
              axis.title = element_text(size=18),
              plot.title = element_text(size=20),
              legend.title = element_text(size=18),
              legend.text = element_text(size=14))
    })
  }
)
```

<!----------------------------------------------------------------------------->
## 
<center>
<h2 class="blue"> What if we want to delay the app changes? </h2>
</center>

<!----------------------------------------------------------------------------->
## The ``eventReactive()`` function

- The ``eventReactive`` function is very similar to the ``reactive()`` function - it is used to carry out data processing.

- The difference is that it is triggered by a specific user input

- The input can be set as any of the widgets in your app, but it works well with ``actionButton()``

- ``eventReactive()`` returns ``NULL`` until the button is pressed, which means any outputs that rely on it are hidden until the button is pressed...

<!----------------------------------------------------------------------------->
## An example with the ``eventReactive()`` function 

<b>shinyUI Side Panel</b>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
radioButtons(inputId = "select_species", label = "Select a Species:",  
             choices = sort(unique(raw_data$species)),
             selected = 1)

actionButton(inputId="go_button", label="Click to generate the plot:")
```

<b>shinyUI Main Panel</b>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
plotOutput("chosen_species")
```

<!----------------------------------------------------------------------------->
## An example with the ``eventReactive()`` function

<b>shinyServer Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
data_subset <- eventReactive(input$go_button, {
      data_sub = raw_data %>%
        filter(species == input$select_species)
      data_sub
    })

output$chosen_species <- renderPlot({
      ggplot() + 
        geom_bar(data=data_subset(), aes(x=age)) + 
        ggtitle(unique(data_subset()$species)) 
    })
```

<!----------------------------------------------------------------------------->
## An example with the ``eventReactive()`` function

```{r, echo=FALSE}
shinyApp(
  
  ui = fluidPage(
    tags$head(
      tags$style(HTML("
      #txt {font-size: 18px;}
      #txt b {font-family: 'Lucida Console', Monospace; color: #5bb662; font-size: 18px; font-weight: normal;}
    "))),
    
    sidebarLayout(
      sidebarPanel(
        HTML("<div id='txt'>Input: <b>radioButtons()</b></div>"),
        radioButtons(inputId = "select_species", label = "Select a Species:",  
                     choices = sort(unique(raw_data$species))),
        br(),
        HTML("<div id='txt'>Input: <b>actionButton()</b></div>"),
        actionButton(inputId="go_button", label="Click to generate the plot:")
      ), 
      mainPanel(
        plotOutput("chosen_species")
      )
    )
    ),
    
  server = function(input, output) {
    
     data_subset <- eventReactive(input$go_button, {
      data_sub = raw_data %>%
        filter(species == input$select_species)
      data_sub
    })
    
    output$chosen_species <- renderPlot({
      ggplot() + 
        geom_bar(data=data_subset(), aes(x=age)) + 
        ggtitle(unique(data_subset()$species)) + 
        theme_classic()
    })
  },
  
  options = list(height = 500)
)
```

<!----------------------------------------------------------------------------->
## 
<center>
<h2 class="blue"> What if we want to delay the app changes, <br>
but still show an output to start with? </h2>
</center>

<!----------------------------------------------------------------------------->
## What if we want to delay the app changes, but still show an output to start with?

- We can combine 2 functions: ``observeEvent()`` and ``reactiveValues()`` 

<!----------------------------------------------------------------------------->
## The ``observeEvent()`` function

- The ``observeEvent()`` function is very similar to the ``eventReactive()`` function - it is used to carry out a process in response to a specific user input.

- The difference is ``observeEvent()`` **does not produce an output** - instead it works by **updating existing outputs**

<!----------------------------------------------------------------------------->
## The ``reactiveValues()`` function

- The ``reactiveValues()`` function produces an object that acts like a list. 
      - you can store multiple values or objects to <em>slots</em>
      - <em>slots</em> can be accessed from the object with the ``$`` symbol

- The ``reactiveValues`` object can be created with values, or values can be added after  

- Stored values are updated by reactive functions

<!----------------------------------------------------------------------------->
##  ``observeEvent()`` and ``reactiveValues()`` {.smaller}

<b>``eventReactive()`` - shinyServer Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
data_subset <- eventReactive(input$go_button, {
      data_sub = raw_data %>% filter(species == input$select_species)
      data_sub
    })
output$chosen_species <- renderPlot({
      ggplot() + geom_bar(data=data_subset(), aes(x=age)) + 
        ggtitle(unique(data_subset()$species)) 
    })
```

<b>``observeEvent()`` and ``reactiveValues()`` - shinyserver Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
rv <- reactiveValues(data_sub = filter(raw_data, species=="cat"))
observeEvent(input$go_button, {
      rv$data_sub = raw_data %>%
        filter(species == input$select_species)
    })
output$chosen_species <- renderPlot({
      ggplot() + geom_bar(data = rv$data_sub, aes(x=age)) + 
        ggtitle(unique(rv$data_sub$species))
    })
```

<!----------------------------------------------------------------------------->
## ``observeEvent()`` and ``reactiveValues()``

```{r, echo=FALSE}
shinyApp(
  
  ui = fluidPage(
    tags$head(
      tags$style(HTML("
      #txt {font-size: 18px;}
      #txt b {font-family: 'Lucida Console', Monospace; color: #5bb662; font-size: 18px; font-weight: normal;}
    "))),
    
    sidebarLayout(
      sidebarPanel(
        HTML("<div id='txt'>Input: <b>radioButtons()</b></div>"),
        radioButtons(inputId = "select_species", label = "Select a Species:",  
                     choices = sort(unique(raw_data$species))),
        br(),
        HTML("<div id='txt'>Input: <b>actionButton()</b></div>"),
        actionButton(inputId="go_button", label="Click to generate the plot:")
      ), 
      mainPanel(
        plotOutput("chosen_species")
      )
    )
    ),
    
  server = function(input, output) {
    
     rv <- reactiveValues(data_sub = filter(raw_data, species=="cat"))

observeEvent(input$go_button, {
      rv$data_sub = raw_data %>%
        filter(species == input$select_species)
    })

output$chosen_species <- renderPlot({
      ggplot() + 
        geom_bar(data = rv$data_sub, aes(x=age)) + 
        ggtitle(unique(rv$data_sub$species)) + 
        theme_classic()
    })
  },
  
  options = list(height = 500)
)
```

<!----------------------------------------------------------------------------->
## Your turn  

Complete section 1.4g of the handout.<br><br>
<center><img src="figures/day1_timeseries_4.png" style="width: 90%;" /></center> 

<!----------------------------------------------------------------------------->
## Summary - section 1.4g    

<b class="blue">What reactive elements have changed in the ui code and the server code? </b><br><br>

<!----------------------------------------------------------------------------->
## Summary - section 1.4g    

<b class="blue">What reactive elements have changed in the ui code and the server code? </b><br><br>

<b>shinyUI Side Panel</b>
```{r, echo=TRUE, eval=FALSE, class.source="ui-background"}
actionButton("action_button", label = "Update plot")

actionButton("reset_button", label = "Reset plot")
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4g    

<b class="blue">What reactive elements have changed in the ui code and the server code? </b><br><br>

<b>Above shinyserver Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
start_df <- summary_data %>%
  filter(region=="All regions" | region=="All data") %>%
  group_by(month, region, species) %>%
  summarise(n = sum(n))
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4g 

<b class="blue">What reactive elements have changed in the ui code and the server code? </b><br><br>

<b>shinyserver Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
data_subset <- reactiveValues(data = start_df)
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4g {.smaller}

<b class="blue">What reactive elements have changed in the ui code and the server code? </b><br><br>

<b>shinyserver Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
observeEvent(input$action_button, {

  data_sub = summary_data %>%
      filter(region==input$select_region | region=="All data")

    if(length(input$select_species)>0){
      data_sub = data_sub %>%
        filter(species %in% input$select_species | species=="All species" | species=="All data")
    } else {
      data_sub = data_sub %>%
        filter(species=="All species" | species=="All data")
    }

    data_sub = data_sub %>%
      filter(age >= input$age_slider[1] & age <= input$age_slider[2] | is.na(age))

    data_sub = data_sub %>%
      group_by(month, region, species) %>%
      summarise(n = sum(n))
    data_subset$data <- as.data.frame(data_sub)
  })
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4g

<b class="blue">What reactive elements have changed in the ui code and the server code? </b><br><br>

<b>shinyserver Section</b>
```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
 output$tsPlot <- renderPlot({
    ggplot() +
      geom_path(data=data_subset$data, aes(x=month, y=n, color=species), size=1) +
      scale_color_manual(name="Species", values=col_palette) +
     ...
   })
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4g

<b class="blue">Can you spot any new functions in the shinyServer that we have not introduced yet? </b><br><br>

<!----------------------------------------------------------------------------->
## Summary - section 1.4g

<b class="blue">Can you spot any new functions in the shinyServer that we have not introduced yet? </b><br><br>

```{r, echo=TRUE, eval=FALSE, class.source="server-background"}
observeEvent(input$reset_button, {
  
  updateSelectInput(session, inputId = "select_region", 
                    selected = "All regions")
  
  updateCheckboxGroupInput(session, inputId = "select_species", 
                           selected = c("cat", "dog", "human", "jackal", "lion"))
  
  updateSliderInput(session, inputId = "age_slider", 
                    min = min_age, max = max_age, value = c(min_age, max_age))
})
```

<!----------------------------------------------------------------------------->
## Summary - section 1.4g    

<b class="blue">Can you think of any scenarios where it would be helpful to use an ``actionButton()`` to trigger a reactive event? </b><br><br>

<!----------------------------------------------------------------------------->
## Summary - section 1.4g    

<b class="blue">Can you think of any scenarios where it would be helpful to use an ``actionButton()`` to trigger a reactive event? </b><br><br><br>

<ul>
<li>Delay an action
<ul style="list-style-type:none;">
<li>complicated processing (e.g. model)<li>
<li>plotting (e.g. map)</li>
</ul>
</li>
<li>Select data
<ul style="list-style-type:none;">
<li>swap quickly between datasets or variables</li>
</ul>
</li>
<li>Reset the app
<ul style="list-style-type:none;">
<li>replace any user choices with default values</li>
</ul>
</li>
</ul>

<!----------------------------------------------------------------------------->
## Building an interactive plot in RShiny - Summary 

<b>Basic functions</b><br>

- <b class="blue">inputs</b> are used in the ui to give the user options to change  
<em>e.g.</em> ``selectInput()``

- <b class="blue">render</b> is used in the server to create the plots, tables etc. that the user sees  
<em>e.g.</em> ``renderPlot()``

- <b class="blue">outputs</b> are used to display the rendered objects in the ui  
<em>e.g.</em> ``plotOutput()``

<!----------------------------------------------------------------------------->
## Building an interactive plot in RShiny - Summary 

<b>Reactive functions</b><br>

- ``reactive()`` is used to carry out processes immediately, such as subsetting and calculations

- If you want to delay the processing in your app, you can use ``eventReactive()`` to watch for a specific user input and then carry out processes

- If you want to delay the processing in your app, but display a base dataset, you can use ``reactiveValues()`` to create a stored object and ``observeEvent()`` to update the value after a specific user input