Tuesday, August 6, 2013

I Want ggplot2/lattice and d3 (gridSVG–The Glue)

I really like interactive graphics, especially when they come straight from R.  I posted a lot about rCharts, but it is not the only way.  In my mind there are three types of glue to link R to SVG/HTML/Javascript:

  1. Let R do the data and then send the data to Javascript to create the SVG graphics. This is the process employed by rCharts, clickme,d3network, googleVis, gigvis, and tabplotd3.

  2. Let R both do the data and render the graph then export the SVG to get interactivity from Javascript. We see this with the new and improved gridSVG and the predecessor SVGAnnotation.

  3. Use 1. or 2. and then maintain bidirectional communication between R and Javascript through shiny, Rook, or some other web server type interface.

Let’s think about method 2.  R has ggplot2 and lattice.  Javascript has d3.  I want both.

We R users are very spoiled by the ggplot2 and lattice engines that rival or beat the plotting libraries of any language.  Wouldn’t it be nice to have all the power of these engines to create interactive graphs?  Well, Paul Murrell, the author of grid (platform of ggplot2 and lattice), wrote gridSVG to do just that.  Over the last couple of years, Simon Potter under the guidance of Murrell has refined gridSVG for his honours project.  It is now a full-featured robust package capable of sending even your most complicated ggplot2 and lattice masterpieces to SVG.   gridSVG can do amazing things on his own, but I, of course, wanted to combine gridSVG with d3.  Click here or on the screenshot below to see a walkthrough applying a little gridSVG glue to ggplot2 and d3.


Thanks to Paul Murrell, Simon Potter, Hadley Wickham, Mike Bostock, Duncan Temple Lang, Deborah Nolan, Juliana Williams, Andreas Neumann, Ramnath Vaidyanathan and all the folks along the way that have made this possible.

1 comment:

  1. You should check out some related work: animint allows defining interactive animations entirely in R code using a list of ggplots with clickSelects and showSelected aesthetics.