입력을 차트 상자로 이동
사용자 입력을 해당 차트 안으로 옮겨 보세요. 이 입력이 영향을 주는 차트입니다.
이 연습은 강의의 일부입니다
flexdashboard로 대시보드 만들기
연습 안내
- 사이드바에 있는 슬라이더를 Trip Durations 차트로 옮기고, 플롯 위에 배치하세요.
- 대시보드에서 사이드바를 제거하세요.
- 차트에서 입력 슬라이더와 플롯의 배치가 어떻게 되는지, 그리고 상자를 적절히 채우는지(또는 채우지 않는지) 확인하세요.
실습형 인터랙티브 연습
이 예제를 이 샘플 코드를 완성하여 풀어보세요.
{"my_document.Rmd":"---\ntitle: \"Bike Shares Daily\"\noutput: \n flexdashboard::flex_dashboard:\n orientation: columns\n vertical_layout: fill\nruntime: shiny\n---\n\n```{r global, include=FALSE}\nlibrary(flexdashboard)\nlibrary(readr)\nlibrary(leaflet)\nlibrary(DT)\nlibrary(tidyverse)\nlibrary(lubridate)\nlibrary(plotly)\n\ntrips_df <- read_csv('https://assets.datacamp.com/production/repositories/1448/datasets/1f12031000b09ad096880bceb61f6ca2fd95e2eb/sanfran_bikeshare_joined_oneday.csv') %>%\n mutate(duration_min = duration_sec / 60) %>%\n filter(duration_min <= 8 * 60) # filtering out trips over 8 hours as suspicious\n\n```\n\nColumn {data-width=200 .sidebar}\n-----------------------------------------------------------------------\n\n```{r}\nsliderInput(\"duration_bin\", label = \"Select # of minutes to bin trip durations:\",\nmin = 1, max = 15, value = 5, step = 1)\n```\n\nColumn {data-width=450}\n-----------------------------------------------------------------------\n\n### Origins\n\n```{r}\n\nrenderLeaflet({\n trips_df %>%\n rename(latitude = start_latitude,\n longitude = start_longitude) %>%\n group_by(start_station_id, latitude, longitude) %>%\n count() %>%\n leaflet() %>%\n addTiles() %>%\n addCircles(radius = ~n)\n})\n\n```\n\nColumn {data-width=350}\n-----------------------------------------------------------------------\n\n### Total Trips\n\n```{r}\n\nrenderValueBox({\n valueBox(prettyNum(trips_df %>%\n nrow(), big.mark = ','), \n icon = 'fa-bicycle')\n})\n\n```\n\n### Trip Durations\n\n```{r}\n\nrenderPlot({trips_df %>%\n mutate(`Trip Duration (min)` = duration_sec / 60) %>%\n ggplot(aes(x = `Trip Duration (min)`)) +\n theme_bw() +\n geom_histogram(binwidth = input$duration_bin) +\n ylab('# Trips')\n})\n\n\n```\n\n\n"}