Tiroteos masivos: mostrar ayuda

Siempre es útil ofrecer a las personas usuarias más contexto sobre tu app. Una forma de hacerlo es añadiendo un botón About a la app y mostrar el contexto en un cuadro de diálogo modal.

Esto es exactamente lo que haremos en este ejercicio. Tu app se parecerá a la imagen de esta captura cuando el usuario haga clic en el botón "About".

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

Recuerda que puedes mostrar el texto 'About' en un diálogo modal usando el fragmento:

showModal(modalDialog("About"))

Este ejercicio forma parte del curso

Creación de aplicaciones web con Shiny en R

Ver curso

Instrucciones del ejercicio

UI: Añade un botón de acción llamado show_about.
Server: Usa observeEvent para mostrar un diálogo modal con showModal(modalDialog(text_about, title = 'About')).

Ejercicio interactivo práctico

Prueba este ejercicio y completa el código de muestra.

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)

Editar y ejecutar código