1. Enhancing Web Pages with
R in the Browser
Gabriel Becker
University of California, Davis
Joint with Duncan Temple Lang
2. Outline
● Introduction
● Examples
– Combining R with Web Technologies
– Interactive R plots
● Beyond Graphics
– Reproducing Research
– Interactive Analysis Documents
● Technical Details
– Bi-Directional Communication Model
– API
– Marshalling Objects
● Conclusion
3. Interactivity
● Interactive plots and data explorations are
becoming more and more popular
– New York Times
– Election Coverage
● How can we create these experiences with R?
– Server solutions: rook, shiny, Rserve, OpenCPU
– Pre-creation solutions: SVGAnnotation,
gridSVG, kmlDevice
– In R solutions: rggobi, iPlots, cranvas
4. The Big Picture
● We should want to be in the Web browser
– De facto standard platform for viewing
interactive/multimedia content
– Ubiquitous
– Actively being developed
● Standards (HTML5, DOM)
● Software (browsers, JavaScript Viz libraries, etc)
– Potential for mobile devices (Android)
● Running R in the browser is one way to do this
– RBrowserPlugin
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 4
5. High Level Use-cases
● Narrative documents containing interactive viz.
– NYTimes dataviz articles
● Interactive training tools for statistical concepts
● R as a powerful JavaScript Library
● Explorable interactive documents
– Reflect entire research process
– Allow viewers to change parameters and
recompute results
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 5
6. What We Can Do
● Some examples of what RbrowserPlugin
allows us to do
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 6
7. Combining R with Web
Technologies
● (Virtually) All Web technologies contain a
JavaScript interface
– This means we can now control them from R
● Google Maps
● Audio/Video content (HTML5, Youtube)
● Flash content
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 7
8. R and Google Maps
● R and Google Maps mashup example
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 8
9. R and Google Maps
● Google Maps
– Visualize geographical data
– select location for detailed summary
● R
– Import data
– Subset data based on selected area
– create graphic about selected area
● Each technology used for its strengths
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 9
10. Interactive Graphics Device
● Prototyped using RGraphicsDevice package (all R code)
– Rewritten in C for performance
● Raphael JavaScript library
● SVG Based
● Each element represented by an JS object reference (points,
lines, etc) retained at drawing time
– Add interaction/animation
– Edit
– Remove
● Live graphics device which is update-able without complete
redraw
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 10
11. R and Video Content
● R and video content mashup example
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 11
12. Handling User Interaction with R
Functions
● Linked R Plots
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 12
13. Linked Plots
● Two R plots drawn to different canvases
● Event handlers added to each point in both
plots using R code (sapply)
● When we mouse over a point
– R Function is called to determine which points
to color
– Color is added to chosen points through
Javascript Properties (using R code)
● Any two types of plot can be linked this way
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 13
14. Showing Closest Earthquakes
● Adding (and removing) points to an existing plot
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 14
15. Closest Earthquakes
● Coded (almost) entirely in R
● Background (map) is only drawn one
● Points are added and removed from existing
plot
– Added via points function
– Removed via function provided by
RBrowserPlugin
● Neighbor lookup performed in R via
SearchTrees
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 15
16. Setting Nuisance Parameters
● Using HTML5 controls to set value of nuisance
parameters
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 16
17. The Election!
● How could a statistician resist?
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 17
18. Combining Viz. And Narrative
● Trivial to add text to HTML document
– Static (article text)
– Dynamic (output from statistical methodology)
● Used to place interactive graphics within larger
context
– Eg within HTML versions of published journal
articles
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 18
19. Reproducing Research
● Sweave, knitr, etc style dynamic documents
– Reproduce results but NOT research process!
● Data analysis is not a linear, first time is a
charm affair
– Often try multiple methods
– Different data cleaning/implementation
strategies
– Answering different questions
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 19
20. Reproducing Research Con't
● Non-linear structure of research not easily
handled by Sweave, knitr, etc
● We need a more general, structured type of
dynamic document
– Exists in Duncan Temple Lang's XDynDocs
package
– Documents are sub-settable, queriable, etc
– I won't belabor the package here
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 20
21. What Does RbrowserPlugin Bring to
the Table?
● Interactively choose between alternate
approaches
– Evaluate code and insert results into Web Page
● Visualize the structure of the document/analysis
as a graph
– Use to navigate within the analysis
● Code is run on client machine at viewing time
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 21
22. Interactive Data Analysis
Documents
● Tech Demo 4: Interactive data analysis
document
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 22
23. Vizualising Analyses as Data
● Tech Demo 5: Dependency explorer for
complex analysis document
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 23
24. Why The Browser (Details)
● HTML5
– Emerging standard for adding interactivity, graphics, and
multimedia to Web pages
– Standardized, easy-to-use GUI controls
● Buttons, sliders, checkboxes, text input, etc
– MathML
● LaTeX quality typesetting for mathematical formulae
– <canvas> element
● Standardized raster-style JavaScript “graphics device”
● JavaScript
– Complete control over the loaded HTML page
– Event Handlers for Web page interactions
– Impressive emerging Viz. technologies (D3, Raphael, etc)
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 24
25. Bi-Directional Communication
● JavaScript ↔ R
● Each language able to
– see objects in other language
– Get local reference to objects in other language
– Directly manipulate objects in other language
● Change value/properties of object
– Directly call functions/methods in other
language
– Copy objects into local language when desired
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 25
26. Javascript – R Communication
● Javascript ↔ R
– Full control of HTML pages from R (via
Javascript)
● Write model summaries directly to HTML page
– R functions as HTML5/JavaScript event
handlers
● Refit model after slider value changes
– R code in script tags in HTML documents
● Define functions, perform initial fits
● R is now a powerful JS Library
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 26
27. Accessing R from JavaScript
● R engine is represented by the R object
– R functions accessed as methods of this object
– R variables accessed as properties of this
object
● Analogous to the existing Math Javascript
object
● R object is created automatically via provided
JavaScript file
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 27
28. JS → R Example Code
● Calling R functions
var rands = R.rnorm(10);
● Calling R functions with named arguments
var rands2 = R.rnorm(args({n:10, sd:5}));
● Calling R functions with empty arguments
var rands3 = R.rnorm(10, emptyArg, 7);
● Accessing R variables by name
var rpi = R.pi;
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 28
29. Accessing JS from R
● Global JavaScript object represented by JS
object in R global evironment
– Global JS variables are properties of this object
– Global JS functions are methods on this object
● All references to JavaScript objects in R expose
their methods and properties
– Methods/Functions are accessed via $
– Variables/Properties are accsesed via [[
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 29
30. R → JS Example Code
● Call a function defined in a script tag
ret = JS$myjsfun()
● Access a global variable
dom = JS[[“document”]]
● Call an object method
div = dom$getElementById(“mydiv”)
● Access an object property
div[[“innerHTML”]] = “R says hello!”
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 30
31. Marshalling Objects
● Objects marshalled in a sensible way by default
● Scalar values copied between languages
● Non-scalar values passed by reference
– References are interactable as if native objects
● Directly call R function references in JS
● Select elements from R lists/vector references by
name or position in JS
● Set properties of JS objects via familiar
[[ mechanic in R
● Directly call JS object methods via $
● Direct copying can be forced if desired
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 31
32. Future Work
● Add security layer
● Authoring tools
● browserpaint – package to offer Web page
based backend for R interactive graphics
– With Michael Lawrence
● Allow plugin to install R if not already present
on system
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 32
33. Acknowledgements
● Duncan Temple Lang
● Deborah Nolan
● Michael Lawrence
● Nicholas Lewin-Koh
● Current development version of
RBrowserPlugin is available at:
http://www.github.com/gmbecker/RFirefox
● Parts of this work were generously funded by Genentech Research and
Early Development
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 33
34. Interactive Documents
● Similar to the powerful Dynamic Documents
formula
– SWeave, odfWeave, XdynDocs, knitr
● HTML page contains exposition, code chunks,
and result blocks
– Page can be interacted with to change
parameters to the code.
– Code is then executed and new results inserted
into the page
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 34
35. Types of Documents
● Dynamic Documents
– Author is in control, viewer is passive
– Code is rerun but view is set; confirmatory
– Code has hardcoded values for tuning
parameters, etc
● Interactive Documents
– Author sets possible parameters
– Viewer is in control; exploratory
– Code is designed to accept input from viewer
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 35
36. Applications of Interactive Docs
● Pedagogy
– Interactive tutorials show the code actually
running, resetting parameters
– Electronic versions of textbooks.
● Electronic Publishing
– Reproducible Research
– Delivers code as well as results
– Confirm results are correct and up-to-date
– Prove robustness to tuning parameter choice
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 36
37. Browser vs Server
Browser Server
Arbitrary R code Arbitrary R
executed on local code executed
Security Machine on Server
Less powerful More powerful
machine, only 1 machine, many
Performance request requests
Private data can be Data must be
stored on local stored on
Privacy machine server
Each viewer must Single instance
download/obtain of data on
Data data server
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 37
38. Real-Time and Pre- Computation
● Real-Time Computation
– R is available
– Unlimited amount of alternate views
– Computations can take time
● Pre-Computation
– We can use the R functions save() and load()
– Pre-compute arbitrary objects (eg model fits)
and load them when needed
Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 38