Seitenleisten-Layouts

Mit Layoutfunktionen kannst du Eingaben und Ausgaben in der UI visuell anordnen. Ein gut gewähltes Layout macht eine Shiny-App nicht nur ansprechender, sondern verbessert auch die User Experience.

In dieser Übung passt du das Layout einer Shiny-App an, mit der Nutzerinnen und Nutzer die Popularität trendiger Namen erkunden können. Deine finale App sollte optisch so aussehen:

An app where the name selector appears in the left sidebar, while the graph appears on the right in the main panel

Diese Übung ist Teil des Kurses

Webanwendungen mit Shiny in R entwickeln

Kurs anzeigen

Anleitung zur Übung

Ändere das Layout dieser App so, dass der Namensauswähler in der Seitenleiste erscheint und Plot sowie Tabelle rechts im Hauptbereich zu sehen sind.

Interaktive Übung

Vervollständige den Beispielcode, um diese Übung erfolgreich abzuschließen.

ui <- fluidPage(
  # MODIFY CODE BELOW: Wrap in a sidebarLayout
    # MODIFY CODE BELOW: Wrap in a sidebarPanel
    selectInput('name', 'Select Name', top_trendy_names$name),
    # MODIFY CODE BELOW: Wrap in a mainPanel
    plotly::plotlyOutput('plot_trendy_names'),
    DT::DTOutput('table_trendy_names')
)

# DO NOT MODIFY
server <- function(input, output, session){
  # Function to plot trends in a name
  plot_trends <- function(){
     babynames %>% 
      filter(name == input$name) %>% 
      ggplot(aes(x = year, y = n)) +
      geom_col()
  }
  output$plot_trendy_names <- plotly::renderPlotly({
    plot_trends()
  })
  
  output$table_trendy_names <- DT::renderDT({
    babynames %>% 
      filter(name == input$name)
  })
}

shinyApp(ui = ui, server = server)

Code bearbeiten und ausführen