University of Auckland Department of Statistics Dynamic, Interactive and Reactive Statistical Graphics for the Web Author: Supervisor: Simon J. Potter Dr. Paul Murrell A thesis submitted in partial fulfilment of the requirements for the degree of Master of Science in Statistics, The University of Auckland, 2013. Abstract This thesis describes a body of work in the area of web-based statistical graphics. This is primarily concerned with the development of gridSVG, a package for the R statistical software system. The result of developing gridSVG is that flexible dynamic, interactive, reactive graphics for web pages can now be produced by R. In addition, two other packages have been developed to assist the creation of graphics with gridSVG: selectr and animaker. The motivation and development of all three packages and their intended use cases are discussed. Acknowledgements I would like to thank Dr. Paul Murrell for not only introducing me to grid graphics, but also to gridSVG. Without his prior work, none of this would have been possible. Whenever I needed guidance, he was always there to give clarity to my thoughts or an insightful path for me to pursue. His supervision throughout the duration of my thesis was fantastic and I could not have asked for anything more. I would also like to thank Prof. Chris Wild for leading me to think of the motivating idea for this thesis. His interest in my work, and the suggestions he put forward were greatly appreciated. Preface The content described in this thesis refers to web pages and images that are dynamic, interactive and animated. The nature of this printed document means that it cannot accurately reproduce some of the described content. However, technical reports have been published for most chapters and are viewable as web pages which demonstrate the full dynamic and interactive features of gridSVG images. All technical reports were published on the University of Auckland’s Department of Statistics Technical Report Blog (http://stattech.wordpress.fos.auckland.ac.nz/). These reports contain examples (and their source code) that are interactive and animated, consequently they may be of interest to readers and are listed below: • Title: Working with the gridSVG Coordinate System URL: http://stattech.wordpress.fos.auckland.ac.nz/2012-6-working-with- the-gridsvg-coordinate-system/ Notes: Relates to the content written in chapter 4. • Title: A Structured Approach for Generating SVG URL: http://stattech.wordpress.fos.auckland.ac.nz/2012-7-a-structured- approach-for-generating-svg/ Notes: Relates to the content written in chapter 3. • Title: Introducing the selectr Package URL: http://stattech.wordpress.fos.auckland.ac.nz/2012-10-introducing- the-selectr-package/ Notes: Relates to the content written in chapter 5. • Title: Generating Animation Sequence Descriptions URL: http://stattech.wordpress.fos.auckland.ac.nz/2012-11-generating- animation-sequence-descriptions/ Notes: Relates to the content written in chapter 6. In particular this relates to section 6.1. vi • Title: TimingManager: Animation Sequences in JavaScript URL: http://stattech.wordpress.fos.auckland.ac.nz/2012-13-timingmanager- animation-sequences-in-javascript/ Notes: Relates to the content written in chapter 6. In particular this relates to subsection 6.2.2. • Title: Generating Unique Names in gridSVG URL: http://stattech.wordpress.fos.auckland.ac.nz/2013-3-generating- unique-names-in-gridsvg/ Notes: Relates to the content written in chapter 2. • Title: Generating Structured and Labelled SVG URL: http://stattech.wordpress.fos.auckland.ac.nz/2013-4-generating- structured-and-labelled-svg/ Notes: Relates to the content written in chapter 2. It gives an overview on why and how it is particularly useful. • Title: Advanced SVG Graphics from R URL: http://www.stat.auckland.ac.nz/~paul/Reports/leaf/leaf.html Notes: Relates to the content written in chapter 7. Software The software developed during the course of this thesis are hosted in various locations online. These are listed below: • gridSVG The majority of the content in this thesis describes features of gridSVG that are present in version 1.2. This R package is hosted on R’s CRAN and is therefore installable in R by running the command install.packages("gridSVG"). It is developed on R-Forge, so more up-to-date versions of gridSVG may be available at http://r-forge.r-project. org/projects/gridsvg/. vii • selectr This R package is hosted on R’s CRAN and can be installed by running the command install.packages("selectr"). It is developed on GitHub at https: //github.com/sjp/selectr/, where more recent versions of the package may be available. • animaker At the time of writing, this R package is not available on CRAN. However, the code is freely available online on GitHub https://github.com/pmur002/animaker/. This does means that users will have to download, build and install the package in order to use animaker. • TimingManager This is a JavaScript library that is available at http://sjp.co.nz/projects/timing- manager/. Development occurs on GitHub at https://github.com/sjp/TimingManager/ where more recent versions of the library may be available. Conventions The following typographical conventions are used throughout this thesis: softwareName Indicates that the text is a proper noun, referring to the name of a software application or package, or a programming language. code Indicates computer code in a broad sense. This may include: SVG and HTML tags, keywords, attributes, values, variables. function() Indicates computer code that refers to a function. Contents 1 Introduction 1 1.1 What are these Graphics? . .1 1.2 Existing Software . .7 1.2.1 Server-side Software . .8 1.2.2 Client-side Software . 10 1.3 Summary . 11 2 Generating Unique Names 13 2.1 Name Translation . 13 2.2 Paths . 15 2.3 Name Sharing . 19 2.4 Sub-grobs . 20 2.5 Controlling Output . 23 2.5.1 Paths . 23 2.5.2 Custom Separators . 27 2.5.3 Unique Names . 29 2.5.4 Prefixes . 31 2.5.5 Classes . 34 2.5.6 Output Annotation . 37 2.6 Mappings . 38 2.7 Conclusion . 43 3 Structured SVG Generation 45 3.1 The Previous Approach . 45 3.2 Structured Output with the XML package . 48 3.2.1 Image Construction . 48 3.2.2 In-Memory Images . 50 x Contents 3.2.3 XPath . 50 3.2.4 Inserting Nodes . 53 3.2.5 Tree Simplification . 54 3.3 Conclusion . 54 4 The gridSVG Coordinate System 57 4.1 Introduction . 57 4.2 The gridSVG Coordinate System . 59 4.3 Browser-based Modification . 62 4.4 Modification via the XML Package . 67 4.5 Conclusion . 69 5 The selectr Package 71 5.1 Introduction . 71 5.2 Parsing ..................................... 72 5.3 Translating . 73 5.4 Usage . 76 5.5 Examples . 79 5.5.1 A Complex Example . 81 5.6 Conclusion . 83 6 Animation Sequencing 85 6.1 Describing Animation Sequences . 85 6.1.1 Introduction . 85 6.1.2 Atomic animations . 86 6.1.3 Container animations . 88 6.1.4 Controlling the start and duration of containers . 90 6.1.5 Controlling the start and duration of container content . 90 6.1.6 Operations on containers . 95 6.1.7 Timing schemes . 98 6.1.8 Drawing animation diagrams . 103 6.1.9 Examples . 103 6.1.10 Conclusion . 110 6.2 Applying Animation Sequences in JavaScript ................. 111 6.2.1 Exporting an Animation Sequence . 112 6.2.2 Using Timing Information in the Browser . 114 6.2.3 Complex Examples . 119 Contents xi 6.2.4 Conclusion . 124 7 Advanced SVG Features 127 7.1 Patterns . 127 7.2 Gradients . 135 7.2.1 Linear Gradients . 135 7.2.2 Radial Gradients . 142 7.3 Clipping Paths and Masks . 148 7.3.1 Clipping Paths . 148 7.3.2 Masks . 154 7.3.3 Contexts . 160 7.4 Filter Effects . 164 7.5 Definition and Registration . 167 7.5.1 Inspecting Registered Definitions . 170 7.6 Element Grobs . 173 7.7 Conclusion . 176 8 Examples 177 8.1 LOESS Smoothing . 177 8.2 Interactive ARIMA Model Diagnostics . 181 8.3 Sampling Variation Teaching Visualisation . 183 9 Discussion 193 9.1 Improvements . 193 9.1.1 Naming . 193 9.1.2 Coordinate Systems . 194 9.1.3 Node-based SVG . 194 9.1.4 Content Selection . 195 9.1.5 Animation Sequencing . 195 9.1.6 Advanced SVG Content . 196 9.2 Complexity . 197 9.3 Limitations . 197 9.4 Future Directions . 199 9.5 Conclusion . 200 Bibliography 201 List of Figures 1.1 An R image being included within an HTML document. .1 1.2 Multiple static images generated by the animation package are included in an HTML document. The images are stitched together to create an animation. .2 1.3 Multiple static images can be included within an HTML document with custom JavaScript used to provide interactivity and/or animation. .3 1.4 A plot generated by packages that can embed animation in an SVG image. The image is included within an HTML document, with interactivity provided by JavaScript..............................4 1.5 A change in the state of a web page allows new static images to be requested from R.