H T M LW I D G E T S & S H I N Y U S E R ! 2 0 1 5 A A L B O - PowerPoint PPT Presentation

I N T E R A C T I V E V I S U A L I Z A T I O N W I T H H T M LW I D G E T S & S H I N Y U S E R ! 2 0 1 5 A A L B O R G J O E C H E N G < J O E @ R S T U D I O . C O M >

A G E N D A • Overview & demos of htmlwidgets • htmlwidgets vs. Shiny • Interactive graphics with Shiny

H T M LW I D G E T S

W H Y B R O W S E R ? • Integrated vector (SVG), raster (Canvas), and 3D (WebGL) engines, generally GPU accelerated • Fast and powerful layout primitives (HTML) and theming (CSS) • d3, Bootstrap, React, MathJax, three.js, jQuery UI, Font Awesome, ... • Leaflet, Data Tables, NVD3, Google Charts, ... • JavaScript is the world's most well-known programming language [citation needed] • Not because we have to—but because we want to

I N T R O D U C I N G H T M LW I D G E T S • Foundation for building interactive widgets for R using browser- based technology • Removes complexity, tedium, and common bugs for package authors • htmlwidgets-based visualizations can be used from the console, R Markdown docs, and Shiny apps • Brought to you by Ramnath Vaidyanathan, RStudio, and Kenton Russell; first release in December 2014 • http://htmlwidgets.org (or just google "htmlwidgets")

D E M O S

V I S U A L I Z I N G R D ATA I N J S 1. Define R function interface: d3heatmap(mtcars, scale="cols") 2. Serialize data and options to JSON 3. Create HTML file 4. Locate and gather CSS/JavaScript library dependencies, and embed into HTML file 5. Embed an empty HTML element 6. Write custom JavaScript to take data and options and render into HTML element 7. Implement print method 8. Hooks to integrate into RStudio Viewer, R Markdown documents, and Shiny

V I S U A L I Z I N G R D ATA I N J S 1. Define R function interface: d3heatmap(mtcars, scale="cols") 2. Serialize data and options to JSON 3. Create HTML file 4. Locate and gather CSS/JavaScript library dependencies, and embed into HTML file 5. Embed an empty HTML element 6. Write custom JavaScript to take data and options and render into HTML element 7. Implement print method 8. Hooks to integrate into RStudio Viewer, R Markdown documents, and Shiny

W H E R E T O F I N D W I D G E T S • Showcase at htmlwidgets.org • Reverse imports: cran.r-project.org/package=htmlwidgets • Search GitHub for repos with "htmlwidgets" • "Building Widgets" blog by Kenton Russell 
 buildingwidgets.com/blog/

H T M LW I D G E T S V S . S H I N Y

H T M LW I D G E T S V S . S H I N Y Not mutually exclusive: htmlwidgets and shiny can be used separately or together S H I N Y H T M L H T M L W I D G E T W I D G E T

H T M LW I D G E T S V S . S H I N Y htmlwidgets shiny Interactivity "in the small" 
 Interactivity "in the large"

H T M LW I D G E T S V S . S H I N Y htmlwidgets shiny For making individual For composing widgets widgets with JavaScript and R logic as web apps

H T M LW I D G E T S V S . S H I N Y htmlwidgets shiny Once rendered, no more R Continuous access to R as calculations (without Shiny) app is used Deploy on any web host, Deploy on Shiny Server or GitHub.io, or RPubs 
 ShinyApps.io

D E M O : D A S H B O A R D S

I N T E R A C T I V E G R A P H I C S W I T H S H I N Y

I N T E R A C T I V E G R A P H I C S W I T H S H I N Y • Shiny now has basic interactivity primitives for base graphics and ggplot2

D E M O : G G B R U S H

T H A N K Y O U / Q & A htmlwidgets.org shiny.rstudio.com Slides and code samples at github.com/jcheng5/user2015 htmlwidgets talk by Bryan Lewis at New York R Conference 
 youtube.com/watch?v=OXYX1FVlbdI Visit the RStudio booth in the Exhibition Hall with questions