R Graphics for the Web

 

Paul Murrell and Simon Potter

paul@stat.auckland.ac.nz
The University of Auckland

R Graphics for the Web

Problem Statement: Generate an R plot for the Web

library(lattice)
latticePlot <- xyplot(mpg ~ disp, mtcars, pch=21, cex=1.5,
                      main="Motor Trend Car Road Tests",
                      col=blue, fill=thrublue,
                      par.settings=list(background=list(col="grey90")))

PNG Graphics

png("plot.png")
print(latticePlot)
dev.off()

PNG circle

PNG Graphics

<img src="plot.png"/>
Pros
  • You can produce any R plot
Cons
  • The graphic is static
  • Raster graphics do not scale

SVG Graphics

svg("plot.svg")
print(latticePlot)
dev.off()

SVG plot

SVG Graphics

<img src="plot.svg"/>
Pros
  • You can produce any R plot
  • Vector graphics scale
Cons
  • The graphic is static
  • You are limited to R graphics concepts

gridSVG Graphics

library(gridSVG)
gridsvg("gridsvg-plot.svg")
print(latticePlot)
dev.off()

Motor Trend Car Road Tests disp mpg 10 15 20 25 30 35 100 200 300 400

gridSVG Graphics

<img src="gridsvg-plot.svg"/>
Cons
  • You can only produce graphics based on grid
Pros
  • Vector graphics scale
  • You have access to SVG concepts

R Graphics

R Graphics

gridSVG: Only grid-based output

png("graphics.png")
plot(mpg ~ disp, mtcars)
dev.off()

PNG circle

gridSVG: Only grid-based output

gridsvg("graphics.svg")
plot(mpg ~ disp, mtcars)
dev.off()

gridSVG: The grid Display List

gridsvg("gridsvg-plot.svg")
print(latticePlot)
dev.off()

gridSVG: The grid Display List

A grid-based plot ...

print(latticePlot)
grid.ls()
plot_01.background
plot_01.main
plot_01.xlab
plot_01.ylab
plot_01.ticks.top.panel.1.1
plot_01.ticks.left.panel.1.1
plot_01.ticklabels.left.panel.1.1
plot_01.ticks.bottom.panel.1.1
plot_01.ticklabels.bottom.panel.1.1
plot_01.ticks.right.panel.1.1
plot_01.xyplot.points.panel.1.1
plot_01.border.panel.1.1

gridSVG: The grid Display List

gridsvg("grid-edit.svg")
print(latticePlot)
grid.edit("lab", grep=TRUE, global=TRUE, gp=gpar(col="grey60"))
grid.remove("top|right", grep=TRUE, global=TRUE)
dev.off()

Motor Trend Car Road Tests disp mpg 10 15 20 25 30 35 100 200 300 400

gridSVG Graphics

<img src="gridsvg-plot.svg"/>
Cons
  • You can only produce graphics based on grid
Pros
  • Vector graphics scale
  • You have access to SVG concepts

R Graphics

R Graphics

SVG concepts: Tooltips

gridsvg("tooltip.svg")
print(latticePlot)
grid.garnish("points", grep=TRUE, group=FALSE,
             title=paste("x =", mtcars$disp, " y =", mtcars$mpg))
dev.off()

Motor Trend Car Road Tests disp mpg 10 15 20 25 30 35 100 200 300 400

SVG concepts: Animation

gridsvg("animate.svg")
print(latticePlot)
grid.animate("plot_01.xyplot.points.panel.1.1", group=FALSE,
             "stroke-opacity"=0:1,
             "fill-opacity"=c(0, .2),
             duration=mtcars$mpg)
dev.off()

Motor Trend Car Road Tests disp mpg 10 15 20 25 30 35 100 200 300 400

SVG concepts: Animation

Fertility (# children per woman) Life Expectancy (at birth) 20 40 60 80 20 40 60 80 AF NA 2 4 6 8 AS OC 2 4 6 8 EU SA 2 4 6 8 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009

SVG concepts: Gradient Fills

gridsvg("gradient-demo.svg")
grid.circle(r=.4, name="circ")
gradient <- radialGradient(c("white", "blue", "black"), fx=.3, fy=.7)
grid.gradientFill("circ", gradient)
dev.off()

SVG concepts: Gradient Fills

gridsvg("gradient.svg")
print(latticePlot)
registerGradientFill("specular", gradient)
grid.gradientFill("points", grep=TRUE, group=FALSE,
                  label=rep("specular", nrow(mtcars)))
dev.off()

Motor Trend Car Road Tests disp mpg 10 15 20 25 30 35 100 200 300 400

SVG concepts: Gradient Fills

SVG concepts: Gradient Fills

SVG concepts: Pattern Fills

gridsvg("pattern-demo.svg")
grid.circle(r=.4, gp=gpar(fill="grey"))
dev.off()

SVG concepts: Pattern Fills

barplot <- barchart(table(mtcars$gear),
                    par.settings=list(background=list(col="grey90")))

Freq 3 4 5 0 5 10 15

SVG concepts: Pattern Fills

gridsvg("pattern.svg")
print(barplot)
pattern <- pattern(circleGrob(r=.4, gp=gpar(fill="grey")),
                   width=.05, height=.05)
registerPatternFill("circles", pattern)
grid.patternFill("rect", grep=TRUE, group=FALSE,
                  label=rep("circles", 3))
dev.off()

Freq 3 4 5 0 5 10 15

SVG concepts: Pattern Fills

SVG concepts: Filters

gridsvg("filter.svg")
print(latticePlot)
blur <- filterEffect(feGaussianBlur(sd=1))
grid.filter("main|lab|tick|border", grep=TRUE, global=TRUE, blur)
dev.off()

Motor Trend Car Road Tests disp mpg 10 15 20 25 30 35 100 200 300 400

SVG concepts: Filters

SVG concepts: Clipping Paths

circles <- circleGrob(r=c(.45, .2),
                      gp=gpar(col=NA, fill=c("grey", "white")))

SVG concepts: Clipping Paths

gridsvg("plot-clip.svg")
cp <- clipPath(circles)
pushClipPath(cp)
print(latticePlot, newpage=FALSE)
dev.off()

Motor Trend Car Road Tests disp mpg 10 15 20 25 30 35 100 200 300 400

SVG concepts: Clipping Paths

SVG concepts: Clipping Paths

SVG concepts: Clipping Paths

SVG concepts: Masks

SVG concepts: Masks

gridsvg("plot-masked.svg")
mask <- mask(circles)
pushMask(mask)
print(latticePlot, newpage=FALSE)
dev.off()

Motor Trend Car Road Tests disp mpg 10 15 20 25 30 35 100 200 300 400

SVG concepts: Masks

SVG concepts: Masks

SVG concepts: Masks

SVG concepts: Masks

SVG concepts: Javascript

gridsvg("plot-js.svg")
print(latticePlot, newpage=FALSE)
grid.garnish("points", grep=TRUE, group=FALSE,
             onclick=paste("alert('x =", mtcars$disp, 
                           "y =", mtcars$mpg, "')"))
dev.off()

Motor Trend Car Road Tests disp mpg 10 15 20 25 30 35 100 200 300 400

SVG concepts: Javascript

SVG concepts: Javascript

SVG concepts: Javascript

Playing

gridsvg("leaf.svg")
library(grImport)
leaf <- readPicture("fall12.xml")
grid.picture(leaf)
dev.off()