1. Build a babynames explorer Shiny app
There are many ways to build a Shiny app. Throughout this course we will follow a standard process that has worked really well for us.
By the end of this lesson, you will build a Shiny app which will allow a user explore the popularity of a name over time.
2. Sketch your app
While building any app, it is critical to begin with the end in mind. Start by sketching how the final app will look and how the user will interact with it. From experience, I can tell you that this makes development much easier.
For this app, we want to display a text box for typing a name and respond with a plot of popularity of the name over time. We'll keep the layout simple and use a two-column layout with the text box on the left and the plot on the right, plus a title on the top.
3. Add inputs (UI)
Recall that every Shiny app has two components: a user interface (UI) and a server. We will start by building the user interface.
First, we will add a titlePanel at the top, to display a nicely styled header.
Next, we will add a textInput to let the user enter their name.
We will leave the server function empty for now.
To run the app, call shinyApp with the ui and server as arguments.
Right now, the app only lets the user type a name. Let's see what else we can add.
4. Add outputs (UI/server)
The next step is adding outputs. Our only output will be an empty plot created using ggplot2. We can add this output in two steps.
First, render the output in the server using renderPlot and assign it to the output list as an element named trend.
If you run the app now, you will notice that nothing has changed. There is no plot. Why?
Well, we haven't done the second step! The plot does not appear because the user interface has no knowledge of it. To let the UI know that there is a plot object named trend that needs to be displayed, we can use the plotOutput function and pass it the name of the output.
5. Add outputs (UI/server)
Running the app now, we see a text input and a plot output in a single column. In our original sketch of the app, we wanted the text to appear on the left and the plot on the right.
6. Update layout (UI)
We can place elements in the UI using layout functions.
We will place the textInput inside sidebarPanel and the plotOutput inside mainPanel. Additionally, we will place both of these panels inside sidebarLayout.
7. Update layout (UI)
If we check the updated app, we now see the two-column layout. Just one step left!
8. Update output (server)
Our final step is creating a line plot showing the popularity of a name input by the user using ggplot2.
To do this, we first create a subset of the babynames data, keeping rows where the name matches the input. We can access the input as input dollar name.
We will use geom_line to generate a line plot of prop, the proportion of births in a given year with the selected name, versus year. To display separate lines based on sex, we will set color to sex.
We've built a baby name explorer!
9. Let's practice!
Now that we have seen how to build a Shiny app from scratch, let's use our knowledge to build a baby name explorer!