Interactive charts and slides with R, googleVis and knitr

Markus Gesmann, Cambridge R user group meeting, 29 May 2012

Agenda

Motivation

Google Chart Tools

Introduction to googleVis

Key ideas of googleVis

cat(toJSON(CityPopularity))  ## example data from googleVis
## {
##  "City": [ "New York", "Boston", "Miami", "Chicago", "Los Angeles", "Houston" ],
## "Popularity": [    200,    300,    400,    500,    600,    700 ] 
## }

googleVis version 0.2.16 provides interfaces to

Run demo(googleVis) to see examples of all charts and read the vignette for more details.

World Bank example

library(googleVis)
demo(WorldBank)

Video tutorial

The googleVis concept

M <- gvisMotionChart(data, idvar = "id", timevar = "date", options = list(), 
    chartid)

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

print(M, "chart")  ## or cat(M$html$chart)

into your existing html page, or write the content directly into a file

print(M, "chart", file = "myfilename")

and process it from there.

Simple line chart

df <- data.frame(label = c("A", "B", "C"), val1 = c(0.1, 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

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

## 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

print(gvisGeoMap(x, "Country", "Ranking", "Rating", options = list(gvis.editor = "S&P", 
    colors = "[0x91BFDB, 0XFC8D59]")), "chart")

Geo chart with markers

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

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

Other R packages

How I created this presentation with RStudio, knitr, pandoc and slidy

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

Conclusion

Thanks to ...

Contact