Shiny for R: Making your apps more efficient and more effective

class: center, middle, inverse, title-slide

# Shiny for R: Making your apps more efficient and more effective
## EcoDataScience Lunch Session
### Kat Millage
### UCSB - emLab
### 2021/02/16

---

class: center, middle

# Why?

### To provide general tips and suggestions to help you get started with Shiny (efficiently)
### To demonstrate cool functionalities that will help make your Shiny apps more effective communication tools

---

# Outline

- The Basics: Brief review of essential Shiny functions and some tips to make your reactive programming more efficient;

- Appearance & Organization (`shinydashboard` + more): Keeping things organized;

- (gg)`plotly`: Making your (already awesome) `ggplot` figures more awesome;

- `leaflet`: Interactive maps!

---
class: inverse, center, middle

# Section 1: The Basics

---

# Getting started with Shiny

Using the [RStudio IDE](https://www.rstudio.com/products/rstudio/) you can create a basic Shiny app from the menu `File -> New File -> Shiny Web App`.

You will then be asked to name your app, determine whether the app should be built using a single file (**app.R**) or two files (**ui.R/server.R**), and select the directory where the app will live (if you're using Projects, it should be already be set to your project location).

**Does the file format matter?**

> Ultimately, no. They both yield the same outcome.

**Why would I pick one over the other?**

> Ease of code management (and debugging). *Unless the app is going to be limited to a single figure and 1 or 2 widgets, **the two file format is going to be easier to manage***.

---
class: inverse, center, middle

# The Basics

## Example: basic-app

---
background-image: url(https://comic.browserling.com/extra-front-end-back-end.png)
background-position: 50% 75%

# `ui.R` / `server.R`

---

# `ui.R` / `server.R`

The `ui.R` file defines the user-interface (UI) for your app. This is the part of you see and interact with.

> This file returns a call to the `shinyUI()` function.

*In order for something to appear in your app, it needs to be defined somewhere within the `ui.R` file.*

--
*****

The `server.R` file defines the server logic for your app. This is the place for all of the "behind the scenes" action.

> This file returns a call to the `shinyServer()` function.

*In order for your app to do anything interactive, those actions need to be defined somewhere within the `server.R` file.*

---

# `ui.R` / `server.R`

Great videos on the basics of reactive programming: 
- [Reactivity, Pt. 1](https://rstudio.com/resources/shiny-dev-con/reactivity-pt-1-joe-cheng/): Joe Cheng, Shiny Dev Con 2016
- [Reactivity, Pt. 2](https://rstudio.com/resources/shiny-dev-con/reactivity-pt-2/): Joe Cheng, Shiny Dev Con 2016

Other helpful resources:
- [RStudio](https://shiny.rstudio.com/articles/basics.html)
- [Mastering Shiny](https://mastering-shiny.org/)

---

# **`ui.R`** / `server.R`

You'll predominately use three types of functions to define your user-interface:

- Structural UI functions (layout & containers);

- Widgets (input functions);

- Output functions.

---
# **`ui.R`** / `server.R`
## Structural UI Functions

The highest layer of UI construction is dictated by the behavior of the page. The basic `shiny` package includes three main page functions: `basicPage()`, `fixedPage()`, **`fluidPage()`**

The second highest level of UI construction defines the layout of objects on the page. There are four layout functions in the basic `shiny` package: `verticalLayout()`, `flowLayout()`, `splitLayout()`, **`sidebarLayout()`**

There are also a number of lower level UI construction functions. These create panels, rows, and columns within your specified layout. Some of these can be used within any layout function (e.g., `tabsetPanel()`, `wellPanel()`, `titlePanel()`, `conditionalPanel()`, `aboslutePanel()`, `column()`), while others are specific to a particular layout function (e.g., `sidebarPanel()`, `mainPanel()`, `inputPanel()`, `fluidRow()`).

More info on the basic Shiny layouts can be found [here](https://shiny.rstudio.com/articles/layout-guide.html).

---
# **`ui.R`** / `server.R`
## Widgets

These are the functions that create the fun little buttons and sliders that your user gets to click on and drag. The values returned by these functions make up the `input` object that is passed to your `server.R` file.

There are a lot of them. They are all defined as `[xxx]Input()`. The [Shiny Widget Gallery](https://shiny.rstudio.com/gallery/widget-gallery.html) does a nice job of displaying all of the basic widgets and the values they return.

Each widget is assigned an `inputId` - this is how your widgets will be identified in the server logic. *Knowing the format of the value returned by your widgets is important!*

---
# **`ui.R`** / `server.R`
## Output Functions

These are the functions that define the outputs that should be visible in your app. Think of these as placeholders for the things you want to display. These can be plots, value, text, images, tables, or really anything you can define with HTML. The basic output functions are as follows: 
- `plotOutput()`
- `textOutput()`
- `uiOutput()`
- `htmlOutput()`
- `imageOutput()`
- `tableOutput()`
- `dataTableOutput()`

Each output function is assigned an `outputId` - this is how your function knows which variable from the `output` object to include here.

---

# **`ui.R`** / `server.R`

```r
# ui.R
shinyUI(fluidPage(

titlePanel("Old Faithful Geyser Data"),

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

mainPanel(
            plotOutput("distPlot")
        )
    )
))
```

---

# `ui.R` / **`server.R`**

You'll predominately use four types of functions to define your server logic:

- Reactive values;

- Reactive expressions;

- Observers;

- Rendering functions.

** The key differences between these functions are their execution strategies (eager or lazy) and whether they yield a result or have a value **

---
# `ui.R` / **`server.R`**
## Reactive Values

`reactiveValues()`

This function returns an object for storing reactive values - think of this as a fancy `list()`. The "reactive" piece is that whenever a reactive value changes, any reactive expressions that depend on it are marked as "invalidated" and will automatically re-execute.

---
# `ui.R` / **`server.R`**
## Reactive Expressions

`reactive()` and `eventReactive()`

These two functions create expressions whose results will change over time. Similar to the previous class, whenever the result of a reactive expression changes, any other reactive expressions that recently called it are marked as "invalidated".

---
# `ui.R` / **`server.R`**
## Observers

`observe()` and `observeEvent()`

These two functions can read reactive values and call reactive expressions, and will automatically re-execute when their dependencies change. However, they do not yield a result, and therefore only useful for their side effects.

---
# `ui.R` / **`server.R`**
## Rendering Functions

`renderPlot()`, `renderText()`, `renderUI()`, `renderPrint()`, `renderImage()`, `renderTable()`, `renderDataTable()`

These functions create reactive versions of their namesakes that are suitable for assigning to an `output` slot. They have corresponding output functions in the UI that are used to display those items.

---

# `ui.R` / **`server.R`**

.pull-left[
**Reactive Values**
- Neither eager or lazy
- Returns a value

**Reactive Expressions**
- Lazy
- Returns a value
]

.pull-right[
**Observers**
- Eager
- No value

**Rendering Functions**
- Lazy
- Can be assigned to an `output` value
]

---

# `ui.R` / **`server.R`**

```r
# server.R
shinyServer(function(input, output) {

output$distPlot <- renderPlot({

x <- faithful[, 2]
 bins <- seq(min(x), max(x), length.out = input$bins + 1)

hist(x, breaks = bins, col = 'darkgray', border = 'white')

})

})
```

---
class: center, middle

# Example: 01-basics

---
class: inverse, center, middle

# Section 2: Appearance & Organization (`shinydashboard` + more)

---
# Why?

Let's face it - the basic `shiny` layouts are boring and they don't look very nice. They're great if you just want to build a quick Shiny app to explore some data or results, but they don't really cut it for most applications.1

.footnote[
[1] Unless you want to learn `HTML`, `CSS`, and `JavaScript`
]

--
Luckily, there are some nice packages that will make your Shiny apps look nicer and be easier to use without having to learn more coding languages. There are MANY packages out there for shiny, but I've found a lot of them to be underwhelming. However, I want to highlight the three that I find myself using in almost every app I make.

- `shinydashboard`

- `shinyjs`

- `shinyWidgets`

---
# `shinydashboard`

As the name implies, this package is intended to allow you to turn your Shiny apps into dashboards. However, I've found the base `shinydashboard` layout to be functional for almost any context. The website for [`shinydashboard`](https://rstudio.github.io/shinydashboard/index.html) provides a nice guide if you're just getting started.

The two main classes of functions from this package I want to highlight:

- Structural UI functions (`dashboardPage()`, `dashboardHeader()`, `dashboardSidebar()`, `dashboardBody()`)

- Boxes (`box()`, `tabBox()`, `infoBox()`/`infoBoxOutput()`, `valueBox`/`valueBoxOutput()`)

---
# `shinyjs`

This package was designed to allow users to easily implement common `JavaScript` operations in their Shiny apps without having to learn `JavaScript`. The website for [`shinyjs`](https://deanattali.com/shinyjs/) provides a nice guide if you're just getting started.

Cool things `shinyjs` allows you to do: 
- Hide (or show) elements
- Disable (or enable) inputs
- Reset inputs back to their original values

---
# `shinyWidgets`

Who doesn't want more widget options!? There are other packages out there offering additional widgets for `shiny`, but (in my opinion), this one is the best. Definitely check out the gallery of [`shinyWidgets`](http://shinyapps.dreamrs.fr/shinyWidgets/) to see all of the widgets available with this package (and to see a good example of an app built using `shinydashboard`!). 
Some favorite widgets of mine: 
- `switchInput()`
- `materialSwitch()`
- `radioGroupButtons()`

---
# Custom Stylesheets & More

If you really want to change up the appearance of your Shiny app, you can use CSS to build custom stylesheets.

[Rstudio](https://shiny.rstudio.com/articles/css.html) and [R-bloggers](https://www.r-bloggers.com/2019/08/how-to-use-css-to-style-your-r-shiny-projects/) have good articles on how to add custom CSS to your app.

Another cool (but somewhat more advanced) package: 
- [`googlesheets`](https://cran.r-project.org/web/packages/googlesheets/vignettes/basic-usage.html): Allows you to embed Google Sheets into your apps.

---
class: center, middle

# Example: 02-layouts

---
class: inverse, center, middle

# Section 3: (gg)`plotly`

---
# What is `plotly`?

Plotly for R allows you to to make interactive web-based graphs via the open source JavaScript graphing library `plotly.js`.

By default, Plotly's main plotting function `plot_ly()` behaves much like `base::plot()`.

However, they've also created another function `ggplotly()` that integrates nicely with `ggplot2` to make your `ggplot()` figures interactive.

There is some reference material for using the `plotly` package in R [here](https://plotly.com/r/), *but* documentation for `ggplotly()` specifically is more limited.

---
# A simple `ggplotly()` figure

```r
p <- ggplot(data = dat, aes(x = State, y = Rate, fill = Crime))+
 geom_bar(stat = "identity")+
 theme_bw()+coord_flip()+theme(legend.position = "none")

ggplotly(p)
```

<div id="htmlwidget-8566aa709066ccdd8541" style="width:100%;height:324px;" class="plotly html-widget"></div>
<script type="application/json" data-for="htmlwidget-8566aa709066ccdd8541">{"x":{"data":[{"orientation":"h","width":[0.9,0.9,0.9,0.9,0.9,0.9,0.9,0.899999999999999,0.899999999999999,0.899999999999999],"base":[92.4,102.5,119.1,78.3,140.6,124.6,91.4,93.7,127.3,103.2],"x":[236,263,294,190,276,204,110,238,335,211],"y":[1,2,3,4,5,6,7,8,9,10],"text":["State: Alabama Rate: 236.0 Crime: Assault","State: Alaska Rate: 263.0 Crime: Assault","State: Arizona Rate: 294.0 Crime: Assault","State: Arkansas Rate: 190.0 Crime: Assault","State: California Rate: 276.0 Crime: Assault","State: Colorado Rate: 204.0 Crime: Assault","State: Connecticut Rate: 110.0 Crime: Assault","State: Delaware Rate: 238.0 Crime: Assault","State: Florida Rate: 335.0 Crime: Assault","State: Georgia Rate: 211.0 Crime: Assault"],"type":"bar","marker":{"autocolorscale":false,"color":"rgba(248,118,109,1)","line":{"width":1.88976377952756,"color":"transparent"}},"name":"Assault","legendgroup":"Assault","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"h","width":[0.9,0.9,0.9,0.9,0.9,0.9,0.9,0.899999999999999,0.899999999999999,0.899999999999999],"base":[79.2,92.5,111,69.5,131.6,116.7,88.1,87.8,111.9,85.8],"x":[13.2,10,8.09999999999999,8.8,9,7.90000000000001,3.30000000000001,5.90000000000001,15.4,17.4],"y":[1,2,3,4,5,6,7,8,9,10],"text":["State: Alabama Rate: 13.2 Crime: Murder","State: Alaska Rate: 10.0 Crime: Murder","State: Arizona Rate: 8.1 Crime: Murder","State: Arkansas Rate: 8.8 Crime: Murder","State: California Rate: 9.0 Crime: Murder","State: Colorado Rate: 7.9 Crime: Murder","State: Connecticut Rate: 3.3 Crime: Murder","State: Delaware Rate: 5.9 Crime: Murder","State: Florida Rate: 15.4 Crime: Murder","State: Georgia Rate: 17.4 Crime: Murder"],"type":"bar","marker":{"autocolorscale":false,"color":"rgba(124,174,0,1)","line":{"width":1.88976377952756,"color":"transparent"}},"name":"Murder","legendgroup":"Murder","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"h","width":[0.9,0.9,0.9,0.9,0.9,0.9,0.9,0.899999999999999,0.899999999999999,0.899999999999999],"base":[58,48,80,50,91,78,77,72,80,60],"x":[21.2,44.5,31,19.5,40.6,38.7,11.1,15.8,31.9,25.8],"y":[1,2,3,4,5,6,7,8,9,10],"text":["State: Alabama Rate: 21.2 Crime: Rape","State: Alaska Rate: 44.5 Crime: Rape","State: Arizona Rate: 31.0 Crime: Rape","State: Arkansas Rate: 19.5 Crime: Rape","State: California Rate: 40.6 Crime: Rape","State: Colorado Rate: 38.7 Crime: Rape","State: Connecticut Rate: 11.1 Crime: Rape","State: Delaware Rate: 15.8 Crime: Rape","State: Florida Rate: 31.9 Crime: Rape","State: Georgia Rate: 25.8 Crime: Rape"],"type":"bar","marker":{"autocolorscale":false,"color":"rgba(0,191,196,1)","line":{"width":1.88976377952756,"color":"transparent"}},"name":"Rape","legendgroup":"Rape","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"h","width":[0.9,0.9,0.9,0.9,0.9,0.9,0.9,0.899999999999999,0.899999999999999,0.899999999999999],"base":[0,0,0,0,0,0,0,0,0,0],"x":[58,48,80,50,91,78,77,72,80,60],"y":[1,2,3,4,5,6,7,8,9,10],"text":["State: Alabama Rate: 58.0 Crime: UrbanPop","State: Alaska Rate: 48.0 Crime: UrbanPop","State: Arizona Rate: 80.0 Crime: UrbanPop","State: Arkansas Rate: 50.0 Crime: UrbanPop","State: California Rate: 91.0 Crime: UrbanPop","State: Colorado Rate: 78.0 Crime: UrbanPop","State: Connecticut Rate: 77.0 Crime: UrbanPop","State: Delaware Rate: 72.0 Crime: UrbanPop","State: Florida Rate: 80.0 Crime: UrbanPop","State: Georgia Rate: 60.0 Crime: UrbanPop"],"type":"bar","marker":{"autocolorscale":false,"color":"rgba(199,124,255,1)","line":{"width":1.88976377952756,"color":"transparent"}},"name":"UrbanPop","legendgroup":"UrbanPop","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":27.3647894469812,"r":7.30593607305936,"b":41.3191273465246,"l":89.8630136986302},"plot_bgcolor":"rgba(255,255,255,1)","paper_bgcolor":"rgba(255,255,255,1)","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[-23.115,485.415],"tickmode":"array","ticktext":["0","100","200","300","400"],"tickvals":[0,100,200,300,400],"categoryorder":"array","categoryarray":["0","100","200","300","400"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.65296803652968,"tickwidth":0.66417600664176,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(235,235,235,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"y","title":{"text":"Rate","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[0.4,10.6],"tickmode":"array","ticktext":["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia"],"tickvals":[1,2,3,4,5,6,7,8,9,10],"categoryorder":"array","categoryarray":["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.65296803652968,"tickwidth":0.66417600664176,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(235,235,235,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"x","title":{"text":"State","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"hoverformat":".2f"},"shapes":[{"type":"rect","fillcolor":"transparent","line":{"color":"rgba(51,51,51,1)","width":0.66417600664176,"linetype":"solid"},"yref":"paper","xref":"paper","x0":0,"x1":1,"y0":0,"y1":1}],"showlegend":false,"legend":{"bgcolor":"rgba(255,255,255,1)","bordercolor":"transparent","borderwidth":1.88976377952756,"font":{"color":"rgba(0,0,0,1)","family":"","size":11.689497716895}},"hovermode":"closest","barmode":"relative"},"config":{"doubleClick":"reset","showSendToCloud":false},"source":"A","attrs":{"151ad293cab5c":{"x":{},"y":{},"fill":{},"type":"bar"}},"cur_data":"151ad293cab5c","visdat":{"151ad293cab5c":["function (y) ","x"]},"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>

---
class: center, middle

# Example: 03-ggplotly

---
class: inverse, center, middle

# Section 4: `leaflet`

---

# What is `leaflet`?

Leaflet is an open-source JavaScript library that makes mobile-friendly interactive maps.

The R package makes it easy to integrate these maps in R, and they work particularly well embedded in R Markdown documents or in Shiny apps.

Rstudio has created some great basic reference material for using the `leaflet` package in R -  [Leaflet for R](https://rstudio.github.io/leaflet/)

---
# A simple `leaflet` map

```r
library(leaflet)
leaflet() %>% 
  addTiles() %>% 
  setView(-119.848965, 34.413489, zoom = 15) %>%
  addMarkers(-119.84230, 34.41251, popup = "Marine Science")
```

<div id="htmlwidget-64d7ee06ea3b04551860" style="width:100%;height:288px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-64d7ee06ea3b04551860">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]},{"method":"addMarkers","args":[34.41251,-119.8423,null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},"Marine Science",null,null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"setView":[[34.413489,-119.848965],15,[]],"limits":{"lat":[34.41251,34.41251],"lng":[-119.8423,-119.8423]}},"evals":[],"jsHooks":[]}</script>

---
class: center, middle

# Example: 04-leaflet

---

# Questions?

### Contact
email: [kmillage@ucsb.edu](mailto:kmillage@ucsb.edu)

GitHub: [kmillage](https://github.com/kmillage)

### Some of my Shiny apps!

[SubsidyExplorer](http://www.subsidyexplorer.org/)

[Nutricast](https://emlab-ucsb.shinyapps.io/nutricast/)

[ACP Atlas of Distant Water Fishing](https://emlab-ucsb.shinyapps.io/SubsidyAtlasACP/)