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

<Kurs>Webanwendungen mit Shiny in R entwickeln</Kurs>

Kurs ansehen

Übungsanweisungen

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 praktische Übung

Versuche dich an dieser Übung, indem du diesen Beispielcode vervollständigst.

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