\documentclass{beamer}
\setbeamertemplate{navigation symbols}{}
% \usetheme{Copenhagen}
% \usetheme{Warsaw}
\usetheme{default}
\useinnertheme{rounded}
\useinnertheme{circles}
\useoutertheme{headshadow}
\usecolortheme{orchid}
\usecolortheme{whale}

\setbeamercolor{item}{fg=black}

\usepackage{calc}
\usepackage{alltt}
\usepackage{Sweave}
\usepackage{boxedminipage}
\usepackage{ulem}
\usepackage{hyperref}
\usepackage{fancyvrb}
\usepackage{animate}

\newcommand{\R}{{\sffamily R}}

\DeclareFixedFont{\almosttiny}{OT1}{cmr}{m}{n}{6}

\renewcommand{\emph}[1]{{\bfseries #1}}
\newcommand{\pkg}[1]{{\bfseries #1}}
\newcommand{\code}[1]{{\ttfamily #1}}
\newcommand{\sw}[1]{{\sffamily #1}}
\newcommand{\dfn}[1]{{\bfseries #1}}

\definecolor{greybg}{gray}{0.9}
\definecolor{grey}{gray}{.8}
\definecolor{dkgrey}{gray}{0.5}
\newcommand{\intpic}[3]{
\setlength{\fboxsep}{.1in}
\colorbox{white}{\begin{minipage}[t]{#1}
\vspace{0pt}
\includegraphics[width=#1]{#2}
\end{minipage}\begin{minipage}[t]{\textwidth - #1 - .2in} % .2 = 2 x .1
\vspace{0pt}
\setlength{\parindent}{.1in}
\narrower
~\\
#3 \newline ~
\end{minipage}}}

\begin{document}

<<echo=FALSE>>=
options(continue="  ")
@ 

\SweaveOpts{keep.source = true, eps = false}

\title{Dynamic and Interactive R Graphics for the Web}
\author{Paul Murrell}
\institute{The University of Auckland}
\date{July 2011}

\frame{\titlepage}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{Overview}

The aim is to produce
dynamic and interactive R graphics for the  web
\begin{itemize}
\item
R can produce SVG for the web, but it's static
\item 
Several packages can do interaction, but NOT R plots
and NOT for the Web
\item 
Some packages can do graphics for the web, but NOT R plots
\item
\pkg{SVGAnnotation} does some cool stuff with R plots for the web, 
but it's black magic
\item
\pkg{gridSVG} holds hope for more transparent approach
\end{itemize}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{R Graphics for the Web}

\begin{itemize}
\item
\code{png()} produces images suitable for any browser
\item
SVG, via \code{svg()} function or \pkg{Cairo} package,
 is better ...
  \begin{itemize}
  \item
    SVG is vector graphics so it scales
  \item
    SVG allows text search (in theory)
  \end{itemize}

\begin{center}
\includegraphics[width=1in]{pngvssvg.png}
\raisebox{-.15in}{\includegraphics[width=1.1in]{pngvssvg.pdf}}
\end{center}

... but it is only \emph{static} R graphics
\end{itemize}


\end{frame}



%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{Dynamic and Interactive Graphics}

\begin{itemize}
\item
  The core graphics facilities are focused on static plots
  \begin{itemize}
  \item
    You can draw lots of static plots and ``stitch'' them together
    (e.g., the \pkg{animation} package)
  \item
    There are \code{locator()} and \code{getGraphicsEvent()} functions
  \end{itemize}
\end{itemize}

\begin{center}
\animategraphics[autoplay,loop,height=1in]{1}{animation}{1}{9} 
\end{center}

... which does give you R graphics, but the animation is ``stop motion''
and the interaction is crude (blocks the command line, 
only pixel coordinates for mouse events) 

\end{frame}



%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{Dynamic and Interactive Graphics}

\begin{itemize}
\item
  There are stand-alone interactive systems ...
  \begin{itemize}
  \item
    The \pkg{rggobi} package provides an interface to \sw{GGobi}
  \item
    The \pkg{iplots} package is a self-contained system based on \sw{Java}
  \item
    The \code{qtinterfaces} suite of packages is a self-contained 
    system based on \sw{Qt}
  \end{itemize}

\vspace{.1in}
\includegraphics[width=1.3in]{interactive-interplot1.png}
\hfill
\includegraphics[width=1.6in]{interactive-iplot1.png}
\hfill

\vspace{.1in}
  ... but they are not \R{} graphics and they are not for the web.
\end{itemize}

\end{frame}



%%%%%%%
% FRAME
%%%%%%%
%\begin{frame}[fragile]
%\frametitle{Dynamic and Interactive Graphics}
%
%\begin{itemize}
%\item
%  There are GUI toolkits so that you can roll your own
%  \begin{itemize}
%  \item
%    The \pkg{gWidgets} package provides a nice abstracted interface
%  \end{itemize}  
%\end{itemize}
%
%\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{Dynamic and Interactive Graphics for the Web}

\begin{itemize}
\item
There are several packages that interface to web systems 
(mostly based on \sw{javascript})
  \begin{itemize}
  \item
    The \pkg{webvis} package provides an \R{} interface to the
    \sw{protovis} system (\sw{javascript} + \sw{SVG})

%    Provides an \R{} version of \sw{protovis} code
%  \item 
%    The \pkg{gWidgetsWWW} package has a \code{gprocessingjs()}
%    function that provides an interface to the \sw{processing.js}
%    library.
%
%    Provides an \R{} graphics style interface, but new code has
%    to be written to draw a plot
  \item
    The \pkg{googleVis} package provides an interface to
    the \sw{Google Visualisation API}

%    This is effectively a way to feed data from \R{} into
%    the (limited) Google Visualisation API
  \end{itemize}

\vspace{.1in}
\includegraphics[width=2.3in]{webvis.png}
\hfill
\includegraphics[width=1.5in]{googleVis.png}
\hfill

\vspace{.1in}
  ... but they are not \R{} graphics.
\end{itemize}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{Dynamic and Interactive Graphics for the Web}

\begin{itemize}
%\item
%  \pkg{RSvgTipsDevice} package
\item
The \pkg{SVGAnnotation} package exports \R{} graphics as SVG
and provides functions for adding interactivity (with
\sw{javascript}) to the 
exported SVG ...
  \begin{itemize}
  \item
    Any \R{} graphics output can be used
  \item
    Includes animation, tooltips, and even linked plots
  \end{itemize}

... but
    adding animation and interactivity and linking plots is ``black magic''

\end{itemize}


\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{Dynamic and Interactive Graphics for the Web}

\begin{center}
\includegraphics[width=\textwidth]{layoftheland}
\end{center}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Introduction}

\begin{itemize}
\item
The \pkg{grid} package creates \emph{grobs} - objects
that contain information about what to draw - and records
them on a \emph{display list}.
\end{itemize}

\begin{minipage}{.6\textwidth}
<<>>=
library(grid)
@ 
<<echo=FALSE>>=
grid.newpage()
@ 
<<grob, fig=TRUE, include=FALSE, width=2, height=2>>=
grid.rect()
grid.circle()
@ 
<<gridls, eval=FALSE>>=
grid.ls()
@ 
<<echo=FALSE>>=
<<grob>>
<<gridls>>
@ 
\end{minipage}%
\begin{minipage}{.4\textwidth}
\begin{center}
\includegraphics[width=.8\textwidth]{gridsvg-grob}
\end{center}
\end{minipage}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Introduction}

\begin{itemize}
\item
\pkg{grid} grobs can be \emph{named}.
\end{itemize}

\begin{minipage}{.6\textwidth}
<<echo=FALSE>>=
grid.newpage()
@ 
<<grobname, eval=FALSE>>=
grid.rect(name="myrect")
grid.circle(name="mycircle")
@ 
<<gridls, eval=FALSE>>=
grid.ls()
@ 
<<echo=FALSE>>=
<<grobname>>
<<gridls>>
@ 
\end{minipage}%
\begin{minipage}{.4\textwidth}
\begin{center}
\includegraphics[width=.8\textwidth]{gridsvg-grob}
\end{center}
\end{minipage}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Introduction}

\begin{itemize}
\item
Grobs on the display list can be accessed \emph{by name}
and \emph{modified}.
\end{itemize}

\begin{minipage}{.6\textwidth}
<<edit, eval=FALSE>>=
grid.edit("mycircle", 
          r=unit(.4, "npc"),
          gp=gpar(fill="black"))
@ 
<<echo=FALSE, results=hide>>=
pdf("gridsvg-edit%d.pdf", width=2, height=2, onefile=FALSE)
<<grobname>>
<<edit>>
dev.off()
@ 
\end{minipage}%
\begin{minipage}{.4\textwidth}
\begin{center}
\includegraphics[width=.8\textwidth]{gridsvg-edit2}
\end{center}
\end{minipage}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Introduction}

\begin{itemize}
\item
The \pkg{gridSVG} package converts grobs into SVG elements.
\item
Grob names map to SVG \code{id} attributes.
\end{itemize}

<<>>=
library(gridSVG)
@ 
<<>>=
<<grobname>>
gridToSVG("grobs.svg")
@ 

\begin{boxedminipage}{\textwidth}
\begin{verbatim}
    ...
    <rect id="myrect.1" x="0" y="0" 
          width="689" height="689.40415704388" />
    ...
    <circle id="mycircle.1"
            cx="344.5" cy="344.70207852194" 
            r="344.5" />
    ...
\end{verbatim}
\end{boxedminipage}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Animation}

\begin{itemize}
\item
The \pkg{gridSVG} package provides functions to modify 
grobs in special ways.
\end{itemize}

<<echo=FALSE>>=
grid.newpage()
options(width=50)
@ 
<<>>=
<<grobname>>
grid.animate("mycircle",
             r=c(seq(.5, .1, -.1), seq(.1, .5, .1)),
             duration=2, rep=TRUE)
class(grid.get("mycircle"))
names(grid.get("mycircle"))
@ 

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Animation}

\begin{itemize}
\item
When the modified grob is exported, additional
SVG \emph{elements} are produced.
\end{itemize}

<<animate ,eval=FALSE>>=
gridToSVG("animate.svg")
@ 
<<echo=FALSE>>=
grid.newpage()
<<grobname>>
grid.animate("mycircle",
             r=c(seq(.5, .1, -.1), seq(.1, .5, .1)),
             duration=2, rep=TRUE)
<<animate>>
@ 

\begin{boxedminipage}{\textwidth}
\begin{verbatim}
<animate xlink:href="#mycircle.1" 
         attributeName="r" dur="2s" 
         values="453.6;403.2;352.8;302.4;..." 
         repeatCount="indefinite" fill="freeze" />
...
<circle id="mycircle.1" cx="252" cy="252" r="252" />
\end{verbatim}
\end{boxedminipage}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Animation}

<<echo=FALSE, results=hide>>=
png("circleanim%d.png")
for (i in c(seq(.5, .1, -.1), seq(.1, .5, .1))) {
    grid.newpage()
    grid.circle(r=i)
}
dev.off()
@ 
\begin{center}
\animategraphics[autoplay,loop,height=2in]{10}{circleanim}{1}{10} 
\end{center}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Garnishing}

\begin{itemize}
\item
The \pkg{gridSVG} package provides functions to modify 
grobs in special ways.
\end{itemize}

<<echo=FALSE>>=
grid.newpage()
@ 
<<>>=
<<grobname>>
grid.garnish("mycircle",
             onmouseover="godark()")
class(grid.get("mycircle"))
names(grid.get("mycircle"))
@ 

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Garnishing}

\begin{itemize}
\item
When the modified grob is exported, additional
SVG \emph{attributes} are produced.
\end{itemize}

<<garnish ,eval=FALSE>>=
gridToSVG("garnish.svg")
@ 
<<echo=FALSE>>=
grid.newpage()
<<grobname>>
grid.garnish("mycircle",
             onmouseover="godark()")
<<garnish>>
@ 

\begin{boxedminipage}{\textwidth}
\begin{verbatim}
<g id="mycircle" onmouseover="godark()" >
<circle id="mycircle.1" cx="252" cy="252" r="252" />
</g>
\end{verbatim}
\end{boxedminipage}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Scripting}

\begin{itemize}
\item
The \pkg{gridSVG} package provides a function that creates
a new sort of grob.
\end{itemize}

<<echo=FALSE>>=
grid.newpage()
@ 
<<>>=
<<grobname>>
grid.garnish("mycircle",
             onmouseover="godark()")
grid.script('
  godark = function() {
      circle = document.getElementById("mycircle.1");
      circle.setAttribute("style", "fill:black");
  }')
grid.ls()
@ 

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Scripting}

\begin{itemize}
\item
The javascript code can take advantage of the
\code{id} attributes that have come from the
grob names.
\end{itemize}

<<script, eval=FALSE>>=
gridToSVG("script.svg")
@ 
<<echo=FALSE>>=
grid.newpage()
<<grobname>>
grid.garnish("mycircle",
             onmouseover="godark()")
grid.script('
  godark = function() {
      circle = document.getElementById("mycircle.1");
      circle.setAttribute("style", "fill:black");
  }')
<<script>>
@ 

\begin{boxedminipage}{\textwidth}
\begin{verbatim}
<script type="text/ecmascript" id="4" >
<![CDATA[
  godark = function() {
      circle = document.getElementById("mycircle.1");
      circle.setAttribute("style", "fill:black");
  }
  ]]>
</script>
\end{verbatim}
\end{boxedminipage}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Scripting}

\hspace*{\fill}
{\includegraphics[width=.3\textwidth]{script.png}}
\hfill
{\includegraphics[width=.3\textwidth]{scriptblack.png}}
\hspace*{\fill}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Summary}

\setlength{\tabcolsep}{0mm}
\setlength{\arrayrulewidth}{.5pt}
{\scriptsize
\begin{tabular}{l c l c l}
{\bf R code} & ~~~ & {\bf R object} & ~~~ & {\bf SVG code} \\
& ~~~ & & ~~~ & \\\cline{1-1}\cline{3-3}\cline{5-5}
& ~~~ & & ~~~ & \\
\code{xyplot()} & ~~~ & grob (\code{"points"}) & ~~~ & 
\code{<path id="points" ...>} \\
& ~~~ & & ~~~ & \\\cline{1-1}\cline{3-3}\cline{5-5}
& ~~~ & & ~~~ & \\
\code{grid.animate("points")} & ~~~ & animated.grob & ~~~ & 
\code{<animate href="\#points" ...>} \\
& ~~~ & & ~~~ & \\\cline{1-1}\cline{3-3}\cline{5-5}
& ~~~ & & ~~~ & \\
\code{grid.garnish("points")} & ~~~ & svg.grob & ~~~ &
\begin{minipage}[t]{.4\textwidth}
\begin{verbatim}
<path id="points"
      onmouseover=showTip()
      ...>
\end{verbatim}
\end{minipage}\\[6mm]
& ~~~ & & ~~~ & \\\cline{1-1}\cline{3-3}\cline{5-5}
& ~~~ & & ~~~ & \\
\code{grid.script()} & ~~~ & script.grob & ~~~ &
\begin{minipage}[t]{.4\textwidth}
\begin{verbatim}
<script>
  showTip() <- function() {
    ...
  }
</script>
\end{verbatim}
\end{minipage}\\[4mm]
& ~~~ & & ~~~ & \\\cline{1-1}\cline{3-3}\cline{5-5}
\end{tabular}
}

\end{frame}



%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

% ../Examples/tooltips.R

\begin{itemize}
\item
An object browser for \pkg{grid} scenes.
\end{itemize}

{\scriptsize
\begin{verbatim}
garnishAllGrobs <- function(elt) {
  if (inherits(elt, "grob")) {
    garnishGrob(elt,
                onmousemove=paste("showTooltip(evt, '",
                  gsub("\n", " ", elt$name), "')",
                  sep=""),
                onmouseout="hideTooltip()")
  } else {
    elt
  }
}

addTooltips <- function() {
  grid.DLapply(garnishAllGrobs)
  grid.script(filename="tooltip.js")
}
 
histogram( ~ height | voice.part, data = singer, 
          xlab = "Height (inches)")
addTooltips() 
gridToSVG("tooltips.svg")
\end{verbatim}%$
}

\end{frame}



%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

\begin{center}
\fbox{\includegraphics[width=.6\textwidth]{tooltip.png}}
\end{center}

{\scriptsize
\url{http://www.stat.auckland.ac.nz/~paul/Genentech2011/tooltips.svg.html}
}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

% ../Examples/gridTree.R

\begin{itemize}
\item
A scene graph browser for \pkg{grid} scenes.
\end{itemize}


\begin{verbatim}
library(gridDebug)

library(lattice)
d <- rnorm(1000)
densityplot(~d)

gridTree(grid=TRUE)
addTooltips("gridtree.svg")
\end{verbatim}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

\begin{center}
\fbox{\includegraphics[width=.6\textwidth]{density}}
\end{center}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

\begin{center}
\fbox{\includegraphics[width=.6\textwidth]{gridtree.png}}
\end{center}

{\scriptsize
\url{http://www.stat.auckland.ac.nz/~paul/Genentech2011/gridtree.svg.html}
}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

% ../Examples/wildanim.R

\begin{itemize}
\item
Animations for teaching.
\end{itemize}

{\small
\begin{verbatim}
for (i in seq_along(sample)) {
  cg <- circleGrob(unit(x[sample[i]], "native"),
                   unit(.75, "npc"), r=unit(1, "mm"),
                   gp=gpar(col="red", fill=rgb(1, 0, 0, .2)))
  gcg <- garnishGrob(cg, visibility="hidden")
  acg <- animateGrob(gcg,
                     y=rep(c(.75, .55), c(i, Nsample - i + 1)),
                     visibility=rep(c("hidden", "visible"),
                       c(i - 1, Nsample - i + 2)),
                     duration=10)
  grid.draw(acg)
}
\end{verbatim}
}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

\begin{center}
\includegraphics[width=.8\textwidth]{wildAnim.png}
\end{center}

{\scriptsize
\url{http://www.stat.auckland.ac.nz/~paul/Genentech2011/wildanim.svg.html}
}

\end{frame}


%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

\begin{center}
\includegraphics[width=.6\textwidth]{gapminder1.png}
\end{center}

{\scriptsize
\url{http://www.stat.auckland.ac.nz/~paul/Velvet/gapminderOnePanel.svg.html}
}
\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

\begin{center}
\includegraphics[width=.9\textwidth]{gapminder2.png}
\end{center}

{\scriptsize
\url{http://www.stat.auckland.ac.nz/~paul/Velvet/gapminderMultiPanel.svg.html}
}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

% ../Examples/wildanim.R

\begin{itemize}
\item
Interactive scatterplots.
\end{itemize}

{\small
\begin{verbatim}
for (i in 1:10) {
  grid.garnish(paste("point", i, sep="."), 
               onmouseover=paste('highlight(', i, '.1)', 
                                 sep=""),
               onmouseout=paste('dim(', i, '.1)', 
                                sep=""))
  grid.garnish(paste("label", i, sep="."),
               visibility="hidden")
}
\end{verbatim}
}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

% ../Examples/wildanim.R

\begin{itemize}
\item
Interactive scatterplots.
\end{itemize}

{\small
\begin{verbatim}
highlight = function(i) {
  var point = document.getElementById("point." + i);
  var label = document.getElementById("label." + i);
  point.setAttribute("r", point.getAttribute("r")*2);
  label.setAttribute("visibility", "visible");
}

dim = function(i) {
  var point = document.getElementById("point." + i);
  var label = document.getElementById("label." + i);
  point.setAttribute("r", point.getAttribute("r")/2);
  label.setAttribute("visibility", "hidden");
}
\end{verbatim}
}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

\begin{center}
\fbox{\includegraphics[width=.6\textwidth]{huber.png}}
\end{center}

{\scriptsize
\url{http://www.stat.auckland.ac.nz/~paul/Genentech2011/huber.svg.html}
}

\end{frame}


%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Examples}

There are infinitely many other possibilities ...
\begin{itemize}
\item
Integration with HTML 5 (e.g., HTML widgets as controllers).
\item 
Post-processing via the \pkg{XML} package.
\item
\R{} on the server.
\end{itemize}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package vs \pkg{SVGAnnotation}}

\begin{center}
R graphics $\rightarrow$ SVG $\rightarrow$ SVGAnnotation $\rightarrow$ SVG
\end{center}

\begin{center}
R graphics $\rightarrow$ gridSVG $\rightarrow$ SVG
\end{center}

\begin{itemize}
\item
With \pkg{gridSVG} the mapping to SVG is determined by \pkg{gridSVG}.
\item
With \pkg{SVGAnnotation} the mapping to SVG is determined by \pkg{Cairo}.
\item
With \pkg{gridSVG}, grob names map to SVG \code{id} attributes.
\item
With \pkg{gridSVG}, can target \emph{groups} of objects (gTrees).
\end{itemize}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package vs \pkg{SVGAnnotation}}

<<results=hide>>=
svg()
grid.rect(name="myrect")
grid.circle(name="mycircle")
dev.off()
@ 

\begin{boxedminipage}{\textwidth}
{\small
\begin{verbatim}
<path style="fill: rgb(100%,100%,100%);"
  d="M 0 504 L 504 504 L 504 0 L 0 0 Z M 0 504 "/>
<path style="stroke: rgb(0%,0%,0%); 
  d="M 0 504 L 504 504 L 504 0 L 0 0 Z M 0 504 "/>
<path style="fill: rgb(100%,100%,100%);"
  d="M 504 252 
     C 504 391.175751 391.175751 504 252 504 
     C 112.824249 504 0 391.175751 0 252 
     C 0 112.824249 112.824249 0 252 0 
     C 391.175751 0 504 112.824249 504 252 "/>
<path style="stroke: rgb(0%,0%,0%);"
  d=" ... "/>
\end{verbatim}
}
\end{boxedminipage}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Downsides}

\begin{itemize}
\item
Drawing the original image \emph{and} exporting it will be slow
(because \R{} graphics and particularly \pkg{grid} graphics
are slow)
\item
The package only works with graphics drawn using \pkg{grid}
(includes \pkg{lattice} and \pkg{ggplot2}, but
excludes a LOT of other stuff)
\item
The package by-passes the core graphics engine and simply emulates
the normal behaviour;  but it does NOT emulate the
plotmath feature (yet)
\end{itemize}


\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{The \pkg{gridSVG} package: Future Directions}


\begin{itemize}
\item
The single-grob to multiple-elements problem
\begin{itemize}
\item
Animation targets multiple elements;  garnishing targets the
parent group;  ideally, they would both target both.
\end{itemize}
\item
NOTE that lattice now has sensible names.
\item
Expand the animation interface.
\item
Javascript library (possible synergy with \pkg{SVGAnnotation}).
\end{itemize}

\end{frame}



%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{Summary}

\begin{itemize}
\item
\pkg{gridSVG} is useful because ...
  \begin{itemize}
  \item
    it produces SVG for the web (like \pkg{Cairo}) \emph{and}
  \item
    it allows addition of interaction (like \pkg{SVGAnnotation}) \emph{and}
  \item
    you can see how it works, so it can be extended\\(in more ways,
    by more people).
  \end{itemize}
\end{itemize}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{References}

\begin{itemize}
\item
The packages 
\pkg{animation},
\pkg{rggobi},
\pkg{iplots},
\pkg{gWidgets},
\pkg{webvis}, 
and \pkg{gWidgetsWWW} 
can be found on \sw{CRAN}
\item
The \sw{qtinterfaces} suite of packages\\
\url{http://qtinterfaces.r-forge.r-project.org/}
\item
The \pkg{googleVis} package\\
\url{http://code.google.com/p/google-motion-charts-with-r/}
\item
The \pkg{SVGAnnotation} package\\
\url{http://www.omegahat.org/SVGAnnotation/}
\item 
The \pkg{gridSVG} package\\
\url{https://r-forge.r-project.org/projects/gridsvg/}
\end{itemize}

\end{frame}

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{Acknowledgements}

\begin{itemize}
\item
Simon Potter added many new features to \pkg{gridSVG} version 0.7 during
his BScHons project.
\end{itemize}

\begin{itemize}
\item
The teaching animation is loosely based on teaching animations produced
by Chris Wild.
\item
Two animation examples made use of data from the GapMinder Project
\url{http://www.gapminder.org/data/}
\item
The interactive plot example is loosely based on output produced by 
Audrey Kauffmann and Wolfgang Huber's \pkg{arrayQualityMetrics} 
package.
\end{itemize}

\end{frame}


%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% END DOCUMENT
\end{document}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%%%%%%
% FRAME
%%%%%%%
\begin{frame}[fragile]
\frametitle{}

\end{frame}