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

この演習はコースの一部です

Building Web Applications with Shiny in R

コースを見る

演習の手順

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

実践的なインタラクティブ演習

このサンプルコードを完成させて、この演習に挑戦してみましょう。

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)

コードを編集して実行