RBrowserPlugin Project (Gabriel Becker)

Gabriel BeckerUniversity of California, Davis

Joint with Duncan Temple Lang

Enhancing Web Pages with R in the Browser

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

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

Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 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


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


What We Can Do

● Some examples of what RbrowserPlugin allows us to do


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


R and Google Maps

● R and Google Maps mashup example


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


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


R and Video Content

● R and video content mashup example


Handling User Interaction with R Functions

● Linked R Plots


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


Showing Closest Earthquakes

● Adding (and removing) points to an existing plot


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


Setting Nuisance Parameters

● Using HTML5 controls to set value of nuisance parameters


The Election!

● How could a statistician resist?


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


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


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


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


Interactive Data Analysis Documents

● Tech Demo 4: Interactive data analysis document


Vizualising Analyses as Data

● Tech Demo 5: Dependency explorer for complex analysis document


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)


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


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


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


JS → R Example Code

● Calling R functionsvar rands = R.rnorm(10);

● Calling R functions with named argumentsvar rands2 = R.rnorm(args({n:10, sd:5}));

● Calling R functions with empty argumentsvar rands3 = R.rnorm(10, emptyArg, 7);

● Accessing R variables by namevar rpi = R.pi;


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 [[


R → JS Example Code

● Call a function defined in a script tagret = JS$myjsfun()

● Access a global variabledom = JS[[“document”]]

● Call an object methoddiv = dom$getElementById(“mydiv”)

● Access an object propertydiv[[“innerHTML”]] = “R says hello!”


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


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


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

http://www.github.com/gmbecker/RFirefox


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


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


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


Browser vs Server

Browser Server

Security

Performance

Privacy

Data

Arbitrary R code executed on local Machine

Arbitrary R code executed on Server

Less powerful machine, only 1 request

More powerful machine, many requests

Private data can be stored on local machine

Data must be stored on server

Each viewer must download/obtain data

Single instance of data on server


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

RBrowserPlugin Project (Gabriel Becker)

Technology

Transcript of RBrowserPlugin Project (Gabriel Becker)