## Building Dashboards<br/>with Shiny and RMarkdown [Slides] hackmd.io/p/S1511oQAx#/ [Repo] github.com/leoluyi/ptt_give_dashboard <style> strong { color: orange; font-weight: normal; } code { padding: 0 !important; padding-top: 0.1em !important; padding-bottom: 0.1em !important; margin: 0 !important; font-size: 85% !important; background-color: rgba(222, 222, 222, 0.3) !important; border-radius: 3px !important; } </style> --- ## I'm Leo Lu github: leoluyi --- ## Outline Today I'm going to share with you: - What is a Dashboard? - Easy **interactive dashboards** for R (`flexdashboard`) - Some little vignette about getting info from **PTT** - Some **data visualization** --- ## What is a Dashboard?  ----  ----  ---- ### What is a Dashboard? An app that: - [x] Is **always available** - [x] Displays **key information** - [x] Refreshes **automaitcally** - [x] (**Interactive**) ---- ## Why build one with R? - Reproducible - No need much font-end techniques - Customizable: hack everything! --- # Intro to flexdashboard ---- ## flexdashboard Easy interactive dashboards for R - Built on R Markdown [](http://rmarkdown.rstudio.com/flexdashboard/) ---- ## 起手式 ----  ----  ---- ## YAML ```r --- title: "My Dashboard" output: flexdashboard::flex_dashboard: orientation: columns vertical_layout: fill social: menu source_code: embed --- ``` ---- ## Dashboard Layouts - Use Markdown headings to describe the boxes and space division of your dashboard - **Boxes**: level 3 headers (`###`) - **Columns** (or rows, or tabs): level 2 headers (`##`) - **Pages**: level 1 headers (`#`) ---- ## `h3`: boxes ``` ### This is a box. This is some text in the box. ```  ---- ## `h2`: columns ``` ## My first column ### My first box This is some text in a box. ## My second column ### My second box This is some slightly different text in a box. ``` ---- ## `h2`: columns  ---- ## `h1`: pages  ---- ## Shiny runtime in Rmd: Make it dynamic!! 1. Add `runtime: shiny` to the options 2. Add the `{.sidebar}` attribute to the first column of the dashboard to make it a host for Shiny input controls 3. When including plots, be sure to wrap them in a call to `renderPlot`. ---- ```r= --- title: "Shiny Dashboard" output: flexdashboard::flex_dashboard runtime: shiny --- ``` --- # R Shiny 101 ---- ## Basic Structure  https://www.rstudio.com/resources/cheatsheets/ ---- ## Reactivity  https://shiny.rstudio.com/articles/reactivity-overview.html ---- ## Reactivity  ---- ## Reactive conductors > reactive world Something of `reactive()` or `renderXX()` ---- ## Making reatcive data ```r= dt_filter_reac <- reactive({ dt_filter <- as.data.table(dt) # hard copy # Filter metatag if (!is.null(input$metatagSelect)) { # tag_filter = c("客服", "帳務") tag_filter <- input$metatagSelect dt_filter <- dt_filter[purrr::map_lgl(metatag, ~ any(. %in% tag_filter)),] } ## Filter category if (!any(input$categorySelect == "All")) { dt_filter <- dt_filter[category %in% input$categorySelect,] } }) ``` --- # PTT give 板 > 我要搶頭香！ :ideograph_advantage: github.com/leoluyi/ptt_give_dashboard ---- ## Tasks - How to parse the data into information? - Data storage - Live update - Keyword search - Visualization ---- ## Live update :recycle: - [reactiveTimer](https://shiny.rstudio.com/reference/shiny/latest/reactiveTimer.html) ```r= library(shiny) ui <- fluidPage( sliderInput("n", "Number of observations", 2, 1000, 500), plotOutput("plot") ) server <- function(input, output) { # Anything that calls autoInvalidate will automatically invalidate # every 2 seconds. autoInvalidate <- reactiveTimer(500) # Generate a new histogram each time the timer fires, but not when # input$n changes. output$plot <- renderPlot({ autoInvalidate() hist(rnorm(isolate(input$n))) }) } shinyApp(ui, server) ``` ---- ## Keyword search - `reactives` --- ## There are so many D3.js tools in R ---- [d3heatmap](https://github.com/rstudio/d3heatmap)  ---- [networkD3](https://christophergandrud.github.io/networkD3/)  --- ## References - [Shiny Conference Videos](https://www.rstudio.com/resources/webinars/shiny-developer-conference/) - [flexdashboard](http://rmarkdown.rstudio.com/flexdashboard/shiny.html) - [htmlwidgets](http://www.htmlwidgets.org/)  --- ## 蟲友小聚招募中 2017/05/18(四) 18:40 2017/06/21(三) 18:40 Linkore Space / 台北市松山區民生東路三段113巷25弄45號1樓  ---- https://goo.gl/SFrnpy