Interactive Visualization with R


From Taiwan R User Group, more info on Meetup.

7th China R Conf (Beijing), 2014-05-25

Interactive Visualization with R

王亮博 (亮亮)
shared under CC 4.0 BY

Esc to overview
to navigate

Online slide on

About Me

About Taiwan R User Group

  • More known a weekly meetup MLDM Monday (Machine Learning and Data Mining Monday)
  • Topics ranges from
    • R lang: basic tutorial, Rcpp, quantmod, ggplot2, slidify, knitr, googleVis
    • Statistics, ML/DM: survival analysis, neural network, SVM, regression, nonparam. stat
    • Big Data: Hadoop, MPI
    • PyData: Numpy, Scikit-learn, pandas

My honor to be the first in this section. This is an introductory talk.


Why and how?

From publication to manipulation

Demo from

Why interactive?

With today's method, we can reveal more details, provide different view points, and can be fancier :)

How interactive?

Web and browsers dominates our front-end world.

Almost every PC and mobile have a modern browser today.

← Hope SVG here someday

How interactive in R?

We take the first way in this talk.

Why SVG?

Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics.

Mozilla Developer Network

SVG Intro

SVG Intro

Full intro can be found on Mozilla Developer Network.

<svg version="1.1" width="300" height="300"
  <rect x="40" y="30" width="200" height="200" rx="20"
    fill="red" stroke="black" stroke-width="2" />
  <rect x="80" y="60" width="200" height="200" rx="40"
    fill="blue" stroke="black" stroke-width="2"
    fill-opacity="0.7" />

SVG Basic Elements

  • Rectangles: rect
  • Circle: circle
  • Ellipse: ellipse
  • Line: line
  • Polyline: polyline
  • Polygon: polygon
  • Path: path
  • Group: g


  • Position (0, 0) at topleft: x y
  • Size: width height
  • Stroke (color): stroke stroke-width stroke-opacity
  • Fill (color): fill fill-opacity

But specify each element one by one is hard.

SVG style can be specified by CSS

  <rect class="myrect" ... />
  <rect class="myrect" id="upper" ... />
  .myrect {
    fill: red;
    stroke: black; stroke-width: 2px;
  #upper {
    fill: blue; fill-opacity: 0.7;

Use CSS3 interaction ability

  .myrect:hover {
    fill: white;
    stroke: green;
    stroke-width: 10;
    transition: 0.75s;

So you get an interactive SVG!

SVG Interaction Summary

grid Intro

R Graphics Toolchain

  • Adapted from gridSVG project page
  • Today we focus on ggplot2 here
  • ggplot2 builds on top of grid
  • To export to SVG, one can through either
    • native grDevices
    • gridSVG

What's grid

Show the concept by a quick demo.

pushViewport(plotViewport(c(5, 4, 2, 2)))
  pressure$temperature, pressure$pressure,
  pressure$temperature, pressure$pressure,
)  # upper figure

grid.yaxis()  # lower figure
grid.edit("dataSymbols", pch=10)
upViewport(1)  # inner
grid.rect(gp=gpar(lty="dashed", fill=0))
upViewport(1)  # outer
grid.rect(gp=gpar(lty="dotted", fill=0))
# upper plot

  "Pressure (mm Hg)\nversus\nTemperature (Celsius)",
  x=unit(250, "native"), y=unit(600, "native")
# lower plot

Further Reading

  • Cannot not fully cover grid today
  • Follow R Graphics 2nd, Paul Murrel
  • Detailed illustration about traditional R plotting functions, grid system, lattice and ggplot2

ggplot2 to SVG

Using grid to export to SVG is just a filename away.

g <- qplot(clarity, data=diamonds, fill=cut, geom="bar")
       plot=g, width=10, height=8)

Direct SVG Result

  • Work like a charm
  • Convert all words into outline
  • Generated SVG loses original grid structure
  • Hacking this SVG is slightly harder

girdSVG Intro

g <- ggplot(...) + ...  # plot your ggplot2 here
g.svg <- grid.export("demo.svg", addClasses=TRUE)

(The text is selectable)


Our try on interactive visualization is ...

Like this approach?

Limitation of this approach

We mentioned two ways about interactive visualization in R.

Generate an interactive R plot directly

Package-dependent implementation.
All generates R plots through HTML, SVG, JS, CSS.

Take home message

Thank You!

Fork me on GitCafe