Cambridge R user meeting, May 2012

  • Download Gist
Cambridge_R_googleVis_with_knitr_and_RStudio_May_2012.Rmd
RMarkdown
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253
Interactive charts and slides with R, googleVis and knitr
========================================
```{r results='asis', echo=FALSE, message=FALSE, tidy=FALSE}
library(googleVis)
G <- gvisGeoChart(Exports, "Country", "Profit",
options=list(width=250, height=120), chartid="c1")
 
T <- gvisBarChart(Exports[,1:2], yvar="Profit", xvar="Country",
options=list(width=250, height=260,
legend='none'), chartid="c2")
 
GT <- gvisMerge(G,T, horizontal=FALSE, chartid="gt")
 
## Tree map
 
M <- gvisTreeMap(Regions, "Region", "Parent", "Val", "Fac",
options=list(width=400, height=380,
fontSize=16,
minColor='#EDF8FB',
midColor='#66C2A4',
maxColor='#006D2C',
headerHeight=20,
fontColor='black',
showScale=TRUE), chartid="c3")
 
GTM <- gvisMerge(GT, M, horizontal=TRUE,
tableOptions="cellspacing=5", chartid="gtm")
 
print(GTM, 'chart')
```
[Markus Gesmann](https://plus.google.com/118201313972528070577/posts), [Cambridge R user group](http://www.cambr.org.uk/) meeting, 29 May 2012
 
# Agenda
* Motivation
* Introduction to googleVis
* Examples with googleVis
* How I created this talk with RStudio, knitr, pandoc and slidy
 
# Motivation
<iframe width="420" height="315" src="http://www.youtube.com/embed/hVimVzgtD6w" frameborder="0" allowfullscreen></iframe>
 
* In 2006 Hans Rosling gave an inspiring talk at TED
* He challenged the views and perceptions of many listeners
* To visualise his talk he used animated bubble charts, aka motion charts
 
# Google Chart Tools
 
* Google integrated the motion charts into their [Visualisation API](https://developers.google.com/chart/) in 2007
* Google Visulisation API makes it easy to create interactive charts for web pages
* It uses JavaScript and DataTable / JSON as input
* Output is either HTML5/SVG or Flash
* Browser with internet connection required to display chart
* Please read the Google [Terms of Service](https://developers.google.com/terms/) before you start
 
# Introduction to googleVis
* [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/), see *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.pd)
* The functions of the package allow users to visualise data with the Google Chart Tools without uploading their data to Google
* The output of googleVis functions is html code that contains the data and references to JavaScript functions hosted by Google
* To view the output a browser with an internet connection is required, the actual chart is rendered in the browser; some charts require Flash
 
# Key ideas of googleVis
* Create wrapper function in R which generate html files with references to Google's Chart Tools API
* Transform R data frames into [JSON](http://www.json.org/) objects with [RJSONIO](http://www.omegahat.org/RJSONIO/)
```{r}
cat(toJSON(CityPopularity)) ## example data from googleVis
```
 
* Display the HTML output with the R HTTP help server
* Development started in August 2010, intially to visualise data at [Lloyd's](http://www.lloyds.com/The-Market/Tools-and-Resources/Resources/Statistics-Relating-to-Lloyds/Visualisation)
 
# googleVis version 0.2.16 provides interfaces to
 
* Motion Charts
* Annotated Time Lines
* Maps, Geo Maps and Charts
* Intensity Maps
* Tables, Gauges, Tree Maps
* Line-, Bar-, Column-, Area- and Combo Charts
* Scatter-, Bubble-, Candlestick-, Pie- and Org Charts
 
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 example](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}
library(googleVis)
demo(WorldBank)
```
 
 
# Video tutorial
 
<iframe width="420" height="315" src="http://www.youtube.com/embed/Z6NYQdiwTrU" frameborder="0" allowfullscreen></iframe>
 
* Video tutorial by [Martin Hilpert](http://omnibus.uni-freiburg.de/~mh608/), [Freiburg Institute for Advanced Studies](http://www.frias.uni-freiburg.de/)
* Demonstrates how to create motion charts with googleVis
 
 
# The googleVis concept
 
* Charts: *'gvis' + ChartType*
* For a motion chart we have
```{r eval=FALSE}
M <- gvisMotionChart(data, idvar='id', timevar='date', options=list(), chartid)
```
* Output of googleVis is a list of list
* Display the chart by simply plotting the output ```plot(M)```
* Plot will generate a temporay html-file and open it in a new browser window
* Specific parts can be extracted, e.g. the chart ```M$html$chart``` or data ```M$html$chart["jsData"]```
 
# 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.
 
 
# Simple line chart
```{r results='asis'}
df <- data.frame(label=c("A", "B", "C"), val1=c(0.10,0.13,0.14), val2=c(23,12,32))
lc <- gvisLineChart(df)
print(lc, 'chart') ## So knitr includes the html output of the chart
```
 
 
# Line chart with options set
```{r results='asis'}
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')
```
 
# Chart countries' S&P credit rating
* Plot countries' S&P credit rating sourced from Wikipedia
* See my [blog post](http://lamages.blogspot.co.uk/2012/01/credit-rating-by-country.html) for more details
```{r}
## 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=": ")
```
 
# Chart countries' S&P credit rating
```{r results='asis'}
print(gvisGeoMap(x, "Country", "Ranking", "Rating",
options=list(gvis.editor="S&P",
colors="[0x91BFDB, 0XFC8D59]")), 'chart')
```
 
# Geo chart with markers
```{r results='asis'}
require(stats)
data(quakes); quakes$latlong<-paste(quakes$lat, quakes$long, sep=":")
print(gvisGeoChart(quakes, locationvar="latlong", colorvar="depth", sizevar="mag",
options=list(displayMode="Markers", region="009",
colorAxis="{colors:['red', 'grey']}",
backgroundColor="lightblue")), 'chart')
```
 
# Merging gvis-objects
 
```{r results='asis'}
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')
```
 
 
# Further case studies
 
* [Statistics Relating to Lloyd's](http://www.lloyds.com/The-Market/Tools-and-Resources/Resources/Statistics-Relating-to-Lloyds/Visualisation)
* [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/)
* [Linguistic analysis of the English language](http://omnibus.uni-freiburg.de/~mh608/motion.html)
* [Exploring the Pen World Data](http://usefulr.wordpress.com/2012/04/17/quickly-explore-the-penn-world-tables-in-r/)
* [My blog posts on googleVis](http://lamages.blogspot.co.uk/search/label/googleVis)
 
# Other R packages
 
* [R animation package allows to create SWF, GIF and MPEG directly](http://animation.yihui.name/)
* [iplots: iPlots - interactive graphics for R](http://cran.r-project.org/web/packages/iplots/)
* [Acinonyx aka iPlots eXtreme](http://rforge.net/Acinonyx/index.html)
* [gridSVG: Export grid graphics as SVG](http://cran.r-project.org/web/packages/gridSVG/index.html)
* [plotGoogleMaps: Plot HTML output with Google Maps API and your own data](http://cran.r-project.org/web/packages/plotGoogleMaps/)
* [RgoogleMaps: Overlays on Google map tiles in R](http://cran.r-project.org/web/packages/RgoogleMaps/index.html)
 
# How I created this presentation with RStudio, knitr, pandoc and slidy
* [knitr](http://yihui.name/knitr/) is a package by [Yihui Xie](http://yihui.name/) that brings literate programming to a new level
* It allows to create content really quickly, without worrying to much about layout and R formatting
* [RStudio](http://rstudio.org) integrated knitr into its IDE, which allows to knit Rmd-files by the push of a button into markdown
* Markdown output can be converted into serveral other file formats, such as html, with [pandoc](http://johnmacfarlane.net/pandoc/)
* [slidy](http://www.w3.org/Talks/Tools/Slidy2/Overview.html) is one of the options to create interactive html-slides with pandoc
 
```
pandoc -s -S -i -t slidy --mathjax
Cambridge_R_googleVis_with_knitr_and_RStudio_May_2012.md
-o Cambridge_R_googleVis_with_knitr_and_RStudio_May_2012.html
```
 
* 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)
* The source file of this presentation is available on [github](https://gist.github.com/2816027)
 
# Conclusion
 
* Interactive charts and reports open a new way to engage with readers and users, who would find data and figures boring otherwise
* RStudio, *knitr* and googleVis might be the way forward to create interactive analysis reports and presentations
* 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*.
 
# Thanks to ...
 
* Google for making the Chart Tools available
* My co-author Diego de Castillo
* [All who have provided ideas, feedback, bug reports, suggestions, etc.](http://google-motion-charts-with-r.googlecode.com/svn/trunk/THANKS)
* [Yihui Xie](http://yihui.name/) for [knitr](http://yihui.name/knitr/)
* JJ, Joe and Josh for [RStudio](http://rstudio.org/)
* [Dave Raggett](http://www.w3.org/People/Raggett/) for [Slidy](http://www.w3.org/Talks/Tools/Slidy2)
 
# Contact
* googleVis: [http://code.google.com/p/google-motion-charts-with-r/](http://code.google.com/p/google-motion-charts-with-r/)
* My blog: [http://lamages.blogspot.co.uk/](http://lamages.blogspot.co.uk/)
* Email: markus dot gesmann at gmail dot com

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.