STM1001: Computer Lab 4B

Data Science Module

Topic 4B: Data Visualisation IV

Welcome to the fourth Data Science computer lab. In this computer lab we will extend our skills in creating interactive R content and, using the Shiny R package (Chang et al. 2021), we will create a web app, all within R.

This computer lab is designed to run alongside the content on R functions in Section 4.2 of the Data Visualisation in R supplement and the content on Shiny apps in Section 6 of the Data Visualisation in R supplement. Make sure that you read this content before you begin the lab questions. It may also be helpful to keep this content open in separate tabs while you work through the lab material.

By the end of this lab, you should be able to create a simple web app using Shiny. Let’s get started!

1 Preparations

Before we go any further, please make sure you have read the content in Section 6 of the Data Visualisation in R supplement - if you haven’t, these lab questions will not make sense.

1.1

If you have not already installed Shiny, please do so now, and load Shiny in your current R session.

If you need a refresher, you can check the Code chunk below.

install.packages("shiny")
library(shiny)

1.2

Ok, let’s get started on creating our first Shiny app.

To begin, create a new folder on your computer called shiny_app_test, and then set this folder as your current working directory in R.

Hint: To check your current working directory, run the command getwd(). Then just make sure you have created a new directory for your app within your current working directory.

1.3

Copy all the R code in the Code chunk below into a new R script file, and save this script as app.R within your new folder shiny_app_test.

library(shiny)

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

  # App title ----
  titlePanel("Hello Shiny!"),

  # Sidebar layout with input and output definitions ----
  sidebarLayout(

    # Sidebar panel for inputs ----
    sidebarPanel(

      # Input: Slider for the number of bins ----
      sliderInput(inputId = "bins",
                  label = "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)

    ),

    # Main panel for displaying outputs ----
    mainPanel(

      # Output: Histogram ----
      plotOutput(outputId = "distPlot")

    )
  )
)

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

  # Histogram of the Old Faithful Geyser Data ----
  # with requested number of bins
  # This expression that generates a histogram is wrapped in a call
  # to renderPlot to indicate that:
  #
  # 1. It is "reactive" and therefore should be automatically
  #    re-executed when inputs (input$bins) change
  # 2. Its output type is a plot
  output$distPlot <- renderPlot({

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

    hist(x, breaks = bins, col = "#75AADB", border = "white",
         xlab = "Waiting time to next eruption (in mins)",
         main = "Histogram of waiting times")

    })

}

shinyApp(ui = ui, server = server)

1.4

To check that everything is working, open a separate script file, and run the command runApp("app.R").

The Hello Shiny! example Shiny app discussed in Section 6 of the Data Visualisation in R supplement should appear.

For the moment, close the app - it’s time to make some changes.

Note: If the app does not appear in a new window, and you receive an error message, try double-checking the steps outlined above, checking that your app.R script contains only the code provided in the 1.3 code chunk, and checking that you have the shiny R package installed.

2 Modifying an existing Shiny app

Now that we have a working app.R script, let’s begin to tinker with the code.

2.1

Open up your app.R script, and change the title of your app from “Hello Shiny!” to “Hello Data Science”.

2.2

Next, change the settings on the slider, so the minimum is 3, the maximum is 40, and the starting number is 20.

2.3

Next, see if you can change the colour of the histogram to another colour.

2.4

Recall that within our app.R script, the histogram produced in the server function is assigned to the output distPlot via output$distPlot. In the ui object within our app.R script, distPlot is then called as the output to be presented in the web app, via the plotOutput(outputId = "distPlot") function. In other words, output$distPlot matches plotOutput(outputId = "distPlot").

Try changing the histogram output name from distPlot to displayHist.

Hint: You will have to make this change in two places.

2.5

When you are happy with all these changes, relaunch your app to verify that your changes have worked as desired.

3 Making a Shiny app for the Penguins data

Now that we have familiarised ourselves with the code structure of a Shiny app, let’s make a Shiny app that displays penguins data from the palmerpenguins R package (Horst, Hill, and Gorman 2020). By now you should be quite familiar with this data, so we won’t need to spend any time exploring the characteristics of the penguins data set.

Let’s begin.

3.1

Following the process outlined in Section 6 of the Data Visualisation in R supplement, and using the code in 1.3, produce a simple Shiny web app that displays a histogram of the flipper length (in mm) of the penguins in the Palmer Archipelago. This app should include a slider so that users can select the number of bins displayed in the histogram.

As a guide, try to follow these steps:

1. Create a new directory for your penguins app (remember each app should have a separate directory).
2. Create your app.R script file and save it in your new directory (use the code in 1.3 for the base version of this script).
3. Modify this script as required. Don’t worry about changing the bin specifications - just focus on the data being used.
4. Change the title of the app, and the labels on the histogram.

Note that you will need to make sure that you load the palmerpenguins package within your app.R file.

One aspect of the penguins data set which we have brushed over in previous labs is that it contains several missing values. These can cause difficulties with our code. To avoid this, please include the following line of code, directly after the line in which you load the palmerpenguins package:

