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* ```r library(lattice) ``` ```r 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 ============ ```r png("plot.png") print(latticePlot) dev.off() ```

![PNG circle](plot.png)

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 ============ ```r svg("plot.svg") print(latticePlot) dev.off() ```

![SVG plot](graphic.svg)

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 ================ ```r library(gridSVG) ``` ```r gridsvg("gridsvg-plot.svg", prefix="gridsvg-") 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](Rgraphics.svg)

gridSVG: Only grid-based output ================ ```r png("graphics.png") plot(mpg ~ disp, mtcars) dev.off() ```

![PNG circle](graphics.png)

gridSVG: Only grid-based output ================ ```r gridsvg("graphics.svg") plot(mpg ~ disp, mtcars) dev.off() ```
gridSVG: The grid Display List ======= ```r gridsvg("gridsvg-plot.svg", prefix="gridsvg-") print(latticePlot) dev.off() ``` gridSVG: The grid Display List ======= A grid-based plot ... ```r 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 ======= ```r gridsvg("grid-edit.svg", prefix="grid-edit-") 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](Rgraphics.svg)

SVG concepts: Tooltips ================ ```r gridsvg("tooltip.svg", prefix="tooltip-") 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: Hyperlinks ======== ```r gridsvg("hyperlink.svg", prefix="hyperlink-") print(latticePlot) grid.hyperlink("plot_01.main", href="mtcars.html") dev.off() ```
Motor Trend Car Road Tests disp mpg 10 15 20 25 30 35 100 200 300 400
SVG concepts: Hyperlinks ======== SVG concepts: Hyperlinks ======== SVG concepts: Animation ======== ```r gridsvg("animate.svg", prefix="animate-") 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 ======== ```r gridsvg("gradient-demo.svg", prefix="gradient-demo-") 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 ======== ```r gridsvg("gradient.svg", prefix="gradient-") 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 ======== ```r gridsvg("pattern-demo.svg", prefix="pattern-demo-") grid.circle(r=.4, gp=gpar(fill="grey")) dev.off() ```
SVG concepts: Pattern Fills ======== ```r barplot <- barchart(table(mtcars$gear), par.settings=list(background=list(col="grey90"))) ```
Freq 3 4 5 0 5 10 15
SVG concepts: Pattern Fills ======== ```r gridsvg("pattern.svg", prefix="pattern-") 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 ======== ```r gridsvg("filter.svg", prefix="filter-") 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 ============ ```r circles <- circleGrob(r=c(.45, .2), gp=gpar(col=NA, fill=c("grey", "white"))) ```
SVG concepts: Clipping Paths ============ ```r gridsvg("plot-clip.svg", prefix="clip-") 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 ============ ```r gridsvg("plot-masked.svg", prefix="clip-") 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 ============ ```r gridsvg("plot-js.svg", prefix="js-") 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 ======= ```r gridsvg("leaf.svg", prefix="leaf-") library(grImport) leaf <- readPicture("fall12.xml") grid.picture(leaf) dev.off() ```
Playing ======= Playing ======= Playing ======= ```r gridsvg("barchart-silly.svg", prefix="silly-") print(barplot) grid.patternFill("rect", grep=TRUE, group=FALSE, label=rep("leaf", 3)) dev.off() ```
Freq 3 4 5 0 5 10 15
Summary ======= * Web publishing (HTML) is hot * SVG is cool * gridSVG shows potential * bringing SVG goodness to R * bringing R goodness to SVG Acknowledgements ================ * Many of the new features in 'gridSVG' were implemented by Simon Potter as part of his Masters Thesis * The hyperlinked scatterplot example was from Yale's Environmental Performance Index * The "Price Kaleidoscope" and "linked map" examples were produced by David Banks as part of his BSc Honours Project * The 'lattice' plot with checkboxes and tooltips was produced by David Banks as part of his Masters Project * The leaf image was created by OpenClipArt user Aungkarn Sugcharoun