Keywords

• HTML
• Widgets
• Interactive
• Visualization
• R
• Easy

HTML

Widgets/JavaScript

https://www.destroyallsoftware.com/talks/wat

Interactive

• print is dead
• https://yihui.shinyapps.io/voice/

Interactive visualization

HTML Widgets

Documentation: http://htmlwidgets.org

Easy (from user’s perspective)

• previously, when you heard a nice JS library
• you read its documentation
• <script src=...></script>
• <link href=... rel="stylesheet"></link>
• read rmarkdown.rstudio.com (includes$in_header)
• prepare data in R for HTML/JS (xml2/jsonlite)
• <script>...</script>
• …
• so many steps to go…

Easy (from user’s perspective)

• print in the R console (the RStudio viewer or web browser)

  widgetFUN(...)

• render in R Markdown

  ```{r fig.width=7, fig.height=4}
  widgetFUN(...)
  ```

  • HTML documents
  • HTML presentations
  • LaTeX/PDF? No! Oh well…
• render in Shiny
  • fooOutput() in UI
  • renderFoo() in server logic

Easy (from developer’s perspective)

# from CRAN
install.packages("htmlwidgets")
# or development version from Github
devtools::install_github("ramnathv/htmlwidgets")

• The inst/htmlwidgets directory (JS/CSS dependencies)
  • The YAML spec file
• R binding htmlwidgets::createWidget()
  • Pass data and options to the JS side
• JS binding

HTMLWidgets.widget({

  name: "FOO",

  type: "output",

  initialize: function(el, width, height) {
    // initialize the element
  },

  renderValue: function(el, data, instance) {
    // render the data in el, e.g.
    // $(el).DataTable(data.options);
  }

})

Easy?

Programming, in movies vs in reality

Your turn

Move on, and develop a widget package!

Thanks!

• RStudio
  • https://www.rstudio.com
  • @rstudio
  • https://github.com/rstudio
• me
  • https://yihui.org
  • @xieyihui
  • https://github.com/yihui