Enhancing Web Pages with    R in the Browser         Gabriel Becker  University of California, Davis  Joint with Duncan Te...
Outline●   Introduction●   Examples          –   Combining R with Web Technologies          –   Interactive R plots●   Bey...
Interactivity●   Interactive plots and data explorations are    becoming more and more popular        –   New York Times  ...
The Big Picture ●   We should want to be in the Web browser               –   De facto standard platform for viewing      ...
High Level Use-cases ●    Narrative documents containing interactive viz.               –   NYTimes dataviz articles ●    ...
What We Can Do ●    Some examples of what RbrowserPlugin      allows us to doEnhancing Web Pages with R in the Browser - G...
Combining R with Web                         Technologies ●    (Virtually) All Web technologies contain a      JavaScript ...
R and Google Maps ●    R and Google Maps mashup exampleEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Ar...
R and Google Maps ●    Google Maps               –   Visualize geographical data               –   select location for det...
Interactive Graphics Device ●   Prototyped using RGraphicsDevice package (all R code)               –   Rewritten in C for...
R and Video Content ●    R and video content mashup exampleEnhancing Web Pages with R in the Browser - Gabriel Becker - Ba...
Handling User Interaction with R                 Functions ●    Linked R PlotsEnhancing Web Pages with R in the Browser - ...
Linked Plots ●    Two R plots drawn to different canvases ●    Event handlers added to each point in both      plots using...
Showing Closest Earthquakes ●    Adding (and removing) points to an existing plotEnhancing Web Pages with R in the Browser...
Closest Earthquakes ●    Coded (almost) entirely in R ●    Background (map) is only drawn one ●    Points are added and re...
Setting Nuisance Parameters ●    Using HTML5 controls to set value of nuisance      parametersEnhancing Web Pages with R i...
The Election! ●    How could a statistician resist?Enhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area u...
Combining Viz. And Narrative ●    Trivial to add text to HTML document               –   Static (article text)            ...
Reproducing Research ●    Sweave, knitr, etc style dynamic documents               –   Reproduce results but NOT research ...
Reproducing Research Cont ●    Non-linear structure of research not easily      handled by Sweave, knitr, etc ●    We need...
What Does RbrowserPlugin Bring to            the Table? ●    Interactively choose between alternate      approaches       ...
Interactive Data Analysis                          Documents ●    Tech Demo 4: Interactive data analysis      documentEnha...
Vizualising Analyses as Data ●    Tech Demo 5: Dependency explorer for      complex analysis documentEnhancing Web Pages w...
Why The Browser (Details) ●   HTML5               –   Emerging standard for adding interactivity, graphics, and           ...
Bi-Directional Communication ●    JavaScript ↔ R ●    Each language able to               –   see objects in other languag...
Javascript – R Communication ●    Javascript ↔ R               –   Full control of HTML pages from R (via                 ...
Accessing R from JavaScript ●    R engine is represented by the R object               –   R functions accessed as methods...
JS → R Example Code ●    Calling R functions                   var rands = R.rnorm(10); ●    Calling R functions with name...
Accessing JS from R  ●   Global JavaScript object represented by JS      object in R global evironment                –   ...
R → JS Example Code ●    Call a function defined in a script tag                   ret = JS$myjsfun() ●    Access a global...
Marshalling Objects  ●   Objects marshalled in a sensible way by default  ●   Scalar values copied between languages  ●   ...
Future Work ●    Add security layer ●    Authoring tools ●    browserpaint – package to offer Web page      based backend ...
Acknowledgements ●    Duncan Temple Lang ●    Deborah Nolan ●    Michael Lawrence ●    Nicholas Lewin-Koh ●    Current dev...
Interactive Documents ●    Similar to the powerful Dynamic Documents      formula               –   SWeave, odfWeave, Xdyn...
Types of Documents ●    Dynamic Documents               –   Author is in control, viewer is passive               –   Code...
Applications of Interactive Docs ●   Pedagogy               –   Interactive tutorials show the code actually              ...
Browser vs Server                           Browser                                    Server                           Ar...
Real-Time and Pre- Computation ●    Real-Time Computation               –   R is available               –   Unlimited amo...
Upcoming SlideShare
Loading in …5
×

RBrowserPlugin Project (Gabriel Becker)

875 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
875
On SlideShare
0
From Embeds
0
Number of Embeds
120
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

RBrowserPlugin Project (Gabriel Becker)

  1. 1. Enhancing Web Pages with R in the Browser Gabriel Becker University of California, Davis Joint with Duncan Temple Lang
  2. 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. 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. 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 – RBrowserPluginEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 4
  5. 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 resultsEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 5
  6. 6. What We Can Do ● Some examples of what RbrowserPlugin allows us to doEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 6
  7. 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 contentEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 7
  8. 8. R and Google Maps ● R and Google Maps mashup exampleEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 8
  9. 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 strengthsEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 9
  10. 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 redrawEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 10
  11. 11. R and Video Content ● R and video content mashup exampleEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 11
  12. 12. Handling User Interaction with R Functions ● Linked R PlotsEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 12
  13. 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 wayEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 13
  14. 14. Showing Closest Earthquakes ● Adding (and removing) points to an existing plotEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 14
  15. 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 SearchTreesEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 15
  16. 16. Setting Nuisance Parameters ● Using HTML5 controls to set value of nuisance parametersEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 16
  17. 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. 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 articlesEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 18
  19. 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 questionsEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 19
  20. 20. Reproducing Research Cont ● 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 Langs XDynDocs package – Documents are sub-settable, queriable, etc – I wont belabor the package hereEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 20
  21. 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 timeEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 21
  22. 22. Interactive Data Analysis Documents ● Tech Demo 4: Interactive data analysis documentEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 22
  23. 23. Vizualising Analyses as Data ● Tech Demo 5: Dependency explorer for complex analysis documentEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 23
  24. 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. 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 desiredEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 25
  26. 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 LibraryEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 26
  27. 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 fileEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 27
  28. 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. 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. 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. 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 desiredEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 31
  32. 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 systemEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 32
  33. 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 DevelopmentEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 33
  34. 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 pageEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 34
  35. 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 viewerEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 35
  36. 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 choiceEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 36
  37. 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 serverEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 37
  38. 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 neededEnhancing Web Pages with R in the Browser - Gabriel Becker - Bay Area useR Group - San Francisco - Nov. 13, 2012 38

×