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"))

Latihan ini adalah bagian dari kursus

Building Web Applications with Shiny in R

Lihat Kursus

Petunjuk latihan

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')).

Latihan interaktif praktis

Cobalah latihan ini dengan menyelesaikan kode contoh berikut.

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)

Edit dan Jalankan Kode