Create a gist now

Instantly share code, notes, and snippets.

googleVis at RSS 2012
<title></title> <style type="text/css"> table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode { margin: 0; padding: 0; vertical-align: baseline; border: none; } table.sourceCode { width: 100%; } td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; } td.sourceCode { padding-left: 5px; } code > span.kw { color: #007020; font-weight: bold; } code > span.dt { color: #902000; } code > span.dv { color: #40a070; } code > span.bn { color: #40a070; } code > span.fl { color: #40a070; } code > span.ch { color: #4070a0; } code > span.st { color: #4070a0; } code > span.co { color: #60a0b0; font-style: italic; } code > span.ot { color: #007020; } code > span.al { color: #ff0000; font-weight: bold; } code > span.fu { color: #06287e; } code > span.er { color: #ff0000; font-weight: bold; } </style> <script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js.gz" charset="utf-8" type="text/javascript"></script>

Creating interactive web graphs with R: Overview and googleVis tutorial

<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> // jsData function gvisDatac1 () { var data = new google.visualization.DataTable(); var datajson = [ [ "TF3 4JH", "Telford" ], [ "EC1Y 8LX", "RSS" ] ]; data.addColumn('string','Postcode'); data.addColumn('string','Tip'); data.addRows(datajson); return(data); } // jsData function gvisDatac3 () { var data = new google.visualization.DataTable(); var datajson = [ [ "Global", null, 10, 2 ], [ "America", "Global", 2, 4 ], [ "Europe", "Global", 99, 11 ], [ "Asia", "Global", 10, 8 ], [ "France", "Europe", 71, 2 ], [ "Sweden", "Europe", 89, 3 ], [ "Germany", "Europe", 58, 10 ], [ "Mexico", "America", 2, 9 ], [ "USA", "America", 38, 11 ], [ "China", "Asia", 5, 1 ], [ "Japan", "Asia", 48, 11 ] ]; data.addColumn('string','Region'); data.addColumn('string','Parent'); data.addColumn('number','Val'); data.addColumn('number','Fac'); data.addRows(datajson); return(data); } // jsData function gvisDatac2 () { var data = new google.visualization.DataTable(); var datajson = [ [ "Germany", 3 ], [ "Brazil", 4 ], [ "United States", 5 ], [ "France", 4 ], [ "Hungary", 3 ], [ "India", 2 ], [ "Iceland", 1 ], [ "Norway", 4 ], [ "Spain", 5 ], [ "Turkey", 1 ] ]; data.addColumn('string','Country'); data.addColumn('number','Profit'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartc1() { var data = gvisDatac1(); var options = {}; options["showTip"] = true; options["mapType"] = "normal"; options["enableScrollWheel"] = true; options["width"] = 250; options["height"] = 380; var chart = new google.visualization.Map( document.getElementById('c1') ); chart.draw(data,options); } // jsDrawChart function drawChartc3() { var data = gvisDatac3(); var options = {}; options["width"] = 250; options["height"] = 150; options["fontSize"] = 16; options["minColor"] = "#EDF8FB"; options["midColor"] = "#66C2A4"; options["maxColor"] = "#006D2C"; options["headerHeight"] = 20; options["fontColor"] = "black"; options["showScale"] = true; var chart = new google.visualization.TreeMap( document.getElementById('c3') ); chart.draw(data,options); } // jsDrawChart function drawChartc2() { var data = gvisDatac2(); var options = {}; options["allowHtml"] = true; options["width"] = 250; options["height"] = 260; options["legend"] = "none"; var chart = new google.visualization.BarChart( document.getElementById('c2') ); chart.draw(data,options); } // jsDisplayChart function displayChartc1() { google.load("visualization", "1", { packages:["map"] }); google.setOnLoadCallback(drawChartc1); } // jsDisplayChart function displayChartc3() { google.load("visualization", "1", { packages:["treemap"] }); google.setOnLoadCallback(drawChartc3); } // jsDisplayChart function displayChartc2() { google.load("visualization", "1", { packages:["corechart"] }); google.setOnLoadCallback(drawChartc2); } // jsChart displayChartc1() // jsChart displayChartc3() // jsChart displayChartc2() //--> </script>

Markus Gesmann, RSS Conference 2012 , 5 September 2012

Hello - About me

  • Name: Markus Gesmann
  • Profession: Mathematician, working as an analyst for a big insurance market
  • Maintainer and co-author of two R packages:
    • ChainLadder: Statistical methods for the calculation of outstanding claims reserves in general insurance
    • googleVis: Interface between R and the Google Visualisation API
  • Blog: mages’ blog
Blog banner

Agenda

  • Introduction and motivation
  • Google Chart Tools
  • R package googleVis
    • Concepts of googleVis
    • Case studies
  • How I created this interactive web presentation

The perception of data is changing

  • More and more data is becoming available.
  • New tools are required to bring data to life,
    • to engage with users,
    • to enable them to slice and dice the data,
    • to view it from various angles and
    • to find stories worth telling:
      • outliers,
      • trends or
      • even the obvious.

The way we are consuming news and data is changing

No more boring data

<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

Interactive charts have made data ‘sexy’

Motivation for googleVis

  • Inspired by Hans Rosling’s talks we wanted to use interactive data visualisation tools to foster the dialogue between data analysts and others
  • We wanted moving bubbles charts as well
  • The software behind Hans’ talk was bought by Google and integrated as motion charts into their Visualisation API
  • Ideally we wanted to use R, a language we knew
  • Hence, we had to create an interface between the Google Chart Tools and R

Introduction to Google Chart Tools

  • Google Chart Tools provide a way to visualize data on web sites
  • The API makes it easy to create interactive charts
  • 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 before you start

Motion chart example - Rendered output

<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> // jsData function gvisDataMotionChartID2b554fa8c3a () { var data = new google.visualization.DataTable(); var datajson = [ [ "Apples", 2008, "West", 98, 78, 20 ], [ "Apples", 2009, "West", 111, 79, 32 ], [ "Apples", 2010, "West", 89, 76, 13 ], [ "Oranges", 2008, "East", 96, 81, 15 ], [ "Bananas", 2008, "East", 85, 76, 9 ], [ "Oranges", 2009, "East", 93, 80, 13 ], [ "Bananas", 2009, "East", 94, 78, 16 ], [ "Oranges", 2010, "East", 98, 91, 7 ], [ "Bananas", 2010, "East", 81, 71, 10 ] ]; data.addColumn('string','Fruit'); data.addColumn('number','Year'); data.addColumn('string','Location'); data.addColumn('number','Sales'); data.addColumn('number','Expenses'); data.addColumn('number','Profit'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartMotionChartID2b554fa8c3a() { var data = gvisDataMotionChartID2b554fa8c3a(); var options = {}; options["width"] = 600; options["height"] = 450; var chart = new google.visualization.MotionChart( document.getElementById('MotionChartID2b554fa8c3a') ); chart.draw(data,options); } // jsDisplayChart function displayChartMotionChartID2b554fa8c3a() { google.load("visualization", "1", { packages:["motionchart"] }); google.setOnLoadCallback(drawChartMotionChartID2b554fa8c3a); } // jsChart displayChartMotionChartID2b554fa8c3a() //--> </script>

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:
  1. References to Google’s AJAX (l. 4) and Visualisation API (ll. 7 – 8),
  2. Data to visualise as a DataTable (ll. 11 – 24),
  3. Instance call to create the chart (ll. 25 – 26),
  4. Method call to draw the chart including options, shown here as width and height (l. 27),
  5. HTML <div> element to add the chart to the page (ll. 32 – 34).

How hard can it be?

  1. Transform data into JSON object
  2. Wrap some HTML and JavaScript around it

Thus, googleVis started life in August 2010

What is googleVis?

  • googleVis is a package for R and provides an interface between R and the Google Chart Tools
  • 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
  • See also: Using the Google Visualisation API with R, The R Journal, 3(2):40-44, December 2011

Video tutorial

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

googleVis version 0.2.17 provides interfaces to

  • Flash based
    • Motion Charts
    • Annotated Time Lines
    • Geo Maps
  • HMTL5/SVG based
    • Maps, Geo Charts and 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 of all charts and read the vignette for more details.

World Bank data demo

<iframe height="550px" frameborder="no" scrolling="no" src="http://dl.dropbox.com/u/7586336/blogger/WorldBankMotionChart.html" width="100%"> </iframe>
library(googleVis)
demo(WorldBank)

Key ideas of googleVis

  • Create wrapper functions in R which generate html files with references to Google’s Chart Tools API
  • Transform R data frames into JSON objects with RJSONIO
(dat <- data.frame(x = LETTERS[1:2], y = 1:2))
##   x y
## 1 A 1
## 2 B 2
cat(toJSON(dat))
## {
##  "x": [ "A", "B" ],
## "y": [ 1, 2 ] 
## }
  • Display the HTML output with the R HTTP help server

The googleVis concept

  • Charts: ‘gvis’ + ChartType
  • For a motion chart we have
  • 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 temporary 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"]

Simple line chart

df <- data.frame(label=c("A", "B", "C"), 
                 val1=c(1,3,4), 
                 val2=c(23,12,32))
lc <- gvisLineChart(df, chartid="line")
plot(lc)

<iframe width=620 height=300 frameborder="0" src="http://dl.dropbox.com/u/7586336/RSS2012/line.html">Your browser does not support iframe</iframe>

gvis-Chart structure

List structure gvis object structure
names(lc)
## [1] "type"    "chartid" "html"   
lc$type
## [1] "LineChart"
lc$chartid
## [1] "line"
names(lc$html)
## [1] "header"  "chart"   "caption" "footer" 

gvis-Chart header

cat(lc$html$header)  ## same as print(lc, 'header')
## <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
##         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
## <html xmlns="http://www.w3.org/1999/xhtml">
## <head>
##   <title>line</title>
##   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
##   <style type="text/css">
##     body {
##           color: #444444;
##           font-family: Arial,Helvetica,sans-serif;
##           font-size: 75%;
##     }
##     a {
##           color: #4D87C7;
##           text-decoration: none;
##     }
##   </style>
## </head>
## <body>

gvis-Chart chart

names(lc$html$chart)
## [1] "jsHeader"       "jsData"         "jsDrawChart"    "jsDisplayChart"
## [5] "jsChart"        "jsFooter"       "divChart"      
  • This is the actual raw chart which can be copied and pasted into existing web pages.
  • The chart is made up of several sub components

gvis-Chart

print(lc, "jsHeader")
## <!-- LineChart generated in R 2.15.1 by googleVis 0.2.17 package -->
## <!-- Tue Sep 11 18:57:23 2012 -->
## 
## 
## <!-- jsHeader -->
## <script type="text/javascript" src="http://www.google.com/jsapi">
## </script>
## <script type="text/javascript">

gvis-Chart

print(lc, "jsData")
## 
## // jsData 
## function gvisDataline ()
## {
##   var data = new google.visualization.DataTable();
##   var datajson =
## [
##  [
##  "A",
##           1,
##          23 
## ],
## [
##  "B",
##           3,
##          12 
## ],
## [
##  "C",
##           4,
##          32 
## ] 
## ];
## data.addColumn('string','label');
## data.addColumn('number','val1');
## data.addColumn('number','val2');
## data.addRows(datajson);
## return(data);
## }

gvis-Chart

print(lc, "jsDrawChart")
## 
## // jsDrawChart
## function drawChartline() {
##   var data = gvisDataline();
##   var options = {};
## options["allowHtml"] = true;
## 
##      var chart = new google.visualization.LineChart(
##        document.getElementById('line')
##      );
##      chart.draw(data,options);
##     
## 
## }
##   

gvis-Chart

print(lc, "jsDisplayChart")
## 
## // jsDisplayChart 
## function displayChartline()
## {
##   google.load("visualization", "1", { packages:["corechart"] }); 
##   google.setOnLoadCallback(drawChartline);
## }

gvis-Chart

print(lc, "jsChart")
## 
## // jsChart 
## displayChartline()

gvis-Chart

print(lc, "jsFooter")
## 
## <!-- jsFooter -->  
## //-->
## </script>

gvis-Chart

print(lc, "divChart")
## 
## <!-- divChart -->
##   
## <div id="line"
##   style="width: 600px; height: 500px;">
## </div>

gvis-Chart

print(lc, "caption")
## <div><span>Data: data &#8226; Chart ID: <a href="Chart_line.html">line</a></span><br />

gvis-Chart

print(lc, "footer")
## 
## <!-- htmlFooter -->
## <span> 
## R version 2.15.1 (2012-06-22) &#8226; <a href="http://code.google.com/p/google-motion-charts-with-r/">googleVis-0.2.17</a>
## &#8226; <a href="https://developers.google.com/terms/">Google Terms of Use</a> &#8226; <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart.html#Data_Policy">Data Policy</a>
## </span></div>
## </body>
## </html>

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')
<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> // jsData function gvisDataLineChartID2b5d0c5f6c () { var data = new google.visualization.DataTable(); var datajson = [ [ "A", 1, 23 ], [ "B", 3, 12 ], [ "C", 4, 32 ] ]; data.addColumn('string','label'); data.addColumn('number','val1'); data.addColumn('number','val2'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartLineChartID2b5d0c5f6c() { var data = gvisDataLineChartID2b5d0c5f6c(); var options = {}; options["allowHtml"] = true; options["title"] = "Hello World"; options["legend"] = "bottom"; options["titleTextStyle"] = {color:'red', fontSize:18}; options["vAxis"] = {gridlines:{color:'red', count:3}}; options["hAxis"] = {title:'My Label', titleTextStyle:{color:'blue'}}; options["series"] = [{color:'green', targetAxisIndex: 0}, {color: 'blue',targetAxisIndex:1}]; options["vAxes"] = [{title:'Value 1 (%)', format:'#,###%'}, {title:'Value 2 (£)'}]; options["curveType"] = "function"; options["width"] = 500; options["height"] = 300; var chart = new google.visualization.LineChart( document.getElementById('LineChartID2b5d0c5f6c') ); chart.draw(data,options); } // jsDisplayChart function displayChartLineChartID2b5d0c5f6c() { google.load("visualization", "1", { packages:["corechart"] }); google.setOnLoadCallback(drawChartLineChartID2b5d0c5f6c); } // jsChart displayChartLineChartID2b5d0c5f6c() //--> </script>

On-line changes

You can enable the chart editor which allows users to change the chart.

print(gvisLineChart(df, 
      options=list(gvis.editor="Edit me!")),
      'chart')
<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> // jsData function gvisDataLineChartID2b5274cb225 () { var data = new google.visualization.DataTable(); var datajson = [ [ "A", 1, 23 ], [ "B", 3, 12 ], [ "C", 4, 32 ] ]; data.addColumn('string','label'); data.addColumn('number','val1'); data.addColumn('number','val2'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartLineChartID2b5274cb225() { var data = gvisDataLineChartID2b5274cb225(); var options = {}; options["allowHtml"] = true; chartLineChartID2b5274cb225 = new google.visualization.ChartWrapper({ dataTable: data, chartType: 'LineChart', containerId: 'LineChartID2b5274cb225', options: options }); chartLineChartID2b5274cb225.draw(); } function openEditorLineChartID2b5274cb225() { var editor = new google.visualization.ChartEditor(); google.visualization.events.addListener(editor, 'ok', function() { chartLineChartID2b5274cb225 = editor.getChartWrapper(); chartLineChartID2b5274cb225.draw(document.getElementById('LineChartID2b5274cb225')); }); editor.openDialog(chartLineChartID2b5274cb225); } // jsDisplayChart function displayChartLineChartID2b5274cb225() { google.load("visualization", "1", { packages:["charteditor"] }); google.setOnLoadCallback(drawChartLineChartID2b5274cb225); } // jsChart displayChartLineChartID2b5274cb225() //--> </script>


Change motion chart settings

print(gvisMotionChart(Fruits, "Fruit", "Year"), "chart")
<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> // jsData function gvisDataMotionChartID2b51c43af4b () { var data = new google.visualization.DataTable(); var datajson = [ [ "Apples", 2008, "West", 98, 78, 20, "2008-12-31" ], [ "Apples", 2009, "West", 111, 79, 32, "2009-12-31" ], [ "Apples", 2010, "West", 89, 76, 13, "2010-12-31" ], [ "Oranges", 2008, "East", 96, 81, 15, "2008-12-31" ], [ "Bananas", 2008, "East", 85, 76, 9, "2008-12-31" ], [ "Oranges", 2009, "East", 93, 80, 13, "2009-12-31" ], [ "Bananas", 2009, "East", 94, 78, 16, "2009-12-31" ], [ "Oranges", 2010, "East", 98, 91, 7, "2010-12-31" ], [ "Bananas", 2010, "East", 81, 71, 10, "2010-12-31" ] ]; data.addColumn('string','Fruit'); data.addColumn('number','Year'); data.addColumn('string','Location'); data.addColumn('number','Sales'); data.addColumn('number','Expenses'); data.addColumn('number','Profit'); data.addColumn('string','Date'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartMotionChartID2b51c43af4b() { var data = gvisDataMotionChartID2b51c43af4b(); var options = {}; options["width"] = 600; options["height"] = 500; var chart = new google.visualization.MotionChart( document.getElementById('MotionChartID2b51c43af4b') ); chart.draw(data,options); } // jsDisplayChart function displayChartMotionChartID2b51c43af4b() { google.load("visualization", "1", { packages:["motionchart"] }); google.setOnLoadCallback(drawChartMotionChartID2b51c43af4b); } // jsChart displayChartMotionChartID2b51c43af4b() //--> </script>

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

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')
<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> // jsData function gvisDataMotionChartID2b51fa9736c () { var data = new google.visualization.DataTable(); var datajson = [ [ "Apples", 2008, "West", 98, 78, 20, "2008-12-31" ], [ "Apples", 2009, "West", 111, 79, 32, "2009-12-31" ], [ "Apples", 2010, "West", 89, 76, 13, "2010-12-31" ], [ "Oranges", 2008, "East", 96, 81, 15, "2008-12-31" ], [ "Bananas", 2008, "East", 85, 76, 9, "2008-12-31" ], [ "Oranges", 2009, "East", 93, 80, 13, "2009-12-31" ], [ "Bananas", 2009, "East", 94, 78, 16, "2009-12-31" ], [ "Oranges", 2010, "East", 98, 91, 7, "2010-12-31" ], [ "Bananas", 2010, "East", 81, 71, 10, "2010-12-31" ] ]; data.addColumn('string','Fruit'); data.addColumn('number','Year'); data.addColumn('string','Location'); data.addColumn('number','Sales'); data.addColumn('number','Expenses'); data.addColumn('number','Profit'); data.addColumn('string','Date'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartMotionChartID2b51fa9736c() { var data = gvisDataMotionChartID2b51fa9736c(); var options = {}; options["width"] = 600; options["height"] = 300; options["state"] = "\n{\"xZoomedDataMin\":1199145600000,\"colorOption\":\"2\",\n \"xZoomedDataMax\":1262304000000,\"iconType\":\"LINE\",\n \"dimensions\":{\"iconDimensions\":[\"dim0\"]},\n \"xAxisOption\":\"_TIME\",\"orderedByX\":false,\"playDuration\":15000,\n \"xZoomedIn\":false,\"time\":\"2010\",\"yZoomedDataMin\":0,\n \"yZoomedIn\":false,\"orderedByY\":false,\"yZoomedDataMax\":100}\n"; var chart = new google.visualization.MotionChart( document.getElementById('MotionChartID2b51fa9736c') ); chart.draw(data,options); } // jsDisplayChart function displayChartMotionChartID2b51fa9736c() { google.load("visualization", "1", { packages:["motionchart"] }); google.setOnLoadCallback(drawChartMotionChartID2b51fa9736c); } // jsChart displayChartMotionChartID2b51fa9736c() //--> </script>

Displaying geographical information

Plot countries’ S&P credit rating sourced from Wikipedia

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

print(G, "chart")
<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> // jsData function gvisDataGeoMapID2b52dd8c7b1 () { var data = new google.visualization.DataTable(); var datajson = [ [ "Albania", 6, "Albania: 1" ], [ "Angola", 5, "Angola: a3" ], [ "Argentina", 8, "Argentina: 3" ], [ "Armenia", 4, "Armenia: a2" ], [ "Australia", 1, "Australia: aa" ], [ "Austria", 1, "Austria: aa" ], [ "Azerbaijan", 2, "Azerbaijan: aa3" ], [ "Bahamas", 8, "Bahamas: 3" ], [ "Bahrain", 9, "Bahrain: aa1" ], [ "Bangladesh", 5, "Bangladesh: a3" ], [ "Barbados", 2, "Barbados: aa3" ], [ "Belarus", 8, "Belarus: 3" ], [ "Belgium", 5, "Belgium: a3" ], [ "Belize", 8, "Belize: 3" ], [ "Bermuda", 4, "Bermuda: a2" ], [ "Bolivia", 5, "Bolivia: a3" ], [ "Bosnia and Herzegovina", 8, "Bosnia and Herzegovina: 3" ], [ "Botswana", 7, "Botswana: 2" ], [ "Brazil", 10, "Brazil: aa2" ], [ "Bulgaria", 10, "Bulgaria: aa2" ], [ "Cambodia", 7, "Cambodia: 2" ], [ "Canada", 1, "Canada: aa" ], [ "Cayman Islands", 5, "Cayman Islands: a3" ], [ "Chile", 5, "Chile: a3" ], [ "China", 5, "China: a3" ], [ "Colombia", 2, "Colombia: aa3" ], [ "Costa Rica", 2, "Costa Rica: aa3" ], [ "Croatia", 2, "Croatia: aa3" ], [ "Cuba", 9, "Cuba: aa1" ], [ "Cyprus", 5, "Cyprus: a3" ], [ "Czech Republic", 6, "Czech Republic: 1" ], [ "Denmark", 1, "Denmark: aa" ], [ "Dominican Republic", 6, "Dominican Republic: 1" ], [ "Ecuador", 10, "Ecuador: aa2" ], [ "Egypt", 6, "Egypt: 1" ], [ "El Salvador", 4, "El Salvador: a2" ], [ "Estonia", 6, "Estonia: 1" ], [ "Fiji", 6, "Fiji: 1" ], [ "Finland", 1, "Finland: aa" ], [ "France", 1, "France: aa" ], [ "Georgia", 5, "Georgia: a3" ], [ "Germany", 1, "Germany: aa" ], [ "Greece", 11, "Greece: " ], [ "Guatemala", 3, "Guatemala: a1" ], [ "Honduras", 7, "Honduras: 2" ], [ "Hong Kong", 3, "Hong Kong: a1" ], [ "Hungary", 3, "Hungary: a1" ], [ "Iceland", 2, "Iceland: aa3" ], [ "India", 2, "India: aa3" ], [ "Indonesia", 2, "Indonesia: aa3" ], [ "Ireland", 3, "Ireland: a1" ], [ "Isle of Man", 1, "Isle of Man: aa" ], [ "Israel", 6, "Israel: 1" ], [ "Italy", 10, "Italy: aa2" ], [ "Jamaica", 8, "Jamaica: 3" ], [ "Japan", 5, "Japan: a3" ], [ "Jordan", 4, "Jordan: a2" ], [ "Kazakhstan", 10, "Kazakhstan: aa2" ], [ "Kuwait", 4, "Kuwait: a2" ], [ "Latvia", 2, "Latvia: aa3" ], [ "Lebanon", 6, "Lebanon: 1" ], [ "Lithuania", 9, "Lithuania: aa1" ], [ "Luxembourg", 1, "Luxembourg: aa" ], [ "Macao", 5, "Macao: a3" ], [ "Malaysia", 8, "Malaysia: 3" ], [ "Malta", 6, "Malta: 1" ], [ "Mauritius", 10, "Mauritius: aa2" ], [ "Mexico", 10, "Mexico: aa2" ], [ "Moldova", 8, "Moldova: 3" ], [ "Mongolia", 6, "Mongolia: 1" ], [ "Montenegro", 5, "Montenegro: a3" ], [ "Morocco", 3, "Morocco: a1" ], [ "Netherlands", 1, "Netherlands: aa" ], [ "New Zealand", 1, "New Zealand: aa" ], [ "Nicaragua", 8, "Nicaragua: 3" ], [ "Norway", 1, "Norway: aa" ], [ "Oman", 6, "Oman: 1" ], [ "Pakistan", 9, "Pakistan: aa1" ], [ "Panama", 2, "Panama: aa3" ], [ "Papua New Guinea", 6, "Papua New Guinea: 1" ], [ "Paraguay", 6, "Paraguay: 1" ], [ "Peru", 10, "Peru: aa2" ], [ "Philippines", 4, "Philippines: a2" ], [ "Poland", 7, "Poland: 2" ], [ "Portugal", 5, "Portugal: a3" ], [ "Qatar", 4, "Qatar: a2" ], [ "Romania", 2, "Romania: aa3" ], [ "Russia", 9, "Russia: aa1" ], [ "Saudi Arabia", 5, "Saudi Arabia: a3" ], [ "Senegal", 6, "Senegal: 1" ], [ "Singapore", 1, "Singapore: aa" ], [ "Slovakia", 10, "Slovakia: aa2" ], [ "Slovenia", 10, "Slovenia: aa2" ], [ "South Africa", 8, "South Africa: 3" ], [ "South Korea", 5, "South Korea: a3" ], [ "Spain", 2, "Spain: aa3" ], [ "Sri Lanka", 6, "Sri Lanka: 1" ], [ "St. Vincent & the Grenadines", 6, "St. Vincent & the Grenadines: 1" ], [ "Suriname", 6, "Suriname: 1" ], [ "Sweden", 1, "Sweden: aa" ], [ "Switzerland", 1, "Switzerland: aa" ], [ "Taiwan", 5, "Taiwan: a3" ], [ "Thailand", 9, "Thailand: aa1" ], [ "Trinidad and Tobago", 9, "Trinidad and Tobago: aa1" ], [ "Tunisia", 2, "Tunisia: aa3" ], [ "Turkey", 3, "Turkey: a1" ], [ "Ukraine", 7, "Ukraine: 2" ], [ "United Arab Emirates", 4, "United Arab Emirates: a2" ], [ "United Kingdom", 1, "United Kingdom: aa" ], [ "United States", 1, "United States: aa" ], [ "Uruguay", 3, "Uruguay: a1" ], [ "Venezuela", 7, "Venezuela: 2" ], [ "Vietnam", 6, "Vietnam: 1" ] ]; data.addColumn('string','Country'); data.addColumn('number','Ranking'); data.addColumn('string','Rating'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartGeoMapID2b52dd8c7b1() { var data = gvisDataGeoMapID2b52dd8c7b1(); var options = {}; options["dataMode"] = "regions"; options["width"] = 556; options["height"] = 347; options["colors"] = [0x91BFDB, 0XFC8D59]; chartGeoMapID2b52dd8c7b1 = new google.visualization.ChartWrapper({ dataTable: data, chartType: 'GeoMap', containerId: 'GeoMapID2b52dd8c7b1', options: options }); chartGeoMapID2b52dd8c7b1.draw(); } function openEditorGeoMapID2b52dd8c7b1() { var editor = new google.visualization.ChartEditor(); google.visualization.events.addListener(editor, 'ok', function() { chartGeoMapID2b52dd8c7b1 = editor.getChartWrapper(); chartGeoMapID2b52dd8c7b1.draw(document.getElementById('GeoMapID2b52dd8c7b1')); }); editor.openDialog(chartGeoMapID2b52dd8c7b1); } // jsDisplayChart function displayChartGeoMapID2b52dd8c7b1() { google.load("visualization", "1", { packages:["charteditor"] }); google.setOnLoadCallback(drawChartGeoMapID2b52dd8c7b1); } // jsChart displayChartGeoMapID2b52dd8c7b1() //--> </script>


Geo chart with markers

Display earth quake information of last 30 days

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')
<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> // jsData function gvisDataEQ () { var data = new google.visualization.DataTable(); var datajson = [ [ 11.79, 143.22, 9.9, 5.8 ], [ -37.21, 52.33, 10, 4.8 ], [ 14.39, 146.9, 34.9, 4.7 ], [ -10.94, 113.88, 4.7, 4.9 ], [ -3.07, 130.23, 56.4, 4.2 ], [ -37.87, -73.54, 2.5, 4.6 ], [ -31.83, -68.25, 108.6, 5.1 ], [ -20.67, -68.78, 93.7, 4.4 ], [ -6.09, 105.3, 76.4, 4.8 ], [ 24.66, 99.26, 22, 5 ], [ 24.81, 99.38, 22.2, 4.6 ], [ 3.72, 92.71, 22.5, 4.9 ], [ 45.29, 151.19, 14.7, 5.5 ], [ 36.75, 141.17, 15.4, 4.6 ], [ 0.54, 98.47, 54.1, 4.8 ], [ 19.35, -67.56, 26.8, 4.3 ], [ 51.14, 157.41, 74.1, 4.5 ], [ 10.41, 93.28, 49.1, 4.6 ], [ 0.91, 92.78, 15.4, 4.9 ], [ 10.47, 93.61, 37.7, 5.2 ], [ 39.26, 74.21, 45.3, 4.6 ], [ 10.49, 93.55, 62.3, 4.5 ], [ 12.35, -88.63, 25, 4.8 ], [ 3.99, 126.19, 42.4, 5.1 ], [ 41.73, 143.69, 30, 4.6 ], [ 51.9, -171.05, 48.7, 4.1 ], [ -6.59, 129.71, 143.7, 4.7 ], [ 13.65, 92.84, 29, 4.9 ], [ 24.07, 126.14, 10.5, 4.8 ], [ 2.9, 128.46, 203.9, 4.7 ], [ -20.42, -68.95, 103.9, 4.4 ], [ -10.69, 114.01, 10, 4.8 ], [ -20.37, -176.53, 250.7, 4.8 ], [ 9.8, -84.85, 24.9, 4.3 ], [ -27.47, -67.28, 166.6, 4.8 ], [ -7.33, 128.6, 150.8, 4.5 ], [ 40, 24.8, 13.6, 4.2 ], [ 52.82, 174.94, 120.6, 5.3 ], [ 16.1, -98.1, 15.2, 4.7 ], [ -3.17, 135.04, 49.5, 4.7 ], [ -21, -68.76, 119.7, 4.3 ], [ 36.2, 70.61, 109.9, 4.1 ], [ -30.38, -177.96, 56.9, 5 ], [ -3.7, 144.39, 41.9, 4.5 ], [ 12.56, -88.93, 35, 4.4 ], [ 23.41, 36.36, 10, 4.3 ], [ 12.59, -88.61, 35, 4.2 ], [ -10.8, 113.79, 16.4, 4.8 ], [ 45.29, 151.34, 40.4, 5.1 ], [ 36.86, 24.42, 120.3, 4.3 ], [ 49.43, 155.54, 58.7, 6 ], [ 16.23, -98.2, 11.9, 4.7 ], [ -10.74, 113.97, 12.1, 4.4 ], [ -28.11, -176.55, 12.1, 4.9 ], [ 11.92, 43.42, 9.6, 4.4 ], [ 23.6, 126.75, 10, 4.8 ], [ 10.1, -85.32, 35.6, 5.5 ], [ 53.11, 156.55, 270.7, 4.3 ], [ -6.6, 106.7, 8.8, 4.8 ], [ -6.72, 146.15, 139.9, 4.9 ], [ -3.37, 135.49, 40.7, 4.8 ], [ 2.41, 126.73, 35, 5.1 ], [ 1.09, 120.74, 70.9, 4.8 ], [ 10.03, -85.4, 50.7, 4.3 ], [ -3.17, 135.11, 28.9, 6.2 ], [ 37.33, 37.09, 3.5, 4.1 ], [ 10.43, -85.63, 34.2, 4.5 ], [ -10.95, 113.8, 10, 4.6 ], [ -10.78, 113.97, 15.5, 4.5 ], [ 53.77, -164.95, 49.1, 4.4 ], [ 6.57, 95.57, 242.5, 4.6 ], [ 21.53, 145.92, 5, 5.6 ], [ -7.11, -12.58, 10, 4.6 ], [ -9.41, 125.91, 56.1, 4.4 ], [ -9.82, 160.38, 41.1, 5.2 ], [ 38.56, 55.72, 10, 4.2 ], [ 12, -88.54, 38.3, 4.2 ], [ 33.79, 132.22, 52.8, 4.6 ], [ 7.12, 126.71, 88.9, 4.5 ], [ -22.82, -66.43, 204.4, 4.5 ], [ 10.8, 126.8, 35.2, 4.9 ], [ -10.95, 113.73, 27.7, 4.7 ], [ 1.3, 91.77, 15, 4.7 ], [ 12.48, -88.68, 71.7, 4.7 ], [ 21.6, 143.35, 267.4, 5 ], [ -7.73, 129.01, 161.7, 4.6 ], [ -10.82, 113.87, 25.4, 5.4 ], [ -10.82, 113.86, 20, 4.3 ], [ 10.97, 126.91, 50.5, 4.7 ], [ 36.12, -120.05, 8.4, 4.2 ], [ 36.12, -120.05, 11.1, 4 ], [ 2.45, 128.26, 164.2, 5.3 ], [ 7.14, 126.95, 54, 4.9 ], [ -10.88, 113.79, 10, 4.5 ], [ -4.69, -105.65, 10, 4.6 ], [ 7.37, -75.11, 65, 4.3 ], [ -6.88, 72.19, 10, 5.2 ], [ 36.66, 141.02, 36.2, 4.5 ], [ 9.69, -85.05, 35, 4.3 ], [ -10.85, 113.83, 18.7, 4.6 ], [ 27.7, 104.17, 12.1, 4.7 ], [ 27.56, 104.02, 10, 5.5 ], [ 27.59, 104.06, 10, 4.8 ], [ 10.56, -86.21, 35.5, 4.3 ], [ 27.54, 103.97, 10, 5.6 ], [ -22.32, -68.18, 89.1, 4.8 ], [ 10.3, -85.22, 40.8, 4.5 ], [ 0.11, 98.59, 47, 4.5 ], [ -14.34, 167.36, 161.1, 4.6 ], [ -4.58, -105.87, 10, 5.2 ], [ 12.36, -88.31, 65.1, 4.8 ], [ -16.09, -73.5, 35, 4.8 ], [ 10.96, 126.49, 3.5, 5 ], [ -5.2, 103.4, 78.8, 4.6 ], [ -22.13, -176.22, 97.6, 4.9 ], [ 12.39, -88.5, 24.5, 4.4 ], [ 10.5, 126.71, 35.6, 4.7 ], [ 11.71, -85.82, 228.6, 4.7 ], [ -20.36, -178.8, 599.3, 4.6 ], [ 12.37, -88.51, 35, 4.9 ], [ -3.65, 140.24, 35, 5.4 ], [ -33.81, -70.01, 103.7, 4.6 ], [ 10.37, -85.83, 35.3, 4.1 ], [ 10.14, -85.41, 35, 4.1 ], [ 27.13, 54.06, 34.2, 4.9 ], [ 4.5, 126.86, 58.2, 5.3 ], [ 27.18, 54.02, 39.6, 5.2 ], [ -15.69, 178.9, 53.9, 4.8 ], [ 10.05, -85.45, 35, 4.6 ], [ 10.12, -85.45, 47.9, 4.5 ], [ 13.64, -91.07, 52.7, 4 ], [ 12.07, 46.28, 9.9, 5.1 ], [ 60.37, -152.28, 102.2, 4.2 ], [ 9.92, -85.56, 21.8, 4.4 ], [ 9.65, -84.75, 35.9, 4.5 ], [ 10.09, -85.31, 40, 6.8 ], [ -12.48, 166.5, 35, 5.6 ], [ 14.71, -93.51, 28.1, 4.4 ], [ 14.79, -93.51, 45, 4.4 ], [ -12.38, 166.52, 49.9, 4.8 ], [ 23.95, 122.38, 28.7, 4.5 ], [ -11.2, -73.56, 139, 4.2 ], [ -10.82, 113.84, 21.1, 4.9 ], [ 11.6, 126.7, 34.3, 5 ], [ 19.7, -64.26, 28, 4.5 ], [ 19.55, -64.07, 80.9, 4.2 ], [ 41.11, 19.92, 2, 4.4 ], [ -10.8, 113.97, 6.8, 4.9 ], [ 22.21, 121.12, 17.5, 5.1 ], [ 10.92, 125.18, 54.8, 4.9 ], [ 4.81, 96.19, 37.2, 4.7 ], [ -2.84, 129.61, 43.9, 4.2 ], [ -23.22, -68.96, 103.8, 4.5 ], [ -21.57, -178.94, 502.6, 4.7 ], [ -35.78, -71.25, 99.7, 4.4 ], [ 10.61, 126.71, 38, 5.5 ], [ 10.98, 127.35, 35, 4.5 ], [ 38.93, 140.16, 35, 4.5 ], [ 10.51, 126.91, 16.5, 5.3 ], [ 35.2, 27.92, 70, 4 ], [ -0.53, 119.97, 47.5, 4.7 ], [ -10.68, 113.91, 9.5, 5.2 ], [ -2.67, 119.14, 42.7, 4.6 ], [ -10.94, 113.81, 18.1, 4.7 ], [ 17.21, -85.68, 27.7, 4.6 ], [ -10.79, 113.79, 29.5, 5.1 ], [ -10.88, 113.83, 30.7, 4.7 ], [ 10.48, 126.83, 35.3, 5.3 ], [ 10.53, 126.96, 35, 4.8 ], [ 36.92, 78.82, 38, 4.6 ], [ 10.56, 126.72, 35.4, 5.5 ], [ 10.68, 126.95, 34.7, 5.1 ], [ 10.66, 126.81, 35.3, 5.3 ], [ -32.68, -69.85, 113.8, 4.5 ], [ -10.85, 114, 11, 5 ], [ -5.64, 128.77, 295.6, 4.7 ], [ -22.1, 179.92, 589.3, 4.8 ], [ 10.43, 126.89, 35, 5.4 ], [ 58.51, -153.65, 62.1, 4.5 ], [ -10.83, 113.96, 10, 4.6 ], [ -7.51, 106.19, 73.1, 4.6 ], [ 10.44, 126.36, 35, 4.7 ], [ 7.95, 125.12, 9.8, 5.6 ], [ -10.79, 113.88, 8.8, 6.4 ], [ 2.43, -95.39, 10, 4.7 ], [ 35.66, 25.98, 10, 4 ], [ -47.64, 99.76, 10, 4.4 ], [ -10.82, 113.9, 10, 4.6 ], [ -10.78, 113.89, 16.4, 4.9 ], [ -10.63, 165.5, 55.1, 4.8 ], [ 51.24, -177.07, 34.9, 5 ], [ 10.38, 126.79, 34.9, 4.7 ], [ 6.56, 123.86, 10, 5 ], [ 6.61, 123.88, 12, 5.7 ], [ 11.24, 126.55, 35, 4.6 ], [ 10.42, 126.49, 35, 4.9 ], [ 28.01, 57.76, 14.1, 4.4 ], [ 10.33, 126.39, 35, 5.1 ], [ -56.72, -141.79, 10, 4.9 ], [ 10.85, 126.57, 34.7, 4.7 ], [ 51.18, -176.95, 46.3, 4.8 ], [ 10.56, 126.91, 45, 4.7 ], [ 10.53, 126.8, 40.8, 4.8 ], [ 10.93, 126.66, 58.4, 4.9 ], [ 11.26, 126.71, 39.9, 4.6 ], [ 10.4, 127.12, 35, 4.7 ], [ 4.35, 128.22, 60.8, 4.2 ], [ 11.31, 126.65, 35, 5.4 ], [ 19.67, -64.24, 35.2, 4 ], [ 11.01, 127.28, 35, 4.3 ], [ -31.12, -178.37, 57.6, 4.6 ], [ 78.43, 6.8, 10, 5.2 ], [ -5.42, 146.9, 221.1, 4.5 ], [ -16.2, -70.23, 152.2, 4.4 ], [ 38.41, 46.76, 10, 4.4 ], [ -19.22, 169.23, 175, 4.6 ], [ 10.3, 126.48, 63.1, 4.7 ], [ 17.26, 40.47, 10, 4.5 ], [ 12.36, 144.02, 48.1, 4.8 ], [ 23.02, 145.98, 20, 4.8 ], [ 39.58, 143.44, 24.3, 4.6 ], [ 33.47, 59.9, 12, 5 ], [ 19.64, -64.38, 12.3, 4.4 ], [ -6.5, 143.64, 57, 5 ], [ -21.6, -174.56, 54.5, 5.1 ], [ 16.4, -92.44, 252.3, 5.2 ], [ 37.86, 139.92, 29.6, 4.7 ], [ 10.58, 126.9, 25.7, 4.9 ], [ -41.42, 175, 26.4, 4 ], [ 12.52, -88.29, 35.1, 4.5 ], [ 12.55, -88.31, 41.4, 4.4 ], [ -8.28, -79.76, 67, 4.3 ], [ 10.37, 126.93, 35, 4.8 ], [ 12.63, -88.82, 35, 4.6 ], [ 11.14, 126.72, 35, 4.5 ], [ -0.08, 123.4, 154.9, 4.7 ], [ 66.84, -135.61, 20, 4.2 ], [ -27.21, -71.12, 27.7, 5 ], [ 12.01, -88.27, 35, 4.2 ], [ 10.78, -88.14, 35, 4.3 ], [ 10.36, 126.88, 35, 5 ], [ 10.35, 126.85, 35, 5 ], [ -3.4, -80.62, 64.5, 4.3 ], [ 43.59, 84.74, 39.4, 4.4 ], [ 13.22, -90.21, 35, 4.1 ], [ 10.56, 126.8, 33.3, 4.9 ], [ 6.72, -72.92, 163.9, 5.1 ], [ 11.25, 126.76, 35, 4.6 ], [ 11.97, -88.51, 40, 4.5 ], [ 10.53, 126.82, 28.9, 5.3 ], [ 10.44, 126.67, 35.1, 5.5 ], [ 10.24, 126.45, 35, 5.3 ], [ -22, 170.15, 42.8, 4.9 ], [ 10.41, 126.72, 35, 5.7 ], [ 10.97, 126.84, 49.1, 5.1 ], [ 10.58, 126.71, 46.9, 4.9 ], [ 10.72, 126.71, 34.6, 5.2 ], [ -23.81, -67.68, 126.2, 4.4 ], [ 10.65, 126.8, 49.1, 4.9 ], [ 13.26, 50.46, 9.4, 5.3 ], [ 2.55, -95.25, 10.6, 5 ], [ -4.97, 151.85, 88, 5.2 ], [ 13.13, 50.45, 10.1, 4.9 ], [ -55.75, -27.52, 23.4, 5 ], [ 11.02, 126.71, 14, 5.1 ], [ 13.23, 50.46, 10, 4.8 ], [ 13.33, 50.4, 10, 4.8 ], [ 10.36, 126.89, 42.9, 4.9 ], [ 10.38, 126.85, 35, 4.9 ], [ 10.44, 126.6, 31.7, 4.9 ], [ 10.45, 126.73, 20.6, 5.4 ], [ 10.37, 126.86, 48, 4.8 ], [ 10.41, 126.84, 46.9, 5.1 ], [ 10.52, 126.8, 35, 5.4 ], [ 10.55, 126.84, 24.3, 5.5 ], [ 10.82, 126.63, 28, 7.2 ], [ 24.7, 120.89, 19, 4.6 ], [ 46.76, 86.24, 10, 4.1 ], [ 38.41, 46.71, 11, 4.2 ], [ -43.46, 40.19, 10, 4.5 ], [ -34.21, -70.24, 102.3, 4.6 ], [ 23.65, 114.38, 10, 4.3 ], [ 65.98, -147.8, 13.2, 4.3 ], [ -24.25, -67.08, 164.9, 4 ], [ -21.63, -68.3, 92.8, 4.3 ], [ 3.81, -32.18, 10, 4.9 ], [ 48.04, 148.04, 368.2, 4 ], [ -2.98, -79.43, 78.7, 4.6 ], [ 30.65, -113.39, 10, 4 ], [ 51.15, -177.08, 17.2, 4.5 ], [ -44.11, 168.85, 8, 4.9 ], [ -50.38, 114.19, 10.3, 4.8 ], [ 16.68, -98.04, 40.8, 4.4 ], [ 70.93, -8.06, 12.3, 5.2 ], [ 71.44, -10.58, 14, 6.8 ], [ -50.22, 114.18, 10, 5.4 ], [ 53.48, -166.28, 46.3, 4.2 ], [ -50.26, 114.14, 10, 5 ], [ 12.44, -88.43, 35.2, 4.3 ], [ 52.01, -174.37, 26, 4.3 ], [ -37.18, -73.46, 7.8, 5 ], [ -3.51, 130.96, 35, 4.4 ], [ -3.46, 130.98, 35, 5.2 ], [ -8.53, -74.83, 137.9, 4.9 ], [ 12.25, -88.13, 35, 4.4 ], [ 12.02, -88.75, 35, 4.2 ], [ 19.77, -64.24, 29.3, 4.5 ], [ 19.8, -64.26, 17.4, 4.4 ], [ 33.91, -117.78, 8.8, 4.1 ], [ 19.47, -64.33, 9.3, 4.8 ], [ 19.39, -64.36, 14.4, 5.2 ], [ 38.43, 141.89, 53.7, 5.5 ], [ 43.8, 85.41, 38, 4.3 ], [ 22.86, 121.58, 7.2, 4.4 ], [ -17.61, 168.33, 103.1, 5.1 ], [ 60.31, -150.71, 58.7, 4.3 ], [ -20.43, -178.2, 485.5, 4.4 ], [ -6.22, 147.15, 92.7, 4.3 ], [ 3.45, 122.69, 538.1, 4.9 ], [ 12.87, -88.8, 35.1, 4.5 ], [ 12.47, -88.53, 34.9, 4.4 ], [ 13.19, -60.71, 17.1, 4 ], [ 38.25, 15.71, 45.4, 4.5 ], [ 6.72, -72.9, 153.1, 4.4 ], [ 12.82, -88.6, 35, 4.6 ], [ 12.54, -88.95, 35, 4.3 ], [ 4.41, 92.99, 22.7, 5.4 ], [ 63.57, -147.76, 9.6, 4.6 ], [ 36.3, 141.76, 45.9, 4.8 ], [ 30.37, -113.96, 10, 4.3 ], [ 46.89, -27.41, 10, 4.6 ], [ 11.98, -88.71, 35, 5 ], [ 52.17, -171.01, 51.5, 4.3 ], [ 28.85, 82.02, 10, 4.6 ], [ -14.7, 167.84, 53.7, 4.4 ], [ -32.42, -71.17, 44.3, 4.8 ], [ 51.76, 96.11, 10, 4.8 ], [ 12.5, -88.65, 34, 5.7 ], [ 33.01, -115.56, 13.2, 4.4 ], [ 12.41, -88.85, 35.1, 4.7 ], [ 30.63, -113.65, 10.1, 4.1 ], [ 12.35, -88.94, 35, 4.5 ], [ 30.55, -113.91, 10, 5.1 ], [ 12.57, -88.7, 35, 4.5 ], [ 36.52, 142.84, 35, 4.6 ], [ 12.42, -88.65, 35, 4.8 ], [ 12, -88.66, 35, 4.8 ], [ 3.64, 126.68, 19.9, 5.3 ], [ 19.57, -64.53, 6.3, 4.6 ], [ -27.2, -176.71, 67.3, 4.9 ], [ -19.09, 169.26, 258.4, 4.3 ], [ 12.47, -89.03, 35, 4.6 ], [ 25.95, 126.42, 63, 4.3 ], [ 12.1, -88.54, 35, 4.5 ], [ 12.57, -88.26, 35, 4.4 ], [ -10.94, 165.88, 74.3, 4 ], [ 12.93, -88.45, 20.5, 4.6 ], [ 10.35, 92.94, 45.4, 5 ], [ 12.12, -88.49, 20.6, 4.7 ], [ 12.15, -88.31, 20.1, 5.2 ], [ 2.38, 99, 151.2, 5.3 ], [ 12.32, -88.71, 35, 4.6 ], [ 12.6, -88.98, 35, 4.5 ], [ 12.4, -89.1, 35, 4.7 ], [ 12.1, -88.45, 35, 4.7 ], [ 12.18, -88.48, 35, 4.2 ], [ 12.12, -88.76, 35, 4.2 ], [ 49, 154.85, 80.6, 4.4 ], [ 12.04, -88.49, 35, 4.3 ], [ 12.44, -88.72, 35, 4.3 ], [ 12.33, -88.5, 35, 4.4 ], [ 12.42, -88.66, 35, 4.3 ], [ 12.29, -88.62, 35, 5.5 ], [ 35.59, -115.73, 12.3, 4 ], [ 30.56, -113.87, 10, 5.2 ], [ -35.34, -104.32, 10, 4.8 ], [ 12.33, -88.82, 35, 4.3 ], [ 32.52, -115.66, 13.7, 4.1 ], [ 12.25, -89.11, 35, 4.4 ], [ 12.26, -88.63, 35, 4.5 ], [ 32.92, -115.63, 5, 4.1 ], [ 32.99, -115.53, 3.5, 4.3 ], [ 33.07, -115.53, 13.2, 4 ], [ 12.6, -88.88, 35, 4.8 ], [ 33.03, -115.53, 9, 4.9 ], [ 12.09, -88.59, 28, 7.3 ], [ 2.17, 126.84, 95.1, 5 ], [ -27.62, -176.55, 27.1, 4.3 ], [ -23.74, -69.41, 99.9, 5 ], [ -23.67, -69.14, 120.9, 4.4 ], [ 32.89, -115.7, 5.2, 4.8 ], [ 33.04, -115.52, 12.2, 4.8 ], [ 12.18, -88.07, 67.1, 4.3 ], [ -28.2, -176.54, 10, 4.3 ], [ 2.63, 128.8, 57.7, 5 ], [ 33, -115.59, 12.9, 4.3 ], [ 14.07, -91.26, 90.9, 4.2 ], [ 33.03, -115.48, 12.1, 4.3 ], [ 33.02, -115.55, 9, 5.7 ], [ 32.99, -115.6, 13.8, 4.3 ], [ 33, -115.55, 15.5, 4.1 ], [ 33.02, -115.55, 14.5, 4.9 ], [ 33.02, -115.55, 12.3, 5.4 ], [ 33.04, -115.54, 10.2, 5.3 ], [ 33, -115.55, 11, 4.5 ], [ 33.02, -115.55, 13.1, 4.6 ], [ 33.02, -115.55, 10.6, 4 ], [ -11.2, 164.15, 50.8, 4.4 ], [ 19.58, -64.39, 9.9, 4 ], [ 1.96, 94.02, 10, 4.4 ], [ 2.19, 126.84, 91.1, 6.3 ], [ 19.66, -64.26, 32, 4.9 ], [ 37.09, 142.4, 30.3, 4.4 ], [ -6.24, 103.17, 35, 4.6 ], [ -6.2, 103.45, 35, 4.9 ], [ -65.48, -179.78, 10, 5.4 ], [ 13.54, -90.23, 77.1, 4.2 ], [ -10.03, 116.84, 41.1, 4.2 ], [ 55.52, -162.54, 132, 4.3 ], [ 53, -35.21, 10, 4.7 ], [ 52.99, -35.1, 10, 4.6 ], [ -23.23, -175.16, 10, 4.5 ], [ 39.63, 117.38, 14.4, 4.2 ], [ 36.97, 140.98, 85.3, 5 ], [ 30.73, -113.81, 9.1, 4.3 ], [ 42.44, 142.9, 44.7, 5.9 ], [ 23.2, 143.23, 72.5, 4.7 ], [ 30.39, -114.04, 10, 4.2 ], [ 19.01, -155.42, 39.7, 4 ], [ 33.92, 122.03, 10, 4.6 ], [ 11.92, -88.62, 35, 4.7 ], [ 28.35, 104.84, 10, 4.4 ], [ 27.05, 53.09, 9, 4.4 ], [ 19.84, -64.3, 19.8, 4.2 ], [ -35.88, -179.55, 49.6, 4.5 ], [ -12, 99.68, 10, 4.2 ], [ -12.45, 166.78, 250, 4.4 ], [ -7.41, 128.53, 147.8, 4.1 ], [ 36.63, 22.91, 20, 4.1 ], [ -3.47, 101.66, 65.5, 4.7 ], [ -36.97, 78.14, 10, 4.4 ], [ 36.32, 141.14, 42.6, 4 ], [ -33.43, -72.31, 42.1, 4.6 ], [ 3.09, 93.74, 10, 4.7 ], [ 2.64, 128.77, 40.3, 4.2 ], [ -33.44, -179.53, 38, 5.2 ], [ 12.82, -88.23, 83.9, 4.1 ], [ -1.25, 120.32, 50.5, 4.6 ], [ -63.58, 171.32, 10, 5.2 ], [ -27.02, -176.57, 6.7, 4.3 ], [ -28.43, -70.52, 49.5, 4.4 ], [ -27.31, -176.81, 16, 5.5 ], [ 28.34, 82.61, 35, 4.4 ], [ -7.83, 124.33, 35, 4.2 ], [ -10.92, -12.91, 10, 4.2 ], [ 28.35, 82.64, 10, 4.1 ], [ 11.78, -13.32, 10, 4.3 ], [ 52.76, 160.25, 22.1, 4.4 ], [ -56.2, -26.66, 84, 4.3 ], [ 13.91, 121.17, 135.1, 4.3 ], [ 28.51, 82.68, 45.8, 5 ], [ 43.58, 147.09, 67.5, 4.4 ], [ -17.89, -179.44, 583.5, 4.7 ], [ 47.93, -128.07, 10, 4.1 ], [ 42.44, -126.84, 10, 5.9 ], [ -7.03, 155.6, 84.5, 4.6 ], [ -6.05, 147.25, 90.8, 5.3 ], [ -12.06, 109.43, 10, 4.6 ], [ -20.04, -173.66, 35, 5.1 ], [ 11.67, 125.73, 30.6, 4.7 ], [ 29.67, 138.75, 433.4, 4.3 ], [ 37.92, 46.47, 9.9, 4.1 ], [ -6.01, 147.22, 55.1, 4.5 ], [ 42.39, 142.97, 53.2, 5 ], [ -8.8, 118.43, 125.5, 4 ], [ 44.41, 148.08, 79.1, 4.5 ], [ 5.92, 126.26, 112.3, 4.5 ], [ -0.18, 92.03, 15.2, 5.1 ], [ -0.16, 92.05, 9.9, 5.6 ], [ 11.81, -66.43, 67.7, 4.7 ], [ 12.16, 125.34, 53.9, 4.5 ], [ -24.03, -115.37, 10, 4.9 ], [ 11.69, -86.22, 142, 4.8 ], [ 2.66, 128.94, 50, 4.1 ], [ -7.92, 155.29, 10, 4.6 ], [ 22.65, -12.29, 10, 4.1 ], [ 0.12, -78.84, 91.7, 4 ], [ -4.8, 102.97, 76.8, 5.5 ], [ 2.6, 128.91, 50, 4.2 ], [ 2.66, 128.99, 52.1, 4.6 ], [ 36.93, 141.32, 55.9, 5.1 ], [ -5.7, 151.3, 84.3, 4 ], [ 13.27, -90.87, 49.1, 4.4 ], [ -21.56, -175.54, 10, 4.5 ], [ -25.83, 71.38, 10, 4.5 ], [ 6.76, -73.15, 155.9, 4.1 ], [ 35.85, 140.4, 39.1, 5 ], [ 3.34, 92.92, 26.9, 4.9 ], [ -14.76, -176.51, 10, 4.7 ], [ 24.91, 126.77, 12.8, 4.4 ], [ -6.9, 131.17, 51.9, 4.2 ], [ -17.73, -173.76, 24.5, 4.3 ], [ -5.87, 151.17, 68.4, 4.2 ], [ -7.29, 125.82, 440.6, 4.7 ], [ 2.38, 122.46, 502.5, 4.8 ], [ 0.82, 126.38, 55.1, 4.4 ], [ -15.47, -177.26, 5.6, 4.4 ], [ 40.01, 142.91, 60.9, 4.1 ], [ -28.63, -13.37, 10, 4.2 ], [ 39.64, 43.72, 3.5, 4.3 ], [ -4.81, 144.53, 75, 6.2 ], [ 13.44, -90.42, 90.3, 4.3 ], [ -35.07, -178.9, 79.4, 4.5 ], [ -4.29, 143.8, 143.4, 4.6 ], [ -6.87, 130.2, 105.1, 4 ], [ 53.35, -159.9, 5.8, 4.6 ], [ 10.54, 91.71, 7.8, 4.3 ], [ 38.43, 46.65, 13.8, 4.1 ], [ 51.54, -177.11, 42.6, 4.1 ], [ -56.51, 147.55, 10, 4.6 ], [ 47.84, -128.46, 10, 4.5 ], [ 26.6, 92.57, 48.9, 4.8 ], [ 47.79, -128.6, 10, 5.2 ], [ -2.39, 125.03, 20.3, 4.7 ], [ 54.84, 167.96, 30.2, 4.4 ], [ 37.07, 141.85, 38.2, 4.4 ], [ -8.83, 127.08, 35, 4.5 ], [ 14.92, 147.25, 26.7, 4.2 ], [ 38.42, 46.65, 17, 4.2 ], [ 5.06, 94.75, 40.6, 5.2 ], [ -18.46, -174.55, 32.2, 4.7 ], [ -20.38, -69.43, 79.7, 4 ], [ 0.65, 128.99, 35, 4.3 ], [ -8.37, 118.34, 35, 4.1 ], [ -41.1, -92.09, 10, 4.6 ], [ -22.41, 171.48, 105.8, 4.6 ], [ 27.84, 52.05, 10, 4.5 ], [ -15.56, -173.04, 15.1, 5.4 ], [ 2.18, 96.33, 47.2, 4.6 ], [ 2.63, 128.69, 50.6, 5.7 ], [ -1.36, 120.19, 17.8, 4.6 ], [ -1.56, 120.02, 22.5, 4.5 ], [ 15.47, -94.61, 34.1, 4.8 ], [ -13.5, 172.38, 31.3, 5.3 ], [ -1.32, 120.1, 10, 5.8 ], [ -7, 155.82, 86.4, 4.6 ], [ 51.49, 161, 35, 4.4 ], [ -9.38, 120.71, 32.9, 4.8 ], [ -43.23, 175.15, 33, 4.3 ], [ -1.31, 120.23, 49.6, 4.4 ], [ -9.14, 114.2, 90.7, 4.3 ], [ 28.37, 138.7, 531.4, 4.7 ], [ 5.39, 61.68, 10, 4.6 ], [ 20.73, 97.26, 10, 4.1 ], [ 39.12, 142.14, 58.8, 4.2 ], [ -37.47, -179.55, 33, 4 ], [ 4.51, 90.21, 10, 4.3 ], [ 8.35, -103, 10, 5 ], [ 23.3, 121.5, 28.3, 5 ], [ -35.69, -73.7, 11.4, 4.7 ], [ 17.18, -95.81, 10, 4.2 ], [ -8.13, 119.66, 156.9, 4.5 ], [ -6.76, 154.43, 54.5, 4.9 ], [ 35.5, 141.84, 56.5, 4.2 ], [ 36.68, 141.01, 81.1, 4.4 ], [ -37.55, -179.49, 33, 4.4 ], [ -6.75, 154.53, 54.4, 5 ], [ 41.2, 141.95, 73.9, 4.8 ], [ 37.3, 141.85, 41.9, 4.6 ], [ -34.75, 178.19, 33, 4.5 ], [ 38.42, 46.7, 4, 4 ], [ -0.35, -18.71, 10, 5.2 ], [ 32.02, 130.01, 23.4, 4.9 ], [ -6.19, 123.47, 35, 4.3 ], [ -0.33, -18.81, 10, 5.3 ], [ -36.23, -98.75, 10, 5.7 ], [ 7.13, -38.12, 10, 4.9 ], [ -17.69, -177.42, 343.7, 4.4 ], [ 7.37, -36.82, 10.1, 4.8 ], [ 39.97, 140.3, 127.4, 4.3 ], [ -18.44, -177.84, 548, 5 ], [ -17.62, -149.07, 11.4, 4.8 ], [ 13.14, -89.24, 56, 5.2 ], [ -7.45, 146.8, 12.3, 4.6 ], [ 9.75, 57.17, 10, 4.5 ], [ 38.4, 46.69, 10, 5.3 ], [ -33.34, -178.89, 10, 4.1 ], [ -17.05, 167.8, 108.1, 4.3 ], [ 57.91, -32.61, 10, 4.6 ], [ 13.02, 145.58, 49.6, 4.9 ], [ 57.91, -32.67, 10, 5.2 ], [ 57.9, -32.64, 10, 4.6 ], [ -16.79, -173.91, 92.7, 4.7 ], [ 41.12, 140.07, 150, 4.5 ], [ 57.67, -32.59, 10, 4.2 ], [ 37.96, 141.89, 56, 4.5 ], [ 35.61, 82.52, 32.5, 4.7 ], [ 59.63, -152.87, 87.4, 4.3 ], [ -47.58, 100.36, 14.8, 4.4 ], [ -47.51, 100.06, 16.4, 4.9 ], [ 38.28, 46.75, 10, 4.1 ], [ -22.9, 171.46, 35, 4.4 ], [ -22.55, 171.37, 42.6, 4.7 ], [ 37.2, 141.82, 51.8, 4.7 ], [ 38.45, 46.79, 6, 5.1 ], [ 16.11, -94.75, 68.2, 4 ], [ 36.7, 142.17, 27, 4.6 ], [ 39.22, -29.53, 10.1, 4.5 ], [ 28.73, 142.56, 43.5, 5.3 ], [ 23.96, 121.62, 20.3, 5.1 ], [ -15.37, -173.34, 14.5, 4.4 ], [ 39.59, 15.34, 278.4, 4.2 ], [ 33.85, 141.68, 19, 4.6 ], [ 40.12, -122.07, 65.4, 4.3 ], [ 49.78, 145.13, 625.8, 7.7 ], [ 36.55, 70.97, 197.5, 4.5 ], [ -59.16, -26.17, 88, 5.2 ], [ 23.89, 122.61, 25.4, 4.8 ], [ 36.53, 70.1, 212.6, 4.1 ], [ 36.45, 71.18, 59.1, 4.2 ], [ 2.73, 92.07, 10, 4.7 ], [ 34.86, 73.67, 35, 5.4 ], [ 14.51, -93.04, 44.2, 4.3 ], [ 12.31, -88.28, 41.1, 4.3 ], [ 2.71, 90.11, 11.1, 4 ], [ 38.24, 46.54, 10, 4.4 ], [ -17.54, -178.73, 518.3, 4.4 ], [ -37.63, -179.73, 33, 4 ], [ 38.46, 46.86, 14.1, 4.1 ], [ 36.4, 141.99, 35, 4.7 ], [ 38.55, 13.6, 10, 4.4 ], [ -54.18, 142.28, 10, 4.3 ], [ -5.7, -76.9, 120.1, 4.9 ], [ -37.57, -179.6, 33, 4.6 ], [ -5.48, 133.81, 35, 4.4 ], [ 38.15, 46.47, 12.5, 4.6 ], [ 48.24, 147.86, 421.7, 4.5 ], [ 1.49, 127.3, 73.8, 4.4 ], [ 2.48, 91.41, 14.9, 4.3 ], [ 0.14, 120.58, 107.1, 4.7 ], [ -63.17, -157.36, 10, 5.5 ], [ -17.6, -176.59, 337.5, 4.4 ], [ 35.89, 82.5, 18, 4.3 ], [ -10.41, 111.06, 41.5, 4.7 ], [ -37.6, -179.72, 33, 4.5 ], [ 47.85, 152.88, 140.7, 4.2 ] ]; data.addColumn('number','Latitude'); data.addColumn('number','Longitude'); data.addColumn('number','DEPTH.km'); data.addColumn('number','MAG'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartEQ() { var data = gvisDataEQ(); var options = {}; options["width"] = 556; options["height"] = 347; options["displayMode"] = "Markers"; options["colorAxis"] = {colors:['purple', 'red', 'orange', 'grey']}; options["backgroundColor"] = "lightblue"; var chart = new google.visualization.GeoChart( document.getElementById('EQ') ); chart.draw(data,options); } // jsDisplayChart function displayChartEQ() { google.load("visualization", "1", { packages:["geochart"] }); google.setOnLoadCallback(drawChartEQ); } // jsChart displayChartEQ() //--> </script>

Org chart

Org <- gvisOrgChart(Regions, options=list(width=600, height=250,
                               size='large', allowCollapse=TRUE))
print(Org, 'chart')
<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> // jsData function gvisDataOrgChartID2b5731e4cfa () { var data = new google.visualization.DataTable(); var datajson = [ [ "Global", null, "10" ], [ "America", "Global", "2" ], [ "Europe", "Global", "99" ], [ "Asia", "Global", "10" ], [ "France", "Europe", "71" ], [ "Sweden", "Europe", "89" ], [ "Germany", "Europe", "58" ], [ "Mexico", "America", "2" ], [ "USA", "America", "38" ], [ "China", "Asia", "5" ], [ "Japan", "Asia", "48" ] ]; data.addColumn('string','Region'); data.addColumn('string','Parent'); data.addColumn('string','Val'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartOrgChartID2b5731e4cfa() { var data = gvisDataOrgChartID2b5731e4cfa(); var options = {}; options["width"] = 600; options["height"] = 250; options["size"] = "large"; options["allowCollapse"] = true; var chart = new google.visualization.OrgChart( document.getElementById('OrgChartID2b5731e4cfa') ); chart.draw(data,options); } // jsDisplayChart function displayChartOrgChartID2b5731e4cfa() { google.load("visualization", "1", { packages:["orgchart"] }); google.setOnLoadCallback(drawChartOrgChartID2b5731e4cfa); } // jsChart displayChartOrgChartID2b5731e4cfa() //--> </script>

Org chart data

Regions
##     Region  Parent Val Fac
## 1   Global    <NA>  10   2
## 2  America  Global   2   4
## 3   Europe  Global  99  11
## 4     Asia  Global  10   8
## 5   France  Europe  71   2
## 6   Sweden  Europe  89   3
## 7  Germany  Europe  58  10
## 8   Mexico America   2   9
## 9      USA America  38  11
## 10   China    Asia   5   1
## 11   Japan    Asia  48  11

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.

Tree <- gvisTreeMap(Regions,  idvar="Region", parentvar="Parent",
                    sizevar="Val", colorvar="Fac",
                    options=list(width=500, height=350))
print(Tree, 'chart')
<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> // jsData function gvisDataTreeMapID2b54a4fec21 () { var data = new google.visualization.DataTable(); var datajson = [ [ "Global", null, 10, 2 ], [ "America", "Global", 2, 4 ], [ "Europe", "Global", 99, 11 ], [ "Asia", "Global", 10, 8 ], [ "France", "Europe", 71, 2 ], [ "Sweden", "Europe", 89, 3 ], [ "Germany", "Europe", 58, 10 ], [ "Mexico", "America", 2, 9 ], [ "USA", "America", 38, 11 ], [ "China", "Asia", 5, 1 ], [ "Japan", "Asia", 48, 11 ] ]; data.addColumn('string','Region'); data.addColumn('string','Parent'); data.addColumn('number','Val'); data.addColumn('number','Fac'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartTreeMapID2b54a4fec21() { var data = gvisDataTreeMapID2b54a4fec21(); var options = {}; options["width"] = 500; options["height"] = 350; var chart = new google.visualization.TreeMap( document.getElementById('TreeMapID2b54a4fec21') ); chart.draw(data,options); } // jsDisplayChart function displayChartTreeMapID2b54a4fec21() { google.load("visualization", "1", { packages:["treemap"] }); google.setOnLoadCallback(drawChartTreeMapID2b54a4fec21); } // jsChart displayChartTreeMapID2b54a4fec21() //--> </script>

Annotated time line data

Stock
##          Date  Device  Value          Title                  Annotation
## 1  2008-01-01 Pencils   3000           <NA>                        <NA>
## 2  2008-01-02 Pencils  14045           <NA>                        <NA>
## 3  2008-01-03 Pencils   5502           <NA>                        <NA>
## 4  2008-01-04 Pencils  75284           <NA>                        <NA>
## 5  2008-01-05 Pencils  41476 Bought pencils         Bought 200k pencils
## 6  2008-01-06 Pencils 333222           <NA>                        <NA>
## 7  2008-01-01    Pens  40645           <NA>                        <NA>
## 8  2008-01-02    Pens  20374           <NA>                        <NA>
## 9  2008-01-03    Pens  50766           <NA>                        <NA>
## 10 2008-01-04    Pens  14334   Out of stock Ran of stock on pens at 4pm
## 11 2008-01-05    Pens  66467           <NA>                        <NA>
## 12 2008-01-06    Pens  39463           <NA>                        <NA>

Annotated time line

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')
<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> // jsData function gvisDataAnnotatedTimeLineID2b5451790a4 () { var data = new google.visualization.DataTable(); var datajson = [ [ new Date(2008,0,1), 3000, null, null, 40645, null, null ], [ new Date(2008,0,2), 14045, null, null, 20374, null, null ], [ new Date(2008,0,3), 5502, null, null, 50766, null, null ], [ new Date(2008,0,4), 75284, null, null, 14334, "Out of stock", "Ran of stock on pens at 4pm" ], [ new Date(2008,0,5), 41476, "Bought pencils", "Bought 200k pencils", 66467, null, null ], [ new Date(2008,0,6), 333222, null, null, 39463, null, null ] ]; data.addColumn('date','Date'); data.addColumn('number','Pencils'); data.addColumn('string','Title.Pencils'); data.addColumn('string','Annotation.Pencils'); data.addColumn('number','Pens'); data.addColumn('string','Title.Pens'); data.addColumn('string','Annotation.Pens'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartAnnotatedTimeLineID2b5451790a4() { var data = gvisDataAnnotatedTimeLineID2b5451790a4(); var options = {}; options["width"] = 600; options["height"] = 350; options["displayAnnotations"] = true; options["legendPosition"] = "newRow"; var chart = new google.visualization.AnnotatedTimeLine( document.getElementById('AnnotatedTimeLineID2b5451790a4') ); chart.draw(data,options); } // jsDisplayChart function displayChartAnnotatedTimeLineID2b5451790a4() { google.load("visualization", "1", { packages:["annotatedtimeline"] }); google.setOnLoadCallback(drawChartAnnotatedTimeLineID2b5451790a4); } // jsChart displayChartAnnotatedTimeLineID2b5451790a4() //--> </script>

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')
<script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> // jsData function gvisDataGeoChartID2b5e19226c () { var data = new google.visualization.DataTable(); var datajson = [ [ "Germany", 3 ], [ "Brazil", 4 ], [ "United States", 5 ], [ "France", 4 ], [ "Hungary", 3 ], [ "India", 2 ], [ "Iceland", 1 ], [ "Norway", 4 ], [ "Spain", 5 ], [ "Turkey", 1 ] ]; data.addColumn('string','Country'); data.addColumn('number','Profit'); data.addRows(datajson); return(data); } // jsData function gvisDataBarChartID2b51422e7af () { var data = new google.visualization.DataTable(); var datajson = [ [ "Germany", 3 ], [ "Brazil", 4 ], [ "United States", 5 ], [ "France", 4 ], [ "Hungary", 3 ], [ "India", 2 ], [ "Iceland", 1 ], [ "Norway", 4 ], [ "Spain", 5 ], [ "Turkey", 1 ] ]; data.addColumn('string','Country'); data.addColumn('number','Profit'); data.addRows(datajson); return(data); } // jsData function gvisDataMotionChartID2b57f989c7c () { var data = new google.visualization.DataTable(); var datajson = [ [ "Apples", 2008, "West", 98, 78, 20, "2008-12-31" ], [ "Apples", 2009, "West", 111, 79, 32, "2009-12-31" ], [ "Apples", 2010, "West", 89, 76, 13, "2010-12-31" ], [ "Oranges", 2008, "East", 96, 81, 15, "2008-12-31" ], [ "Bananas", 2008, "East", 85, 76, 9, "2008-12-31" ], [ "Oranges", 2009, "East", 93, 80, 13, "2009-12-31" ], [ "Bananas", 2009, "East", 94, 78, 16, "2009-12-31" ], [ "Oranges", 2010, "East", 98, 91, 7, "2010-12-31" ], [ "Bananas", 2010, "East", 81, 71, 10, "2010-12-31" ] ]; data.addColumn('string','Fruit'); data.addColumn('number','Year'); data.addColumn('string','Location'); data.addColumn('number','Sales'); data.addColumn('number','Expenses'); data.addColumn('number','Profit'); data.addColumn('string','Date'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartGeoChartID2b5e19226c() { var data = gvisDataGeoChartID2b5e19226c(); var options = {}; options["width"] = 250; options["height"] = 120; var chart = new google.visualization.GeoChart( document.getElementById('GeoChartID2b5e19226c') ); chart.draw(data,options); } // jsDrawChart function drawChartBarChartID2b51422e7af() { var data = gvisDataBarChartID2b51422e7af(); var options = {}; options["allowHtml"] = true; options["width"] = 250; options["height"] = 260; options["legend"] = "none"; var chart = new google.visualization.BarChart( document.getElementById('BarChartID2b51422e7af') ); chart.draw(data,options); } // jsDrawChart function drawChartMotionChartID2b57f989c7c() { var data = gvisDataMotionChartID2b57f989c7c(); var options = {}; options["width"] = 400; options["height"] = 380; var chart = new google.visualization.MotionChart( document.getElementById('MotionChartID2b57f989c7c') ); chart.draw(data,options); } // jsDisplayChart function displayChartGeoChartID2b5e19226c() { google.load("visualization", "1", { packages:["geochart"] }); google.setOnLoadCallback(drawChartGeoChartID2b5e19226c); } // jsDisplayChart function displayChartBarChartID2b51422e7af() { google.load("visualization", "1", { packages:["corechart"] }); google.setOnLoadCallback(drawChartBarChartID2b51422e7af); } // jsDisplayChart function displayChartMotionChartID2b57f989c7c() { google.load("visualization", "1", { packages:["motionchart"] }); google.setOnLoadCallback(drawChartMotionChartID2b57f989c7c); } // jsChart displayChartGeoChartID2b5e19226c() // jsChart displayChartBarChartID2b51422e7af() // jsChart displayChartMotionChartID2b57f989c7c() //--> </script>

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.

Embedding googleVis output via iframe

  • Embedding googleVis charts is often easiest done via the iframe tag:
  1. Host the googleVis output on-line, e.g. public Dropbox folder
  2. Use the iframe tag on your page:
<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

  • Rook is a web server interface for R
  • Rook doesn’t need any configuration
  • It is an R package, which works out of the box with the R HTTP server
  • You can run web applications on our local desktop.

googleVis with Rook

Screen shot of Rook window

For more details see my blog post.

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

  • knitr is a package by Yihui Xie 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 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 several other file formats, such as html, with pandoc
  • slidy is one of the options to create interactive html-slides with pandoc
  • For more details see my recent blog post and example file.
  • The source file of this presentation is available on github
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

Conclusions

  • Interactive charts and reports open a new way to engage with readers and users, who would find data and figures boring otherwise
  • RStudio, knitr, slidy 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.
  • Rook makes prototyping interactive on-line applications easy

Contact

Thanks

Questions?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment