1. Building apps
Let's put everything we've learned so far in this chapter together to build an app using the gapminder dataset.
2. Explore Life Expectation vs. GDP per Capita
In this app, users will explore the relationship between life expectancy and GDP per capita. Users will select a continent and a year. Based on their choice, the app will display a scatterplot of life expectation versus GDP per capita.
3. Explore Life Expectation vs. GDP per Capita
A tab layout will allow switching between the plot and an interactive datatable. The table will give users the opportunity to explore the raw data used to build the plot.
4. Building Shiny apps: 4 steps
There are many different ways to build a Shiny app. We strongly advocate for a standard process, and will demonstrate one that has worked really well for us.
Start by adding the inputs to the UI. Add the outputs in the UI and server. Then, modify the app layout in the UI. Finally, update the outputs in the server to incorporate user inputs.
5. Step 1: Add inputs (UI)
This app will use two inputs: a selectInput that allows users select the continent, while a sliderInput allows users select the year.
Note that we use a step size of 5 in the sliderInput, since the dataset only has values for every 5 year period.
6. Step 1: Add inputs (UI)
If you run the app at this point, you can see the inputs in the app already.
7. Step 2: Add outputs (UI)
The next step is to add outputs. Here, there should again be two: a plot output and an interactive datatable output.
As we learned before, adding outputs is a two step process:
First, add an output to the UI then render the output in the server.
Start by adding the output calls to the UI. Use plotOutput for the plot and DT::DTOutput for an interactive datatable.
8. Step 2: Add outputs (Server)
It's very useful at this stage to plug in placeholder outputs to preview the app. Accordingly, create a plot output with an empty plot and a table with the full gapminder data frame.
Note that these are placeholders. Momentarily, we'll modify the code so the plot and table display only the chosen continent and year.
9. Step 2: Add outputs (UI/Server)
Running the app at this stage, the inputs and outputs are visible and stacked one on top of the other. Let's change the layout.
10. Step 3: Update layout (UI)
A clean way to lay this application out is to first move the inputs to the sidebar and then display the outputs on the right. Recall this can be done by wrapping the inputs in sidebarPanel, the outputs in mainPanel, and wrapping the combination in sidebarLayout.
11. Step 3: Update layout (UI)
Next, we can display the output in tabs by wrapping each output inside a tabPanel, and wrapping the combination inside a tabsetPanel.
Preview the app to see how it looks with a layout.
12. Step 3: Update layout (UI)
It's so much cleaner!
13. Step 4: Update outputs (Server)
The outputs need to be updated so they display the correct plot and table based on the user's choices.
The plot and interactive table should use only rows of gapminder corresponding to the chosen continent and the chosen year. Though there are many ways to accomplish this in R, for this course we'll use tidyverse principles to filter and ggplot2 to plot the data.
Recall that we can access the value of an input named x using input$x.
14. Step 4: Update outputs (Server)
The final app looks like this for the selected continent and year.
15. Let's practice!
Now you'll practice building some apps from scratch. Try to follow the steps of adding inputs, adding outputs, updating the layout, and then updating outputs. You should also try running your app after each step to ensure everything works as intended. Ready to start building apps?