googleVis at RSS 2012

googleVis_at_RSS_2012.Rmd

Creating interactive web graphs with R: Overview and googleVis tutorial
========================================
```{r results='asis', echo=FALSE, message=FALSE, tidy=FALSE}
library(googleVis)
df <- data.frame(Postcode=c("TF3 4JH", "EC1Y 8LX"),
                 Tip=c("Telford", "RSS"))

## Tree map
T <- gvisTreeMap(Regions,  "Region", "Parent", "Val", "Fac",
                    options=list(width=250, height=150,
                                 fontSize=16,
                                 minColor='#EDF8FB',
                                 midColor='#66C2A4',
                                 maxColor='#006D2C',
                                 headerHeight=20,
                                 fontColor='black',
                                 showScale=TRUE), chartid="c3")

B <- gvisBarChart(Exports[,1:2], yvar="Profit", xvar="Country",                  
                  options=list(width=250, height=260, 
                               legend='none'), chartid="c2")

M <- gvisMap(df, "Postcode", "Tip",
              options=list(showTip=TRUE, mapType='normal',
              enableScrollWheel=TRUE,
              width=250, height=380), chartid="c1")

BT <- gvisMerge(T,B, horizontal=FALSE, chartid="gt") 
BMT <- gvisMerge(M, BT, horizontal=TRUE,
                     tableOptions="cellspacing=5", 
                 chartid="gtm")


print(BMT, 'chart')
```
[Markus Gesmann](https://plus.google.com/118201313972528070577/posts), [RSS Conference 2012](http://www.rssconference.org.uk) , 5 September 2012

# Hello - About me 
<ul> 
<li>Name: [Markus Gesmann](https://plus.google.com/118201313972528070577/posts)</li>
<li> Profession: Mathematician, working as an analyst for a big [insurance market](http://www.lloyds.com)</li>
<li>Maintainer and co-author of two R packages:</li>
<ul>
<li>[ChainLadder](http://code.google.com/p/chainladder/): Statistical methods for the calculation of outstanding claims reserves in general insurance</li>
<li> [googleVis](http://code.google.com/p/google-motion-charts-with-r/): Interface between R and the Google Visualisation API</li>
</ul>
<li> Blog: [mages' blog](http://lamges.blogspot.com)</li>
</ul>
<a href="http://lamages.blogspot.com">
<img src="http://2.bp.blogspot.com/-NAMnviVPFnw/Tw_OJRa7kII/AAAAAAAAAIo/ERYyvM2dV84/s1600/photo-1.JPG"></a>

# Agenda
<ul>
<li> Introduction and motivation </li>
<li> Google Chart Tools </li>
<li> R package googleVis </li>
<ul>
  <li> Concepts of googleVis </li> 
  <li> Case studies </li>
</ul>
<li> How I created this interactive web presentation  </li>
</ul>

# The perception of data is changing 
<ul>
<li> More and more data is becoming available.</li>
<li> New tools are required to bring data to life,</li> 
  <ul>
  <li> to engage with users,</li> 
  <li> to enable them to slice and dice the data,</li> 
  <li> to view it from various angles and</li> 
  <li> to find stories worth telling:</li> 
    <ul>
    <li> outliers,</li> 
    <li> trends or</li>
    <li> even the obvious.</li>
</ul>
</ul>
</ul>


# The way we are consuming news and data is changing
<ul>
<li> News are read more and more on-line</li>
<li> On-line tools can be interactive</li>
<li> Tablets foster interactive story telling</li>
<li>Examples</li>
<ul>
<li> [Guardian Data Blog](http://www.guardian.co.uk/news/datablog)</li>
<li> [Flowing Data](http://flowingdata.com)
<li> [R-bloggers](http://www.r-bloggers.com)</li>
</ul>
</ul>


# No more boring data    
<iframe width="420" height="315" src="http://www.youtube.com/embed/hVimVzgtD6w" frameborder="0" allowfullscreen></iframe>
<ul>
<li> In 2006 Hans Rosling gave an inspiring talk at TED </li>
<li> He challenged the views and perceptions of many listeners</li>
<li> To visualise his talk he used animated bubble charts, aka motion charts</li>
</ul>

# Interactive charts have made data 'sexy'
<ul>
<li>Over the years many tools have been developed</li>
<ul>
 <li> [Data Driven Documents (d3js)](http://d3js.org)</li>
 <li> [Open Flash Charts](http://teethgrinder.co.uk/open-flash-chart/)</li>
 <li> [Flare](http://flare.prefuse.org)</li>
 <li> [Processing](http://processing.org)</li>
 <li> [OpenLayers](http://www.openlayers.org)</li>
 <li> [IBM Many Eyes](http://www-958.ibm.com/software/data/cognos/manyeyes/)</li>
 <li> [Tableau](http://www.tableausoftware.com)</li>
 <li> [QlikView](http://www.qlikview.com)</li>
 <li> [Google Chart Tools](https://developers.google.com/chart/) - Focus of this talk</li>
</ul>
</ul>

# Motivation for googleVis
<ul>
<li> Inspired by Hans Rosling's talks we wanted to use interactive data visualisation tools to foster the dialogue between data analysts and others</li>
<li> We wanted moving bubbles charts as well
</li>
<li>The software behind Hans' talk was bought by Google and integrated as motion charts into their [Visualisation API](https://developers.google.com/chart/interactive/docs/gallery)</li>
<li>Ideally we wanted to use [R](http://www.r-project.org), a language we knew</li>
<li>Hence, we had to create an interface between the Google Chart Tools and R</li>
</ul>


# Introduction to Google Chart Tools
<ul>
<li> Google Chart Tools provide a way to visualize data on web sites</li>
<li> The API makes it easy to create interactive charts </li>
<li> It uses JavaScript and DataTable / JSON as input</li>
<li> Output is either HTML5/SVG or Flash</li>
<li> Browser with internet connection required to display chart</li>
<li> Please read the Google [Terms of Service](https://developers.google.com/terms/) before you start</li>
</ul>

# Motion chart example - Rendered output
```{r results='asis', echo=FALSE}
library(googleVis)
M <- gvisMotionChart(Fruits[,-7], "Fruit", "Year",
                     options=list(width=600, height=450))
print(M, 'chart')
```


# Motion chart example - Code
<script src="https://gist.github.com/3595663.js?file=motionchart.html"></script>


# Structure of Google Charts
The chart code has five generic parts:
<ol>
<li> References to Google’s AJAX (l. 4) and Visualisation API (ll. 7 – 8),</li>
<li> Data to visualise as a DataTable (ll. 11 – 24),</li>
<li> Instance call to create the chart (ll. 25 – 26),</li>
<li> Method call to draw the chart including options, shown here as width and height (l. 27),</li>
<li> HTML &lt;div&gt; element to add the chart to the page (ll. 32 – 34).</li>
</ol>

# How hard can it be?
<ol>
<li> Transform data into JSON object
<li> Wrap some HTML and JavaScript around it
</ol>
Thus, googleVis started life in August 2010

# What is googleVis?
<ul>
<li> [googleVis](http://code.google.com/p/google-motion-charts-with-r/) is a package for [R](http://www.r-poject.org/) and provides an interface between R and the [Google Chart Tools](https://developers.google.com/chart/)</li>
<li> The functions of the package allow users to visualise data with the Google Chart Tools without uploading their data to Google</li>
<li> The output of googleVis functions is html code that contains the data and references to JavaScript functions hosted by Google</li>
<li> To view the output a browser with an internet connection is required, the actual chart is rendered in the browser; some charts require Flash</li>
<li>See also: *Using the Google Visualisation API with R*, 
  [The R Journal, 3(2):40-44, December 2011](http://journal.r-project.org/archive/2011-2/RJournal_2011-2_Gesmann+de~Castillo.pdf)</li>
</ul>

# Video tutorial

<iframe width="420" height="315" src="http://www.youtube.com/embed/Z6NYQdiwTrU" frameborder="0" allowfullscreen></iframe>

<ul>
<li> Video tutorial by [Martin Hilpert](http://omnibus.uni-freiburg.de/~mh608/), [Freiburg Institute for Advanced Studies](http://www.frias.uni-freiburg.de/)</li>
<li> Demonstrates how to create motion charts with googleVis</li>
</ul>


# googleVis version 0.2.17 provides interfaces to 
<ul>
<li>Flash based</li>
<ul>
<li> Motion Charts</li>
<li> Annotated Time Lines</li>
<li> Geo Maps</li>
</ul>
<li>HMTL5/SVG based</li>
<ul>
<li> Maps, Geo Charts and Intensity Maps</li>
<li> Tables, Gauges, Tree Maps</li>
<li> Line-, Bar-, Column-, Area- and Combo Charts</li>
<li> Scatter-, Bubble-, Candlestick-, Pie- and Org Charts</li>
</ul>
</ul>
Run ```demo(googleVis)``` to see [examples](http://code.google.com/p/google-motion-charts-with-r/wiki/GadgetExamples) of all charts and read the [vignette](http://cran.r-project.org/web/packages/googleVis/vignettes/googleVis.pdf) for more details.

# [World Bank data demo](http://lamages.blogspot.co.uk/2011/09/accessing-and-plotting-world-bank-data.html)
<iframe height="550px" frameborder="no" scrolling="no"
src="http://dl.dropbox.com/u/7586336/blogger/WorldBankMotionChart.html"
width="100%">
</iframe>
```{r eval=FALSE, echo=TRUE}
library(googleVis)
demo(WorldBank) 
```


# Key ideas of googleVis
<ul>
<li>Create wrapper functions in R which generate html files with references to Google's Chart Tools API</li>
<li> Transform R data frames into [JSON](http://www.json.org/) objects with [RJSONIO](http://www.omegahat.org/RJSONIO/)</li>
```{r}
(dat <- data.frame(x=LETTERS[1:2], y=1:2))
cat(toJSON(dat)) 
```
<li> Display the HTML output with the R HTTP help server</li>
</ul>



# The googleVis concept
<ul>
<li> Charts: *'gvis' + ChartType*</li>
<li> For a motion chart we have</li>
```{r eval=FALSE, tidy=FALSE}
M <- gvisMotionChart(data, idvar='id', timevar='date', 
                     options=list(), chartid)
```
<li> Output of googleVis is a list of list</li>
<li> Display the chart by simply plotting the output: ```plot(M)```</li>
<ul>
  <li> Plot will generate a temporary html-file and open it in a new browser window </li>
<li> Specific parts can be extracted, e.g. the chart: ```M$html$chart``` or data: ```M$html$chart["jsData"]```</li>
</ul>
</ul>


# Simple line chart
```{r results='asis', tidy=FALSE}
df <- data.frame(label=c("A", "B", "C"), 
                 val1=c(1,3,4), 
                 val2=c(23,12,32))
lc <- gvisLineChart(df, chartid="line")
```
```{r eval=FALSE}
plot(lc)
```
<iframe width=620 height=300 frameborder="0" src="http://dl.dropbox.com/u/7586336/RSS2012/line.html">You browser does not support iframe</iframe>

# gvis-Chart structure
<table>
<tr><td>
List structure
<img height=350 src="https://dl.dropbox.com/u/7586336/googleVisExamples/gvisObject.png" ></td><td>
```{r}
names(lc)
lc$type
lc$chartid
names(lc$html)
```
</td></tr>
</table>


# gvis-Chart header

```{r}
cat(lc$html$header) ## same as print(lc, 'header')
```


# gvis-Chart chart

```{r}
names(lc$html$chart)
```
<ul>
<li>This is the actual raw chart which can be copied and pasted into existing web pages. </li>
<li>The chart is made up of several sub components</li>
</ul>


# gvis-Chart 

```{r}
print(lc, 'jsHeader')
```

# gvis-Chart 

```{r}
print(lc, 'jsData')
```

# gvis-Chart 

```{r}
print(lc, 'jsDrawChart')
```

# gvis-Chart 

```{r}
print(lc, 'jsDisplayChart')
```

# gvis-Chart 

```{r}
print(lc, 'jsChart')
```

# gvis-Chart 

```{r}
print(lc, 'jsFooter')
```

# gvis-Chart 

```{r}
print(lc, 'divChart')
```

# gvis-Chart 

```{r}
print(lc, 'caption')
```

# gvis-Chart 

```{r}
print(lc, 'footer') 
```


# Line chart with options set
```{r results='asis', tidy=FALSE}
print(gvisLineChart(df, xvar="label", yvar=c("val1","val2"),
        options=list(title="Hello World", legend="bottom",
                titleTextStyle="{color:'red', fontSize:18}",                         
                vAxis="{gridlines:{color:'red', count:3}}",
                hAxis="{title:'My Label', titleTextStyle:{color:'blue'}}",
                series="[{color:'green', targetAxisIndex: 0}, 
                         {color: 'blue',targetAxisIndex:1}]",
                vAxes="[{title:'Value 1 (%)', format:'#,###%'}, 
                                  {title:'Value 2 (\U00A3)'}]",                          
                curveType="function", width=500, height=300                         
                )), 'chart')
```

# On-line changes
You can enable the chart editor which allows users to change the chart.
```{r results='asis', tidy=FALSE}
print(gvisLineChart(df, 
      options=list(gvis.editor="Edit me!")),
      'chart')
```

# Change motion chart settings
```{r results='asis'}
print(gvisMotionChart(Fruits, "Fruit", "Year"), 'chart')
```
Can change displaying settings via the browser.
The state string from the 'Advanced' tab can be used to set those
settings via R. 

# Motion chart with initial settings changed

```{r results='asis', tidy=FALSE}
myStateSettings <- '
{"xZoomedDataMin":1199145600000,"colorOption":"2",
 "xZoomedDataMax":1262304000000,"iconType":"LINE",
 "dimensions":{"iconDimensions":["dim0"]},
 "xAxisOption":"_TIME","orderedByX":false,"playDuration":15000,
 "xZoomedIn":false,"time":"2010","yZoomedDataMin":0,
 "yZoomedIn":false,"orderedByY":false,"yZoomedDataMax":100}
'
print(gvisMotionChart(Fruits, "Fruit", "Year", 
      options=list(state=myStateSettings, height=300)), 'chart')
```


# Displaying geographical information
Plot countries' S&P credit rating sourced from Wikipedia
```{r tidy=FALSE}
## Get and prepare data
library(XML)
url <- "http://en.wikipedia.org/wiki/List_of_countries_by_credit_rating"
page <- readLines(url)
x <- readHTMLTable(page, which=3)
levels(x$Rating) <- substring(levels(x$Rating), 4, 
                            nchar(levels(x$Rating)))
x$Ranking <- x$Rating
levels(x$Ranking) <- nlevels(x$Rating):1
x$Ranking <- as.character(x$Ranking)
x$Rating <- paste(x$Country, x$Rating, sep=": ")

## Create a geo map
G <- gvisGeoMap(x, "Country", "Ranking", "Rating",
                options=list(gvis.editor="S&P", 
                             colors="[0x91BFDB, 0XFC8D59]", 
                             gvis.editor="Edit me"))
```

# Chart countries' S&P credit rating
```{r results='asis'}
print(G, 'chart')
```

# Geo chart with markers
Display earth quake information of last 30 days
```{r results='asis', tidy=FALSE}
library(XML)
eq <- readHTMLTable(readLines("http://www.iris.edu/seismon/last30.html"),
 colClasses=c("factor", rep("numeric", 4), "factor"), which=2)
eq$loc=paste(eq$LAT, eq$LON, sep=":")
G <- gvisGeoChart(eq, "loc", "DEPTH km", "MAG",
                   options=list(displayMode="Markers", 
                   colorAxis="{colors:['purple', 'red', 'orange', 'grey']}",
                   backgroundColor="lightblue"), chartid="EQ")
print(G, 'chart')
```

# Org chart
```{r results='asis', tidy=FALSE}
Org <- gvisOrgChart(Regions, options=list(width=600, height=250,
                               size='large', allowCollapse=TRUE))
print(Org, 'chart')
```

# Org chart data
```{r}
Regions
```
Notice the data structure. Each row in the data table describes one node. Each node (except the root node) has one or more parent nodes. 

# Tree map
Same data structure as for org charts required.
```{r results='asis', tidy=FALSE}
Tree <- gvisTreeMap(Regions,  idvar="Region", parentvar="Parent",
                    sizevar="Val", colorvar="Fac",
                    options=list(width=500, height=350))
print(Tree, 'chart')
```

# Annotated time line data
```{r}
Stock
```

# Annotated time line
```{r results='asis', tidy=FALSE}
A1 <- gvisAnnotatedTimeLine(Stock, datevar="Date",
                           numvar="Value", idvar="Device",
                           titlevar="Title", annotationvar="Annotation",
                           options=list(displayAnnotations=TRUE,
                            legendPosition='newRow',
                            width=600, height=350)
                           )
print(A1, 'chart')
```


# Merging gvis-objects

```{r results='asis', tidy=FALSE}
G <- gvisGeoChart(Exports, "Country", "Profit", 
                  options=list(width=250, height=120))
B <- gvisBarChart(Exports[,1:2], yvar="Profit", xvar="Country",                  
                  options=list(width=250, height=260, legend='none'))
M <- gvisMotionChart(Fruits, "Fruit", "Year",
                     options=list(width=400, height=380))
GBM <- gvisMerge(gvisMerge(G,B, horizontal=FALSE), 
                 M, horizontal=TRUE, tableOptions="cellspacing=5")
print(GBM, 'chart')
```

# Embedding googleVis chart into your web page

Suppose you have an existing web page and would like to integrate the output of a googleVis function, such as ```gvisMotionChart```.

In this case you only need the chart output from ```gvisMotionChart```. So you can either copy and paste the output from the R console

```{r eval=FALSE}
 print(M, 'chart') ## or cat(M$html$chart)
```
into your existing html page, or write the content directly into a file

```{r eval=FALSE}
print(M, 'chart', file='myfilename')
```
and process it from there.

# Embedding googleVis output via iframe
<ul>
<li>Embedding googleVis charts is often easiest done via the iframe tag:</li>
</ul>
<ol>
<li>Host the googleVis output on-line, e.g. public Dropbox folder</li>
<li>Use the iframe tag on your page:</li>
</ol>
<script src="https://gist.github.com/3597982.js?file=iframetag.html"></script>
<iframe width=620 height=300 frameborder="0" src="http://dl.dropbox.com/u/7586336/RSS2012/line.html">You browser does not support iframe</iframe>


# Building applications with googleVis and Rook
<ul>
<li>Rook is a web server interface for R</li>
<li>Rook doesn't need any configuration</li>
<li>It is an R package, which works out of the box with the R HTTP server</li>
<li>You can run web applications on our local desktop.</li> 
</ul>


# googleVis with Rook
<script src="https://gist.github.com/3197021.js?file=Rook_with_googleVis.R"></script>


# googleVis with Rook
<img width=500 src="http://4.bp.blogspot.com/-EKYP8nJm4ms/UBVzpl3q55I/AAAAAAAAAZw/tVyyVZk915g/s1600/Rook.png">

For more details see my [blog post.](http://lamages.blogspot.co.uk/2012/08/rook-rocks-example-with-googlevis.html)


# Further case studies
<ul>
<li> [Statistics Relating to Lloyd's](http://www.lloyds.com/The-Market/Tools-and-Resources/Resources/Statistics-Relating-to-Lloyds/Visualisation)</li>
<li> [Analysis of the US domestic airline market from 1999 - 2010](http://www.cambridge.aero/_blog/main/post/US_Domestic_Airline_Market_In_Motion_1990-2010/)</li>
<li> [Linguistic analysis of the English language](http://omnibus.uni-freiburg.de/~mh608/motion.html)</li>
<li> [Exploring the Pen World Data](http://usefulr.wordpress.com/2012/04/17/quickly-explore-the-penn-world-tables-in-r/)</li>
<li> [My blog posts on googleVis](http://lamages.blogspot.co.uk/search/label/googleVis)</li>
</ul>

# Other R packages
<ul>
<li> [R animation package allows to create SWF, GIF and MPEG directly](http://animation.yihui.name/)</li>
<li> [iplots: iPlots - interactive graphics for R](http://cran.r-project.org/web/packages/iplots/)</li>
<li> [Acinonyx aka iPlots eXtreme](http://rforge.net/Acinonyx/index.html)</li>
<li> [gridSVG: Export grid graphics as SVG](http://cran.r-project.org/web/packages/gridSVG/index.html)</li>
<li> [plotGoogleMaps: Plot HTML output with Google Maps API and your own data](http://cran.r-project.org/web/packages/plotGoogleMaps/)</li>
<li> [RgoogleMaps: Overlays on Google map tiles in R](http://cran.r-project.org/web/packages/RgoogleMaps/index.html)</li>
</ul>

# How I created this presentation with RStudio, knitr, pandoc and slidy  
<ul>
<li> [knitr](http://yihui.name/knitr/) is a package by [Yihui Xie](http://yihui.name/) that brings literate programming to a new level </li>
  <ul>
  <li>It allows to create content really quickly, without worrying to much about layout and R formatting</li>
</ul>
<li> [RStudio](http://rstudio.org) integrated knitr into its IDE, which allows to knit Rmd-files by the push of a button into markdown</li>
<li> Markdown output can be converted into several other file formats, such as html, with [pandoc](http://johnmacfarlane.net/pandoc/)</li>
<li> [slidy](http://www.w3.org/Talks/Tools/Slidy2/Overview.html) is one of the options to create interactive html-slides with pandoc</li>
<li> For more details see my recent [blog post](http://lamages.blogspot.co.uk/2012/05/interactive-reports-in-r-with-knitr-and.html) and [example file](https://gist.github.com/2704646).</li>
<li> The source file of this presentation is available on [github](https://gist.github.com/3601486)</li>
</ul>
<code><pre>
Rscript -e "library(knitr); knit('googleVis_at_RSS_2012.Rmd')"
pandoc -s -S -i -t slidy --mathjax googleVis_at_RSS_2012.md 
  -o googleVis_at_RSS_2012.html
</pre></code>


# Conclusions
<ul>
<li> Interactive charts and reports open a new way to engage with readers and users, who would find data and figures boring otherwise</li>
<li> RStudio, *knitr*, slidy and googleVis might be the way forward to create interactive analysis reports and presentations</li>
<li> The markdown language should be sufficient for most tasks to draft a report, and the integration with RStudio makes it a pleasure to work with *knitr*.</li>
<li>Rook makes prototyping interactive on-line applications easy</li>
</ul>

# Contact
<ul>
<li> googleVis: [http://code.google.com/p/google-motion-charts-with-r/](http://code.google.com/p/google-motion-charts-with-r/)</li>
<li> My blog: [http://lamages.blogspot.co.uk/](http://lamages.blogspot.co.uk/)</li>
<li> Email: markus dot gesmann at gmail dot com</li>
</ul>


# Thanks
<ul>
<li> Andy Lynch for inviting me today</li>
<li> Google for making the Chart Tools available </li>
<li> My co-author Diego de Castillo</li>
<li> [All who have provided ideas, feedback, bug reports, suggestions, etc.](http://google-motion-charts-with-r.googlecode.com/svn/trunk/THANKS)</li>
<li> [Yihui Xie](http://yihui.name/) for [knitr](http://yihui.name/knitr/)</li>
<li> JJ, Joe and Josh for [RStudio](http://rstudio.org/)</li>
<li> [Dave Raggett](http://www.w3.org/People/Raggett/) for [Slidy](http://www.w3.org/Talks/Tools/Slidy2)</li>
</ul>

# Questions?