Mass shootings: display help

It is always useful to provide users with more context about your app. One way to do this is by adding an About button to the app and display the context as a modal dialog.

This is exactly what we will be doing in this exercise. Your app will resemble the image in this screenshot, when the user clicks on the "About" button.

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

Recall that you can display the text 'About' in a modal dialog using the snippet:

showModal(modalDialog("About"))

Cet exercice fait partie du cours

Building Web Applications with Shiny in R

Afficher le cours

Instructions

UI: Add an action button named show_about.
Server: Use observeEvent to trigger the display of a modal dialog using showModal(modalDialog(text_about, title = 'About')).

Exercice interactif pratique

Essayez cet exercice en complétant cet exemple de code.

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)

Modifier et exécuter le code