Mengonversi flexdashboard kita untuk menggunakan Shiny
Mari kita buat dashboard ini menjadi interaktif dengan Shiny!
Latihan ini adalah bagian dari kursus
Membangun Dasbor dengan flexdashboard
Petunjuk latihan
- Ubah header YAML agar dokumen RMarkdown ini menjadi interaktif.
- Hasilkan dashboard dan coba pilih berbagai wilayah di bilah sisi input. Amati perubahan pada dashboard.
Latihan interaktif praktis
Cobalah latihan ini dengan menyelesaikan kode contoh berikut.
{"my_document.Rmd":"---\ntitle: \"Bike Shares Daily\"\noutput: \n flexdashboard::flex_dashboard:\n orientation: columns\n vertical_layout: fill\n---\n\n```{r global, include=FALSE}\nlibrary(flexdashboard)\nlibrary(readr)\nlibrary(leaflet)\nlibrary(DT)\nlibrary(tidyverse)\nlibrary(lubridate)\nlibrary(plotly)\n\noptions(shiny.sanitize.errors = FALSE)\n\ntrips_df <- read_csv('https://assets.datacamp.com/production/course_6961/datasets/sanfran_bikeshare_joined_oneday.csv') %>%\n mutate(duration_min = duration_sec / 60)\n\nsf_bbox <- c(-123.0137, 37.6040, -122.3549, 37.8324)\nsj_bbox <- c(-122.0457, 37.1255, -121.5891, 37.4692)\n\ntrips_df <- trips_df %>%\n mutate(city = ifelse((start_latitude >= sf_bbox[2] & start_latitude <= sf_bbox[4]) &\n (start_longitude >= sf_bbox[1] & start_longitude <= sf_bbox[3]),\n 'San Francisco', ifelse((start_latitude >= sj_bbox[2] & start_latitude <= sj_bbox[4]) &\n (start_longitude >= sj_bbox[1] & start_longitude <= sj_bbox[3]),\n 'San Jose', 'Other')))\n```\n\nColumn {data-width=200 .sidebar}\n-----------------------------------------------------------------------\n\n```{r}\n\nradioButtons(\"origin_location\", label = \"Select trip origin region to display:\", \n choices = c('All' = 'all', 'San Francisco' = 'sf', 'San Jose' = 'sj'), \n selected = c('all'))\n\ntrips <- reactive({\n\n if(input$origin_location == 'sf') {\n trips_df <- trips_df %>% filter(city == 'San Francisco')\n } else if(input$origin_location == 'sj') {\n trips_df <- trips_df %>% filter(city == 'San Jose')\n }\n\n trips_df\n\n})\n\n```\n\nColumn {data-width=450}\n-----------------------------------------------------------------------\n\n### Origins\n\n```{r}\n\nrenderLeaflet({\n trips() %>%\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\nColumn {data-width=350}\n-----------------------------------------------------------------------\n\n### Total Trips\n\n```{r}\n\nrenderValueBox({\n valueBox(prettyNum(trips() %>%\n nrow(), big.mark = ','), \n icon = 'fa-bicycle')\n})\n\n\n# valueBox(prettyNum(nrow(trips_df), big.mark = ','), icon = 'fa-bicycle')\n```\n\n### Trips by Start Time\n\n```{r}\n\nrenderPlot({trips() %>%\n mutate(hour = hour(start_date)) %>%\n group_by(hour) %>%\n summarize(`Trips Started` = n()) %>%\n ggplot(aes(x = hour, y = `Trips Started`)) +\n theme_bw() +\n ylab('Trips Started \\n') +\n geom_bar(stat = 'identity') \n})\n\n\n```\n\n\n"}