Introduction to Shiny

Dr Nicola Rennie

Welcome!

What to expect during this workshop

  • The workshop will run for 1 hour.

  • Combines slides, live coding examples, and exercises for you to participate in.

  • Ask questions throughout!

What to expect during this workshop


I hope you end up with more questions than answers after this workshop!

Workshop resources

Course website: nrennie.rbind.io/training-intro-to-shiny

Screenshot of course website

What is Shiny?

What is Shiny?

  • Shiny is an open source R package that provides a framework for building web applications using R.

  • Shiny helps you turn your analyses into interactive web applications without requiring HTML, CSS, or JavaScript knowledge.

Shiny hex logo

What can you build with Shiny?

  • Interacting with and exploring data

  • Showcasing how models work under a wide range of parameters

  • Developing apps as teaching aids

  • …

Shiny examples

See: shiny.posit.co/r/gallery

Building a basic app structure

Packages required

Assuming that you already have R installed, you will also need to install the {shiny} R package:

install.packages("shiny")

and load it into R:

library("shiny")

We’ll also need some data so we’ll install the {palmerpenguins} package:

install.packages("palmerpenguins")

Packages required

…which has data about penguins!

library("palmerpenguins")
head(penguins)
# A tibble: 6 × 8
  species island    bill_length_mm bill_depth_mm flipper_length_mm body_mass_g
  <fct>   <fct>              <dbl>         <dbl>             <int>       <int>
1 Adelie  Torgersen           39.1          18.7               181        3750
2 Adelie  Torgersen           39.5          17.4               186        3800
3 Adelie  Torgersen           40.3          18                 195        3250
4 Adelie  Torgersen           NA            NA                  NA          NA
5 Adelie  Torgersen           36.7          19.3               193        3450
6 Adelie  Torgersen           39.3          20.6               190        3650
# ℹ 2 more variables: sex <fct>, year <int>

Structure of a Shiny App

Shiny apps come in two parts:

UI

  • Defines the layout and appearance.

  • Contains elements such as:

    • layout structures (sidebars)
    • inputs (text boxes, sliders, buttons)
    • outputs (plots, tables)

Server

  • Performs calculations.

  • Contains the logic to respond to user inputs, and update outputs.

  • Communicates with the UI to dynamically render outputs.

Structure of a Shiny App

  • Single file app (called app.R)

  • Multiple file app (including reusable modules)

  • Shiny app as an R package

Live Demo!

  • Creating an app file

  • Adding UI and Server elements

  • Running a Shiny app

Exercise 1

05:00

  • Open up your IDE of choice.

  • Make sure you have the {shiny} package installed.

  • Create an app.R file.

  • Add ui and server elements, as well as shiny::shinyApp(ui, server).

  • Check it works.

Developing a user interface

Building the User Interface (UI)

What’s included in the UI?

  • Contains elements such as:

    • layout structures (sidebars)
    • inputs (text boxes, sliders, buttons)
    • outputs (plots, tables)

Layouts

There are many layouts within Shiny and its extension packages. We’ve already seen:

ui <- fluidPage()

Fluid pages follow a structure of rows, which contain columns.

A common approach is a sidebarPanel() and a mainPanel().

User inputs

  • Text Input (textInput()): Allow users to input text data using a text box.

  • Numeric Input (numericInput()): Enable users to input numerical values using a slider or numeric input box.

  • Checkbox Input (checkboxInput()): Provide binary options for users to select/deselect.

  • Select Input (selectInput()): Offer users a dropdown menu to select from multiple options.

  • File Input (fileInput()): Enable users to upload files such as CSV, Excel, or text files.

  • Action Button (actionButton()): Trigger specific actions or events when clicked by the user.

Outputs

  • Plot Output (plotOutput()): Display interactive plots generated from R code.

  • Table Output (tableOutput()): Present data in tabular format, allowing users to explore and interact with the data.

  • Text Output (textOutput()): Show text or character strings dynamically generated based on user inputs or reactive expressions.

  • UI Output (uiOutput()): Dynamically generate and display UI elements based on user inputs or reactive expressions.

  • Download Output (downloadButton() / downloadHandler()): Provide functionality to download data, plots, or files generated within the Shiny application.

Live Demo

  • Add a title

  • Use a sidebar layout

  • Add a dropdown menu with selectInput()

Exercise 2

05:00

  • Inside the fluidPage() function, add a title panel, sidebar, and main panel.

  • Add a drop down menu with selectInput() to choose by Island.

  • What happens if you use checkboxGroupInput() instead?

  • Bonus: add additional user options! See: mastering-shiny.org/basic-ui.html

Adding reactive elements

Reactive programming with Shiny

  • After a user changes an input, we usually want to change something. It might be a plot, data, other UI elements, …

  • Let’s say that after a user select a specific species, we want to create (and update) a scatterplot of bill length against bill depth for that species.

  • We need to start by subsetting the data.

Reactive programming with Shiny

We use a reactive() element which reacts to a user input:

filter_data <- reactive({
    penguins[penguins$species == input$species, ]
  })

  • We access the user input using input$inputId.

  • We can use this reactive element in other server functions using filter_data(). Note the brackets.

  • See also observe() and observeEvent().

Generating outputs

We can add outputs to the UI using e.g. plotOutput("outputId"). But we need to make outputId…

output$penguinsPlot <- renderPlot({
    plot(filter_data()$bill_length_mm, filter_data()$bill_depth_mm)
  })

  • We need to assign the object to output$.

  • The renderX should match the xOutput in the UI e.g. renderPlot and plotOutput.

  • There are other arguments to renderPlot() e.g. height, so we wrap the R expression in {}.

Live Demo

  • Add a reactive() that filters data based on dropdown input

  • Create a plot using reactive data

  • Add the plot to the user interface

Exercise 3

05:00

  • Add a reactive() in the server to subset the data based on the user input you created.

  • Create a bar chart of number of penguins per species. plotOutput() also works for {ggplot2} plots!

  • Check your app runs.

  • Bonus: the default Shiny app styling is fine. Install and load the {shinythemes} package. Try adding theme = shinytheme("cyborg") to the UI.

  • Browse: rstudio.github.io/shinythemes

Deploying a Shiny app

What do we mean by deployment?




Getting the Shiny app off your laptop and out into the world!

Traditional deployment

We need a server to run the R code:

  • shinyapps.io
  • Posit Connect
  • Private server (e.g. university)

Screenshot of Rstudio

Shinylive deployment

Shinylive diagram

Shinylive deployment

See posit-dev.github.io/r-shinylive.

The {shinylive} package converts a standard shiny app into a shinylive app:

install.packages("shinylive")

Assuming your app.R file is in a folder called app:

shinylive::export("app", "site")

You can then use the files in the site folder to deploy it as a normal website.

*not all R packages are available for shinylive.

**initial load time is still quite slow.

Tips for building Shiny apps

Tips for building Shiny apps

  • Build tests using shinytest2.

  • Building apps as packages helps with dependency management.

  • Learn a little bit of HTML, CSS, and Javascript.

  • Modules are a good way to reuse bits of UI and server code across the application.

  • Start with pen and paper… (think about user experience!)


nrennie.rbind.io

nicola-rennie

nrennie

Thank you!

nrennie.rbind.io/training-intro-to-shiny