What is Shiny?

Shiny is an R package that makes it easy to build interactive web applications (apps) straight from R. You need to install the package shiny:

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

For a quick illustration of what you can do with Shiny head over to the interactive visualization tool for the Freedom of Press Index

Throughout the lab we will use a running example to illustrate the different aspects of creating a shiny app. You can find it in the folder our_app. It is an interactive plot that displays all movies on Rotten Tomatoes and includes several filtering options.

# illustrated workflow 

ui <- shiny::fluidPage()

server <- function(input, output) {}

shiny::shinyApp(ui = ui, server = server)

shiny::runApp("my_shiny_app")

Layout functions / UI 🗾

Shiny uses layout functions to provide the high-level visual structure of an app. For example, shiny::fluidPage() creates a display that automatically adjusts to the dimensions of the user’s browser window. You can lay out the user interface of your app by placing elements in the shiny::fluidPage() function. Alternatives to shiny::fluidPage() exist (i.e. shiny::fixedPage(), shiny::bootstrapPage()), which are useful in specific situations.

Layouts are created by a hierarchy of function calls, where the hierarchy in R matches the generated HTML. This means that you can get an intuitive idea of the app structure by assessing the layout.

fluidPage(
  titlePanel("Hello Shiny!"),
  sidebarLayout(
    sidebarPanel(
      sliderInput("obs", "Observations:", min = 0, max = 1000, value = 500)
    ),
    mainPanel(
      plotOutput("distPlot")
    )
  )
)

Focus on the hierarchy of the function calls:

fluidPage(
  titlePanel(),
  sidebarLayout(
    sidebarPanel(),
    mainPanel()
  )
)

We can guess what is going on by reading their names. We might imagine that this code will generate a classic app design: a title bar at top, followed by a sidebar (containing a slider) and main panel (containing a plot).

While titlePanel() and sidebarLayout() create a basic layout for your Shiny app, you can also create more advanced layouts. For example you can use navbarPage() to give your app a multi-page user interface that includes a navigation bar. Or you can use fluidRow() and column() to build your layout up from a grid system. If you’d like to learn more about these advanced options, have a look at the Shiny Application Layout Guide.

Within the different layout functions you can also customize your app further by italisizing or making your font bold and even including html elements:

To include images you need to use the img function.

img(src = "my_image.png", height = 72, width = 72)

# "src =" needs to be typed out since the html expects it. 

To learn more about how you can customise your UI see here and here.

Widgets 🐭

A widget is a web element that your users can interact with. In other words to make your app interactive, you need widgets. These provide a way for your users to send messages to the Shiny app, meaning that when a user changes the input in a widget, the value that is shown will change as well.

Shiny comes with a family of pre-built widgets, each created with a transparently named R function. For example, Shiny provides a function named actionButton() that creates an Action Button and a function named sliderInput() that creates a slider bar.

Check out the gallery for an overview of standard widgets:

To add a widget to your app, you need to include a widget function in sidebarPanel() or mainPanel() in your ui object.

Each widget function requires several arguments. The first two arguments for each widget are:

1. A name for the widget: The user will not see this name, but you can use it to access the widget’s value. The name should be a character string.

2. A label: This label will appear with the widget in your app. It should be a character string, but it can be an empty string "".

The remaining arguments vary from widget to widget, depending on what the widget needs to do its job. They include things like initial values, ranges, and increments. You can find the exact arguments needed by a widget on the widget function’s help page, (e.g., ?selectInput).

Relevant chunk from our running example:

fluidPage(
  titlePanel("Movie explorer"),
  fluidRow(
    column(3, ... ,
        sliderInput(name = "reviews", label = "Minimum number of reviews on Rotten Tomatoes",
          10, 300, 80, step = 10),
        ... ,
        textInput("director", "Director name contains (e.g., Miyazaki)"),
    ),
    ...,
    selectInput("xvar", "X-axis variable", axis_vars, selected = "Meter")
    )
  )

Display Reactive Output

To give your Shiny App a feeling of live interactiveness you need to include a way to display reactive output. Reactive output automatically responds when your user selects an option in a widget.

There are two steps involved in making your widgets reactive:

1. Add the relevant output function to your ui function.
2. Provide R code to build the object in your server function.

