2 Introduction

2.1 Setup (On RStudio Cloud)

If you’re running this workshop on RStudio Cloud, you will need to register for an RStudio Cloud account and then join the invite. This will be provided in the workshop.

You will not need to download anything on the cloud instance.

2.2 Setup (On your Computer)

  1. Make sure that you have the following packages installed:
install.packages(c("shiny", "tidyverse", "fivethirtyeight", "plotly"))

  1. Clone or download the tutorial from here (click the Clone or Download button, it’s green and on the right side): https://github.com/laderast/gradual_shiny

  2. Unzip, and open the gradual_shiny.Rproj file in this folder. The project should open in RStudio and you should be ready!

2.3 Introducing Shiny

Welcome to Shiny! Shiny is a framework in R for making interactive visualizations for the web created by Joe Cheng. Nearly any plot in R can be made into an interactive visualization by adding some simple interface elements and mapping these interface elements into the plot. It’s an extremely powerful technique for visualization and communication of findings.

Before we get started, we need to talk a little bit about the architecture of shiny apps. shiny apps are server-based, which means that all of the calculations and plot rendering happen on a server (when you’re running them in RStudio, your server is your computer). Compare this to JavaScript visualization frameworks such as D3.js, where the client’s computer needs to do all of the computing of the visualization.

There are a lot of benefits to server-based frameworks, namely that your users don’t need to have a heavy-duty computer to visit your site, and that your data is sitting behind a protected server. One of the difficulties is that it can be difficult to scale for lots of users.

2.4 Functions in R

In order to use Shiny we need to have an understanding of R code syntax and how to use functions in R.

Functions take an argument (input) and produce a result (output). A simple function is mean(). The input argument is a numeric vector such as c(1,5,3.2,0.001) and the output is a numeric value that is the mean of the vector.

mean(x = c(1,5,3.2,0.001))

Note we could also not specify the name of the argument since R uses the inputs as arguments in the order it sees them.

mean(c(1,5,3.2,0.001))

To see what arguments the function mean() requires, try looking it up in help:

?mean

We can see that mean() takes optional arguments trim and na.rm. Compare the output from these two uses of mean():

mean(x = c(1,2,NA))
mean(x = c(1,2,NA), na.rm = TRUE)

The NA value signifies missing data in R. The addition of other arguments changes how the function is used.

2.4.1 Writing our own functions

In Shiny, we will use functions such as fluidPage() and shinyApp().

We will also create our own function server(). To define functions, the syntax is:

name_of_function <- function(input) {
  # code
}

For example:

myfunction <- function(a, b, div = 2) {
  (a + b)/div
}

Here, we must specify the inputs a and b and optionally div. Now we can use our function:

myfunction(a = 3, b = 4)
myfunction(a = 3, b = 4, div = 1)

If we just type

myfunction

R prints the definition of our function.

For more information on functions, see Advanced R book’s chapter on functions.

2.5 The concept of ui and server elements

Every shiny app has two elements. The first is ui, which handles both the user controls and the layout and placement of output elements, such as plots or tables. ui usually consists of a layout scheme, with user controls (such as sliders, select boxes, radio boxes, etc) specified here. The second element is server, which handles all of the calculations and the generation of plots for ui.

ui and server are only connected by two objects input, and output (they actually are environments, but we’ll just say they are objects). ui puts the values from the controls into input, which can be accessed by server. For example, if we have a slider called year_release in ui, we can access the value of that slider in server through input$year_release.

server will then do something with the slider value and generate some output. Where does it put the output? If you guessed output, then give yourself a star! ui then takes output and will then display it using the various _Output functions (such as plotOutput, textOutput andtableOutput).

If this is confusing, go very carefully through the diagram below. I’m happy to answer any questions you have about it.

Basic shiny architecture

Basic shiny architecture