Beginner’s Guide to Creating an R Shiny App

The R Shiny framework is a package from RStudio that makes it incredibly easy to build interactive web applications with R. R Shiny is awesome in the sense that it allows you to create highly effective data reports and visualizations where the user can explore a data set. Along with Shiny elements, you can use HTML elements to stylize your content in your application.

In my opinion, R Shiny is very easy to learn despite how powerful the tool is. If you’re working on a side project or looking to add something to your portfolio, I highly recommend trying it out.

Summary of R Shiny features:

• Build simple web applications without JavaScript
• Automatically "live" in the same way that spreadsheets are live. Input changes will trigger an automatic update
• Works in any R environment
• Attractive default UI theme based on Twitter Bootstrap.
• Pre-built & customizable output widgets for displaying plots, tables, and printed output of R objects.

Source: https://rstudio.github.io/shiny/tutorial/

Introduction

This tutorial will go step-by-step on how to create a two-page Shiny application using Mario Kart 8 character data found in Kaggle. The application will consist of an introduction page and a visualization page. In our visualization page, we will build an interactive vertical bar chart where the user can select which variable they would like to see compared to each Mario Kart 8 character.

Follow this guide to see how the code is broken down. You can also refer to the final code at this GitHub repo, as well as the final Shiny application.

Shiny App Structure

Shiny applications are divided into two parts: the User Interface (UI) and the Server. The UI is responsible for the app presentation, while the server is responsible for the app logic.

The UI controls what is being displayed on the application page and how the components are laid out. This may include text and other markdown elements, graphics, widgets that take in user input, or plots. You will also use the UI to define a navigation bar with multiple tabs in this tutorial.

The Server controls the data that will be displayed through the UI. The server will be where you load in and wrangle data, then define your outputs (i.e. plots) using input from the UI.

Both of these parts can be defined in one file, but it is good practice to separate these into two files to simplify any future changes or maintenance on the app.

Setup

First, you’ll want to set up three files: ui.R to define the app presentation, server.R to define the app logic, and app.R to combine the former two. The bulk of your code will be in the UI and server files – we’ll cover these in the next sections.

Your app.R file will be simple – it will source the UI and server files and create the Shiny application using shinyApp().

You’ll need to install and load the shiny package.

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

Second, you will need to source the UI and server files. Create the Shiny application, and you’re done with this file.

source("ui.R")
source("server.R")

shinyApp(ui = ui, server = server)

Previewing your application

As you develop your Shiny application, you can click on the "Run App" button at the top right corner of your code panel in RStudio to preview your application.

The UI

The user interface defines what will be displayed in the application. This includes text, images, plots, widgets, and more. We will create an application with two tabs, so this file will define a ui variable that returns a navbarPage of two panels.

First, let’s create the introduction page shown above. We will define our first panel, where you can edit text content as shown below. If you’d like, you can add additional HTML-like elements to stylize your page more, such as links and images.

intro_panel <- tabPanel(
  "[Tab Title]",

  titlePanel("[Page Title]"),

  img(src = "[img source]"),

  p("[Summary text for page]"),

  p(a(href = "[url]", "[Link text]"))
)

Next, we will define our second panel, where all of our visualization work will go. We will need to define our sidebar content and main content, which we can then combine in our second tabPanel().

For our sidebar, we will include a select widget that allows the user to select the Y variable of our plot. We will label this select widget "y_var" which we will use later to make changes to the plot in our server.R file. In our main content, we call "plot" which will be defined later in our server.R file as well.

You can define the select_values variable for the selectInput → choices by calling select_values = colnames(data) (and you may modify as needed).

sidebar_content <- sidebarPanel(
  selectInput(
    "y_var",
    label = "Y Variable",
    choices = select_values,
    selected = "Speed"
  )
)

main_content <- mainPanel(
  plotOutput("plot")
)

Define our second tab panel as we did with our intro panel.

second_panel <- tabPanel(
  "[Tab Title]",

  titlePanel("[Page Title]"),

  sidebarLayout(
    sidebar_content, main_content
  )
)

Finally, we will put the two panels together into our final navbarPage object.

ui <- navbarPage(
  "[Nav Bar Title]",
  intro_panel,
  second_panel
)

The Server

In this file, you will generally follow these steps:

1. Load in libraries and data files
2. Wrangle data
3. Define charts/plots in the server function

The server.R file will define a function that takes in input values defined by the UI and assigns values to the ‘output’, shown below.

server <- function(input, output) {
  # assign values to `output` here
}

In our server function, we want to define output$plot to match the "plot" label we wrote in our UI main panel: plotOutput("plot"). To initialize this, we will call renderPlot() to create our plot in.

output$plot <- renderPlot({

   ggplot(data=characters, aes_string(x='Character', 
      y=input$y_var, fill="Class")) +
      geom_bar(stat="identity", width=0.8) +
      labs(x="Character", y=input$y_var) + coord_flip()

})

You can use any visualization libraries you wish to create your plot. For this example, I will be using ggplot. The most important factor is including your input variables. We defined a UI input variable y_var that will be used to select which variable is showing in the y-axis (in a vertical bar plot, it will show as the x-axis). You can refer to this variable as input$y_var, and it can be used to wrangle, label, and display data in your plot.

Now that everything is connected, you can view and interact with your visualization!

Check out the Shiny App here!

Publish Your Shiny App

Good news: publishing your Shiny application on shinyapps.io ** is _super easy!**_ Just follow these steps:

1. Create a free account on shinyapps.io.
2. Install the rsconnect package using install.packages()
3. Authorize your account: All you need to do is copy the command provided in your dashboard and run it in your RStudio console.
4. Once you’ve authorized, you can publish your application after you run your app by clicking ‘Publish’ at the top right corner.

---

Full code for this guide can be found at this GitHub repo. You can find more resources to beef up your Shiny application at shiny.rstudio.com. For more resources on R programming + an awesome chapter on R Shiny, I highly recommend this book.