penguins <- na.omit(penguins)
# this removes the NA observations in the penguins data set

3.2

Once you are happy with your app, run it. If all goes well, you should end up with an app that looks something like this:

Figure 3.1: Example Shiny Web App for Histogram of Penguin Flipper Length.

Note: If you have made a decent effort to create this app, but just can’t seem to get it fully working, take a look at the code in the Code chunk below:

library(shiny)
library(palmerpenguins)
penguins <- na.omit(penguins)

# Define UI for app that draws a histogram ----
ui <- fluidPage(
  
  # App title ----
  titlePanel("Palmer Penguins Flipper Length"),
  
  # Sidebar layout with input and output definitions ----
  sidebarLayout(
    
    # Sidebar panel for inputs ----
    sidebarPanel(
      
      # Input: Slider for the number of bins ----
      sliderInput(inputId = "bins",
                  label = "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
      
    ),
    
    # Main panel for displaying outputs ----
    mainPanel(
      
      # Output: Histogram ----
      plotOutput(outputId = "flipperPlot")
    )
  )
)

# Define server logic required to draw a histogram ----
server <- function(input, output) {
  
  output$flipperPlot <- renderPlot({
    
    x    <- penguins$flipper_length_mm
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    
    hist(x, breaks = bins, col = "#75AADB", border = "white",
         xlab = "Flipper length of penguins (mm)",
         main = "Histogram of Penguin Flipper Lengths")
    
  })
  
}

shinyApp(ui = ui, server = server)

4 Adding widgets to a Shiny app

A widget is an interactive web element. Widgets have a default value, specified in our app.R script, and users can change this value by interacting with the widget. In fact, the current version of our penguin Shiny app already features a widget - the histogram bin slider!

We can add multiple widgets to our Shiny app, to enhance user experience. Let’s try this now.

4.1

Shiny contains a family of pre-built widgets, each with their own R function. For our slider bar, we used the widget function sliderInput. Some other options - and their corresponding R functions - include:

• Checkbox (single) - checkboxInput
• Checkbox (group) - checkboxGroupInput
• Numeric Input - numericInput
• Text Input - textInput
• Date Range - dateRangeInput
• Select Box - selectInput

As you can see, these function names are fairly intuitive, and all contain the ending Input.

4.2

For our app.R script, we will focus on adding a Select Box (using selectInput), which is a box with choices from which to select.

We can add widgets to our app.R script by placing the relevant code within one of the Panel sections of our ui object (either the sidebarPanel() or mainPanel() sections).

Each widget function takes a set of specific arguments (which is why we are only focusing on adding one right now!). The first two arguments for all widgets are however the same:

• The widget must have a name
• The widget must have a label

Let’s take another look at the code for the slider bar widget for our app.

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

You can see here that the first argument, inputId = "bins", is telling R that the name of this widget is "bins" - this is used to access the value of the widget. This value is defined in the server function, via the line of code bins <- seq(min(x), max(x), length.out = input$bins + 1).

The second argument, label = "Number of bins:" specifies the widget label that will appear in your app.

Note: You can refer to Figure 3.1 to check this label.

4.3

Let’s keep things simple, and try to add a scatter plot to our app. For this scatter plot, we would like to use a Select Box to select the penguins variable plotted on the vertical axis. For the horizontal axis, we will use the variable body_mass_g.

To begin, we need to add a selectInput widget to the ui object section of your app.R script. This widget should allow users to select between the variables bill_length_mm, bill_depth_mm and `flipper_length_mm.

Use the code below as a guide to do this now. Once completed, place this chunk of code within the sidebarPanel() function, before the sliderInput function.

Hint: You will have to replace the ...s with appropriate code.

  selectInput(inputId = "select", 
                  label = "Penguin Variables:", 
                  choices = c("Bill Length (mm)" = "bill_length_mm", 
                              ...)),

Note that here:

• The input reference ID is select (equivalent to bins for the histogram bin slider)
• The label that will appear above the widget is “Penguin Variables:”

4.4

Once you are happy with your code, try re-running your app. If all goes well, you should end up with a new widget in your app, that when clicked looks something like this:

Figure 4.1: Modified Shiny Web App for Penguin Data.

5 Making Reactive Outputs for Shiny

Hang on a minute though…we’ve added a widget but nothing’s happening!

This is because we haven’t yet coded our app to have reactive output, based on what the user selects from our Select Box widget. Let’s rectify that now.

5.1

Recall that we use the plotOutput(outputId = "distPlot"), command within the mainPanel section of our ui object to tell our app to display the object distPlot.

If we want our new widget to change the variables plotted in our scatter plot, we must tell R that we want a scatter plot to be displayed!

Let’s call this scatter plot object scatterPlot.

Using the code command shown earlier in 5.1 for distPlot, add a line of code in the mainPanel section to tell R to display the object scatterPlot.

Hint: You can check the Code chunk below if you need to double-check your work.

plotOutput(outputId = "scatterPlot"),

5.2

Great! Now all we need to do is include some code in the server function section of our app.R script, to actually carry out the calculations to plot the scatter plot.

We will keep this simple. Read over the code below, and then add it inside your server function.

output$scatterPlot <- renderPlot({

  w <- penguins[, c("body_mass_g", input$select), drop = FALSE]
  
  plot(w, col = "#75AADB")
  
})

Note that just as we call the user input value for the histogram bin slider via input$bin, we can call the user input value for our scatter plot select box here via input$select (take a look back at 4.3 if this doesn’t make sense).

5.3

We should now be good to go. Try re-running your app. If all goes according to plan, you should now have a reactive scatter plot included in your app!

6 Modifying the Shiny User Interface

Excellent! We now have a responsive scatter plot displaying the relationship between the Palmer Penguins’ body masses and other measurements. However, our user interface is looking a little basic - let’s add some details to finish up.

There are many Shiny user interface options available to us, and we won’t have time to cover all them in this lab, so please keep in mind that the following options are just a selection from a wider set.

6.1

The fluidPage function within the ui object of our app.R script is used to create a dynamic display for our Shiny app - i.e. it will adjust to the dimensions of your user’s screen.

By placing different elements within this function, we can change the appearance and layout of our app.

Recall that we have three panels in a Shiny app (the title panel, the side panel, and the main panel).

Currently, our Penguin app has a sidebar on the left-hand side. Try changing this now, by including the element position = "right" inside the sidebarLayout() function.

6.2

Try switching the positions of the widgets in the sidebar, by swapping their code chunks in the ui object (you should be able to select the whole chunk corresponding to the widget, cut it and then paste it above/below the code chunk for the other widget)

Note: Make sure you have a comma only at the end of the first widget code chunk.

6.3 Formatted text

We can add text to our different panels, to provide details about our data.

To add helpful text above or below a widget (to describe the purpose of the widget), we can use the helpText function, within the sidebarPanel function. To display the text above the widget, put the helpText code above the widget. To display the text below the widget, put the helpText code below the widget - simple as that.

Take a look at the code below for an example.

helpText("this is some helpful text to describe a widget"),

6.4

If we would like to add formatted text, such as a paragraph, we can use the p function, within the relevant panel.

Take a look at the code below for an example.

p("using p creates a paragraph of text."),

6.5

Finally, we can also add images to our app. This is relatively simple, but there is one step we must perform first. Any image file we add must be in a folder named www within the directory containing your app.R script.

1. Make this folder now.
2. Search the Creative Commons image database for a penguin image.
3. Save it with the file name penguin.jpg in your www folder.

6.6

To insert the image, we can use the code img(src = "penguin.jpg") in a suitable place within our app.R script - for instance within the mainPanel section.

6.7

The image size might be too large or too small - we can modify the height and width dimensions (in pixels) using the additional commands height and width (which seems logical) in the img() function.

Take a look at the code below for an example.

img(src = "penguin.jpg", height = 300),

Using this information, try to make your image fit more nicely within your app by changing its display dimensions.

6.8 Challenge

To test your understanding of the information presented above, use the various functions and elements we have just covered to try and recreate the Shiny app pictured below.

Figure 6.1: Improved Shiny Web App for Penguin Data.

Don’t worry if you can’t get all the elements to work (and of course your penguin image may be different). A copy of the app.R script used to generate the app shown below will be included in the solutions to this computer lab, so you can check that if there were any parts which you were unsure about.

7 Publishing your Shiny App

For details on how to publish your Shiny app online, please refer to Section 6 of the Data Visualisation in R supplement.

Great job, that’s everything for today!

That was a lot to cover, but hopefully this lab has inspired you to learn more Shiny skills in the future.

Do you have a preference for Plotly or Shiny?

Remember, you can always refer back to this material at a later date if you need a quick refresher.

References

Chang, Winston, Joe Cheng, JJ Allaire, and Carson Sievert et al. 2021. shiny: Web Application Framework for R. https://shiny.rstudio.com/.

Horst, Allison Marie, Alison Presmanes Hill, and Kristen B Gorman. 2020. Palmerpenguins: Palmer Archipelago (Antarctica) Penguin Data. https://doi.org/10.5281/zenodo.3960218.

RStudio Team. 2020. RStudio: Integrated Development Environment for R. Boston, MA: RStudio, PBC. http://www.rstudio.com/.

These notes have been prepared by Rupert Kuveke. Please note that some of the content in these notes has been developed from the R Studio Shiny Tutorial (RStudio Team 2020). The copyright for the material in these notes resides with the authors named above, with the Department of Mathematical and Physical Sciences and with La Trobe University. Copyright in this work is vested in La Trobe University including all La Trobe University branding and naming. Unless otherwise stated, material within this work is licensed under a Creative Commons Attribution-Non Commercial-Non Derivatives License BY-NC-ND.