Simple & Quick Web Apps in R
R Shiny is an R package that allows you to build interactive web apps through R. It doesn’t require any previous knowledge of UI, which is ideal for people who lack front-end backgrounds. Shiny allows you to publish web apps on a webpage, or you can embed your R Shiny apps in an R Markdown document.
In this article, we’ll learn how to build a simple time series R Shiny web app.
This tutorial is based off of a web app I created using R Shiny, which you can find here. This app uses data from the 2019 Goodreads Dataset.
First, we’ll need to review the basic structure of an R Shiny App.
There are three components of an R Shiny App:
- a user interface object
- a server function
- a call to the shinyApp function
The user interface (ui) object determines the layout of your app. Here, you’re able to manipulate the appearance of your app.
The server function communicates the instructions needed to build your app. For example, if your goal was to present a histogram, the code needed to create that plot would go here.
The call to the shinyApp function takes the ui object and the server function and combines them to create the Shiny app object.
Now we’ll begin to build our example app. If you’d like a more in depth look at R Shiny before continuing, R Studio has a great tutorial you can find here.
Step 1: Setting Your Directory
Every Shiny app has the same structure. This structure consists of an app.R file that contains the ui object and the server function. You can create your own file by copying the code in the “basic structure of an R Shiny App” section, or you can choose the “Shiny Web App…” option under “new file” in R Studio.
You’ll want to make sure that your Shiny app has its own directory. This is recommended because you run the Shiny app by passing the name of the directory to the function runApp. For example, my directory is called “book-time-series”, so when I want to run my app, my code will look like this:
Once you have your app.R file set up in its own unique directory, you’re ready to move on.
Step 2: Importing and Cleaning Your Data
Now, we’ll import our data. You can download the dataset we’ll be using through the link in the introduction, or by clicking here.
When you need to use a dataset for your Shiny app, you store the dataset in the same directory as app.R by creating a subdirectory called “data” and storing your dataset in that subdirectory.
Once you’ve done this, you’ll be able to access your data in app.R.
We’ll need the following libraries for our app:
Then we’ll need to open the data at the beginning of our app.R file. This is also where you’ll do any necessary data cleaning and preprocessing.
As you can see below, we’re uploading the data into app.R, as well as doing some preliminary data cleaning (dropping null values, transforming column types from factor to float).
Next, we’ll need to do some data preprocessing. If you followed the link earlier to the project we’ll be building, you’ll know that we’re building a time series app. And after looking at the data, you probably noticed that the column “publication_date” was in the form dd/mm/yyyy.
In the following section of code, we’ll isolate the years and build a few tibbles that will help us create the plots we want for the Shiny app.
Step 3: Building Your UI Function
Now that we have the necessary data, we can begin building our UI object.
The function fluidPage is used by Shiny to create a display that can automatically resize to the dimensions of the user’s browser window. You then add elements to fluidPage to build your Shiny app.
We’ll use titlePanel and sidebarLayout. These two elements create the standard Shiny app: a basic Shiny app with a sidebar.
The element sidebarLayout takes the argument sidebarPanel, which is where you provide the user with any necessary information and input options; and mainPanel, which is where you tell your Shiny app what the center-stage output of your app will be (in our case, a time series app).
Here is our code for the UI object:
As you can see, in our sidebarPanel argument we pass the argument helpText, which lets the user know what our Shiny App is doing. We also pass the argument selectInput, which creates a drop down menu of the different dependent variables the user can choose. We add a label to this argument that lets the user know what will happen when they select a dependent variable from the drop down menu, and we choose a default dependent variable to display when the app first opens.
In our mainPanel argument, we pass the function plotOutput with the argument “plot”. This will help us build our server function.
Step 4: Building Your Server Function
Next, we’ll build our server function. Our function takes two arguments, input and output.
We defined our input as “var” and our output as “plot” when designing our ui function. As you can see in the following code example, these definitions are important for building our server function:
As you can see above, we define the ggplot arguments that differ according to which dependent variable is chosen. Then we plot our time series graph.
Step 5: Running Your R Shiny App!
Our last addition to our app.R file: the shinyApp function call.
Finally, it’s time to deploy your R Shiny app! Yay!
Use the code provided in “Step 1: Setting Your Directory” to run your app. Your output should look something like this for each dependent variable:
And there you have it! Your first R Shiny Web App!
If you’d like to publish your app on shinyapps.io, check out this great resource I used for figuring out how to publish my own app.
