Build a babynames explorer Shiny app

Building Web Applications with Shiny in R

Ramnath Vaidyanathan

VP of Product Research

Sketch your app

Computer drawn rough sketch of what an app displaying a baby name over time might look like

Add inputs (UI)

ui <- fluidPage(

  titlePanel("Baby Name Explorer"),

  textInput('name', 'Enter Name', 'David')

)

server <- function(input, output, session){

}

shinyApp(ui = ui, server = server)

A web app with title "Baby name explorer" and the name "David" entered

Add outputs (UI/server)

ui <- fluidPage(
  titlePanel("Baby Name Explorer"),
  textInput('name', 'Enter Name', 'David'),

  plotOutput('trend')

)

server <- function(input, output, session){

  output$trend <- renderPlot({
    ggplot()
  })

}

shinyApp(ui = ui, server = server)

Add outputs (UI/server)

A web app with title "Baby names explorer", the name "David" entered, and a blank plot displayed

Update layout (UI)

ui <- fluidPage(
  titlePanel("Baby Name Explorer"),

  sidebarLayout(

    sidebarPanel(

      textInput('name', 'Enter Name', 'David')

    ),

    mainPanel(

      plotOutput('trend')

    )

  )

)

server <- function(input, output, session){
  output$trend <- renderPlot({ggplot()})
}

Update layout (UI)

A web app with title "Baby names explorer", the name "David" entered, and a blank plot displayed, where name input is on the left and blank plot is on the right

Update output (server)

ui <- fluidPage(
  ...
)

server <- function(input, output, session){
  output$trend <- renderPlot({

    data_name <- subset(
      babynames, name == input$name
    )

    ggplot(data_name) +
      geom_line(
        aes(x = year, y = prop, color = sex)
      )

  })
}

A web app with title "Baby names explorer", the name "David" entered, and a plot of the name's frequency over time displayed, where name input is on the left and plot is on the right

Let's practice!

Building Web Applications with Shiny in R