Mass Shootings: Hilfe anzeigen

Es ist immer hilfreich, Nutzerinnen und Nutzern mehr Kontext zu deiner App zu geben. Eine Möglichkeit dafür ist, der App einen About-Button hinzuzufügen und den Kontext als modalen Dialog anzuzeigen.

Genau das machen wir in dieser Übung. Deine App wird so aussehen wie auf dem Screenshot, wenn die Person auf den "About"-Button klickt.

An app displaying red circles for each mass shooting incident with details appearing on clicking the circle

Zur Erinnerung: Du kannst den Text „About“ in einem modalen Dialog mit folgendem Snippet anzeigen:

showModal(modalDialog("About"))

Diese Übung ist Teil des Kurses

Webanwendungen mit Shiny in R entwickeln

Kurs anzeigen

Anleitung zur Übung

UI: Füge einen Aktionsbutton namens show_about hinzu.
Server: Verwende observeEvent, um die Anzeige eines modalen Dialogs mit showModal(modalDialog(text_about, title = 'About')) auszulösen.

Interaktive Übung

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

ui <- bootstrapPage(
  theme = shinythemes::shinytheme('simplex'),
  leaflet::leafletOutput('map', width = '100%', height = '100%'),
  absolutePanel(top = 10, right = 10, id = 'controls',
    sliderInput('nb_fatalities', 'Minimum Fatalities', 1, 40, 10),
    dateRangeInput(
      'date_range', 'Select Date', "2010-01-01", "2019-12-01"
    ),
    # CODE BELOW: Add an action button named show_about
    
  ),
  tags$style(type = "text/css", "
    html, body {width:100%;height:100%}     
    #controls{background-color:white;padding:20px;}
  ")
)

server <- function(input, output, session) {
  # CODE BELOW: Use observeEvent to display a modal dialog
  # with the help text stored in text_about.

  
  
  output$map <- leaflet::renderLeaflet({
    mass_shootings %>% 
      filter(
        date >= input$date_range[1],
        date <= input$date_range[2],
        fatalities >= input$nb_fatalities
      ) %>% 
      leaflet() %>% 
      setView( -98.58, 39.82, zoom = 5) %>% 
      addTiles() %>% 
      addCircleMarkers(
        popup = ~ summary, radius = ~ sqrt(fatalities)*3,
        fillColor = 'red', color = 'red', weight = 1
      )
  })
}

shinyApp(ui, server)

Code bearbeiten und ausführen