Mass shootings: 도움말 표시

앱에 대해 더 많은 맥락을 제공하면 항상 유용해요. 그 한 가지 방법은 앱에 About 버튼을 추가하고, 해당 맥락을 모달 대화 상자로 표시하는 거예요.

이번 연습에서는 바로 그 작업을 해 볼 거예요. 사용자가 "About" 버튼을 클릭하면, 아래 스크린샷과 유사한 모습이 되도록 만들어요.

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

다음 코드 조각을 사용하면 모달 대화 상자에 'About' 텍스트를 표시할 수 있다는 점을 기억하세요:

showModal(modalDialog("About"))

이 연습은 강의의 일부입니다

R로 Shiny 웹 애플리케이션 만들기

강의 보기

연습 안내

UI: show_about라는 이름의 작업 버튼을 추가하세요.
Server: observeEvent를 사용해 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)

코드 편집 및 실행