ui <- fluidPage(
  titlePanel("Movie explorer"),
  fluidRow(
    column( ... ),
    column(9,
           plotlyOutput("plot1"),
           wellPanel(
             span("Number of movies selected:",
                  textOutput("n_movies")
                  )
             )
           )

server <- function(input, output, session) {
  ... ,
  
  output$n_movies <- renderText({ nrow(movies()) })
}

# Note that movies is a df that we create within our server function

Exercises

More complicated examples ⚙️

You can create more complicated Shiny apps by loading R Scripts, packages, and data sets.

What you need to know is that:

• The directory that app.R appears in will become the working directory of the Shiny app
• Shiny will run code placed at the start of app.R, before the server function, only once during the life of the app.
• Shiny will run code placed inside server function multiple times, which can slow down the app.

In our example, this is used to first create and join the necessary tables for the entirety of the app. This only needs to be done once. Within the server function we then filter and select based on certain inputs; obviously this needs to be repeated every time the input changes. This is why we placed that code within the server function.

Share your Apps 🧺

You can now build a useful Shiny app, but can you share it with others? This lesson will show you several ways to share your Shiny apps.

When it comes to sharing Shiny apps, you have two basic options:

1. Share your Shiny app as R scripts. This is the simplest way to share an app, but it only works if your users have R on their own computer (and know how to use it). Users can use these scripts to launch the app from their own R session, just like you’ve been launching the apps so far in this tutorial. All they need to do this a copy of your app directory including the app.R script.

2. Share your Shiny app as a web page. This is definitely the most user-friendly way to share a Shiny app. Your users can navigate to your app through the internet with a web browser. They will find your app fully rendered, up to date, and ready to go.

If you prefer the second option, I propose that you have a look at shinyapps.io. It’s RStudio’s hosting service for Shiny apps. shinyapps.io lets you upload your app straight from your R session to a server hosted by RStudio. You have complete control over your app including server administration tools. You can find out more about shinyapps.io by visiting shinyapps.io.

The setup and installation for doing this is relatively straightforward, but requires all the standard boring steps, such as setting up an account, password and getting familiar with the website UI. Therefore we won’t do this here. However, if you have questions you can find a detailed guide here.

Checklist before you start ✅

1. Are you tackling a monitoring task that needs your data/metrics to be updated frequently?
2. Who will use the dashboard and to what end? What questions will they use it to answer? What actions will they take in response to these answers?
3. What specific information should be displayed, and is it meaningful without much context?
4. What could lead to the metrics being wrong/misleading?

If a dashboard still sounds like the best approach after considering these questions, go for it!

Design advice

Even then, there are a number of design guidelines that you should follow. Here is a non-exhaustive list:

• Minimize distractions.
• Focus on meaningful quantities of interest, not the ones that look cool.
• Don’t overload with information.
• Apply all rules of good data visualization.
• Use interactive figures with care (e.g., to make optional content conditionally visible)
• Try not to exceed the boundaries of a single screen.
• Ensure desktop/mobile screen responsiveness (fluidPage(), will achieve this).

Flexdashboard in practice 🏀

The big difference to Shiny apps is that the flexdashboard Rmd file will take over the function used to define the layout of the dashboard/app. In other words, the entire Rmd, now plays the role of fluidPage().

So let’s have a closer look at how you can structure a flexdashboard.

Columns and rows

Dashboards are divided into columns and rows, with output components delineated using level 3 markdown headers (###). By default, dashboards are laid out within a single column, with charts stacked vertically within a column and sized to fill available browser height.

If you want to change the dashboard to include multiple columns you can introduce the following (--------------).

If you want to change the dashboard to include multiple tabs you can introduce the following (=============).

In the YAML tab of the Rmd you can specify a number of additional properties:

• vertical_layout: scroll
• orientation: rows

Feeling overwhelmed? No need to come up with a fancy design all on your own. You can find a long list of templates here.

A note on shiny dashboards

To add Shiny components to a flexdashboard there are a few things that you need to remember.

1. you need to add runtime: shiny to the options declared at the top of the document (YAML front matter).

2. Add the {.sidebar} attribute to the first column of the dashboard to make it a host for Shiny input controls (note this step isn’t strictly required, but many Shiny based dashboards will want to do this).

Overall, however, the same rules apply:

• You should perform any expensive loading of data within the global chunk.
• Input elements will go into the {.sidebar} column.
• Outputs are represented within flexdashboard content panes

Now you are more or less ready to go!

Tools to build personal webpages

There is a plethora of possibilities to build your personal webpage, from very basic to very very complicated.

Very simple point-and-click ways to create websites are Google Sites, WordPress, Wix, etc. However, the free versions often come with ads and other downsides.