Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
googleVis at RSS 2012
<?xml version="1.0" encoding="utf-8"?>
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="pandoc" />
<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>
<link rel="stylesheet" type="text/css" media="screen, projection, print"
href="http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css" />
<script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js.gz"
charset="utf-8" type="text/javascript"></script>
</head>
<body>
<div class="section slide level1" id="creating-interactive-web-graphs-with-r-overview-and-googlevis-tutorial">
<h1>Creating interactive web graphs with R: Overview and googleVis tutorial</h1>
<!-- Map generated in R 2.15.1 by googleVis 0.2.17 package -->
<!-- Tue Sep 11 18:57:22 2012 -->
<!-- jsHeader -->
<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()
<!-- jsFooter -->
//-->
</script>
<table cellspacing=5>
<tr>
<td>
<!-- divChart -->
<div id="c1"
style="width: 250px; height: 380px;">
</div>
</td>
<td>
<table border="0">
<tr>
<td>
<!-- divChart -->
<div id="c3"
style="width: 250px; height: 150px;">
</div>
</td>
</tr>
<tr>
<td>
<!-- divChart -->
<div id="c2"
style="width: 250px; height: 260px;">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p><a href="https://plus.google.com/118201313972528070577/posts">Markus Gesmann</a>, <a href="http://www.rssconference.org.uk">RSS Conference 2012</a> , 5 September 2012</p>
</div>
<div class="section slide level1" id="hello---about-me">
<h1>Hello - About me</h1>
<ul>
<li>
Name: <a href="https://plus.google.com/118201313972528070577/posts">Markus Gesmann</a>
</li>
<li>
Profession: Mathematician, working as an analyst for a big <a href="http://www.lloyds.com">insurance market</a>
</li>
<li>
Maintainer and co-author of two R packages:
<ul>
<li>
<a href="http://code.google.com/p/chainladder/">ChainLadder</a>: Statistical methods for the calculation of outstanding claims reserves in general insurance
</li>
<li>
<a href="http://code.google.com/p/google-motion-charts-with-r/">googleVis</a>: Interface between R and the Google Visualisation API
</li>
</ul></li>
<li>
Blog: <a href="http://lamges.blogspot.com">mages’ blog</a>
</li>
</ul>
<a href="http://lamages.blogspot.com"> <img src="http://2.bp.blogspot.com/-NAMnviVPFnw/Tw_OJRa7kII/AAAAAAAAAIo/ERYyvM2dV84/s1600/photo-1.JPG" alt="Blog banner"/></a>
</div>
<div class="section slide level1" id="agenda">
<h1>Agenda</h1>
<ul>
<li>
Introduction and motivation
</li>
<li>
Google Chart Tools
</li>
<li>
R package googleVis
<ul>
<li>
Concepts of googleVis
</li>
<li>
Case studies
</li>
</ul></li>
<li>
How I created this interactive web presentation
</li>
</ul>
</div>
<div class="section slide level1" id="the-perception-of-data-is-changing">
<h1>The perception of data is changing</h1>
<ul>
<li>
More and more data is becoming available.
</li>
<li>
New tools are required to bring data to life,
<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:
<ul>
<li>
outliers,
</li>
<li>
trends or
</li>
<li>
even the obvious.
</li>
</ul></li>
</ul></li>
</ul>
</div>
<div class="section slide level1" id="the-way-we-are-consuming-news-and-data-is-changing">
<h1>The way we are consuming news and data is changing</h1>
<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
<ul>
<li>
<a href="http://www.guardian.co.uk/news/datablog">Guardian Data Blog</a>
</li>
<li>
<a href="http://flowingdata.com">Flowing Data</a>
</li>
<li>
<a href="http://www.r-bloggers.com">R-bloggers</a>
</li>
</ul></li>
</ul>
</div>
<div class="section slide level1" id="no-more-boring-data">
<h1>No more boring data</h1>
<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>
</div>
<div class="section slide level1" id="interactive-charts-have-made-data-sexy">
<h1>Interactive charts have made data ‘sexy’</h1>
<ul>
<li>
Over the years many tools have been developed
<ul>
<li>
<a href="http://d3js.org">Data Driven Documents (d3js)</a>
</li>
<li>
<a href="http://teethgrinder.co.uk/open-flash-chart/">Open Flash Charts</a>
</li>
<li>
<a href="http://flare.prefuse.org">Flare</a>
</li>
<li>
<a href="http://processing.org">Processing</a>
</li>
<li>
<a href="http://www.openlayers.org">OpenLayers</a>
</li>
<li>
<a href="http://www-958.ibm.com/software/data/cognos/manyeyes/">IBM Many Eyes</a>
</li>
<li>
<a href="http://www.tableausoftware.com">Tableau</a>
</li>
<li>
<a href="http://www.qlikview.com">QlikView</a>
</li>
<li>
<a href="https://developers.google.com/chart/">Google Chart Tools</a> - Focus of this talk
</li>
</ul></li>
</ul>
</div>
<div class="section slide level1" id="motivation-for-googlevis">
<h1>Motivation for googleVis</h1>
<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 <a href="https://developers.google.com/chart/interactive/docs/gallery">Visualisation API</a>
</li>
<li>
Ideally we wanted to use <a href="http://www.r-project.org">R</a>, a language we knew
</li>
<li>
Hence, we had to create an interface between the Google Chart Tools and R
</li>
</ul>
</div>
<div class="section slide level1" id="introduction-to-google-chart-tools">
<h1>Introduction to Google Chart Tools</h1>
<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 <a href="https://developers.google.com/terms/">Terms of Service</a> before you start
</li>
</ul>
</div>
<div class="section slide level1" id="motion-chart-example---rendered-output">
<h1>Motion chart example - Rendered output</h1>
<!-- MotionChart generated in R 2.15.1 by googleVis 0.2.17 package -->
<!-- Tue Sep 11 18:57:22 2012 -->
<!-- jsHeader -->
<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()
<!-- jsFooter -->
//-->
</script>
<!-- divChart -->
<div id="MotionChartID2b554fa8c3a"
style="width: 600px; height: 450px;">
</div>
</div>
<div class="section slide level1" id="motion-chart-example---code">
<h1>Motion chart example - Code</h1>
<script src="https://gist.github.com/3595663.js?file=motionchart.html"></script>
</div>
<div class="section slide level1" id="structure-of-google-charts">
<h1>Structure of Google Charts</h1>
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>
</div>
<div class="section slide level1" id="how-hard-can-it-be">
<h1>How hard can it be?</h1>
<ol>
<li>
Transform data into JSON object
</li>
<li>
Wrap some HTML and JavaScript around it
</li>
</ol>
<p>Thus, googleVis started life in August 2010</p>
</div>
<div class="section slide level1" id="what-is-googlevis">
<h1>What is googleVis?</h1>
<ul>
<li>
<a href="http://code.google.com/p/google-motion-charts-with-r/">googleVis</a> is a package for <a href="http://www.r-poject.org/">R</a> and provides an interface between R and the <a href="https://developers.google.com/chart/">Google Chart Tools</a>
</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: <em>Using the Google Visualisation API with R</em>, <a href="http://journal.r-project.org/archive/2011-2/RJournal_2011-2_Gesmann+de~Castillo.pdf">The R Journal, 3(2):40-44, December 2011</a>
</li>
</ul>
</div>
<div class="section slide level1" id="video-tutorial">
<h1>Video tutorial</h1>
<iframe width="420" height="315" src="http://www.youtube.com/embed/Z6NYQdiwTrU" frameborder="0" allowfullscreen></iframe>
<ul>
<li>
Video tutorial by <a href="http://omnibus.uni-freiburg.de/~mh608/">Martin Hilpert</a>, <a href="http://www.frias.uni-freiburg.de/">Freiburg Institute for Advanced Studies</a>
</li>
<li>
Demonstrates how to create motion charts with googleVis
</li>
</ul>
</div>
<div class="section slide level1" id="googlevis-version-0.2.17-provides-interfaces-to">
<h1>googleVis version 0.2.17 provides interfaces to</h1>
<ul>
<li>
Flash based
<ul>
<li>
Motion Charts
</li>
<li>
Annotated Time Lines
</li>
<li>
Geo Maps
</li>
</ul></li>
<li>
HMTL5/SVG based
<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></li>
</ul>
<p>Run <code>demo(googleVis)</code> to see <a href="http://code.google.com/p/google-motion-charts-with-r/wiki/GadgetExamples">examples</a> of all charts and read the <a href="http://cran.r-project.org/web/packages/googleVis/vignettes/googleVis.pdf">vignette</a> for more details.</p>
</div>
<div class="section slide level1" id="world-bank-data-demo">
<h1><a href="http://lamages.blogspot.co.uk/2011/09/accessing-and-plotting-world-bank-data.html">World Bank data demo</a></h1>
<iframe height="550px" frameborder="no" scrolling="no"
src="http://dl.dropbox.com/u/7586336/blogger/WorldBankMotionChart.html"
width="100%">
</iframe>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(googleVis)
<span class="kw">demo</span>(WorldBank)</code></pre>
</div>
<div class="section slide level1" id="key-ideas-of-googlevis">
<h1>Key ideas of googleVis</h1>
<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 <a href="http://www.json.org/">JSON</a> objects with <a href="http://www.omegahat.org/RJSONIO/">RJSONIO</a>
</li>
</ul>
<pre class="sourceCode r"><code class="sourceCode r">(dat &lt;- <span class="kw">data.frame</span>(<span class="dt">x =</span> LETTERS[<span class="dv">1</span>:<span class="dv">2</span>], <span class="dt">y =</span> <span class="dv">1</span>:<span class="dv">2</span>))</code></pre>
<pre><code>## x y
## 1 A 1
## 2 B 2</code></pre>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">cat</span>(<span class="kw">toJSON</span>(dat))</code></pre>
<pre><code>## {
## &quot;x&quot;: [ &quot;A&quot;, &quot;B&quot; ],
## &quot;y&quot;: [ 1, 2 ]
## }</code></pre>
<ul>
<li>
Display the HTML output with the R HTTP help server
</li>
</ul>
</div>
<div class="section slide level1" id="the-googlevis-concept">
<h1>The googleVis concept</h1>
<ul>
<li>
Charts: <em>‘gvis’ + ChartType</em>
</li>
<li>
For a motion chart we have
</li>
<pre class="sourceCode r"><code class="sourceCode r">M &lt;- <span class="kw">gvisMotionChart</span>(data, <span class="dt">idvar=</span><span class="st">&#39;id&#39;</span>, <span class="dt">timevar=</span><span class="st">&#39;date&#39;</span>,
<span class="dt">options=</span><span class="kw">list</span>(), chartid)</code></pre>
<li>
Output of googleVis is a list of list
</li>
<li>
Display the chart by simply plotting the output: <code>plot(M)</code>
<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: <code>M$html$chart</code> or data: <code>M$html$chart[&quot;jsData&quot;]</code>
</li>
</ul></li>
</ul>
</div>
<div class="section slide level1" id="simple-line-chart">
<h1>Simple line chart</h1>
<pre class="sourceCode r"><code class="sourceCode r">df &lt;- <span class="kw">data.frame</span>(<span class="dt">label=</span><span class="kw">c</span>(<span class="st">&quot;A&quot;</span>, <span class="st">&quot;B&quot;</span>, <span class="st">&quot;C&quot;</span>),
<span class="dt">val1=</span><span class="kw">c</span>(<span class="dv">1</span>,<span class="dv">3</span>,<span class="dv">4</span>),
<span class="dt">val2=</span><span class="kw">c</span>(<span class="dv">23</span>,<span class="dv">12</span>,<span class="dv">32</span>))
lc &lt;- <span class="kw">gvisLineChart</span>(df, <span class="dt">chartid=</span><span class="st">&quot;line&quot;</span>)</code></pre>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">plot</span>(lc)</code></pre>
<p><iframe width=620 height=300 frameborder="0" src="http://dl.dropbox.com/u/7586336/RSS2012/line.html">Your browser does not support iframe</iframe></p>
</div>
<div class="section slide level1" id="gvis-chart-structure">
<h1>gvis-Chart structure</h1>
<table>
<tr><td>
List structure <img height=350 src="https://dl.dropbox.com/u/7586336/googleVisExamples/gvisObject.png" alt="gvis object structure" />
</td><td>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">names</span>(lc)</code></pre>
<pre><code>## [1] &quot;type&quot; &quot;chartid&quot; &quot;html&quot; </code></pre>
<pre class="sourceCode r"><code class="sourceCode r">lc$type</code></pre>
<pre><code>## [1] &quot;LineChart&quot;</code></pre>
<pre class="sourceCode r"><code class="sourceCode r">lc$chartid</code></pre>
<pre><code>## [1] &quot;line&quot;</code></pre>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">names</span>(lc$html)</code></pre>
<pre><code>## [1] &quot;header&quot; &quot;chart&quot; &quot;caption&quot; &quot;footer&quot; </code></pre>
</td></tr>
</table>
</div>
<div class="section slide level1" id="gvis-chart-header">
<h1>gvis-Chart header</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">cat</span>(lc$html$header) ## same as print(lc, &#39;header&#39;)</code></pre>
<pre><code>## &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
## &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
## &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
## &lt;head&gt;
## &lt;title&gt;line&lt;/title&gt;
## &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=utf-8&quot; /&gt;
## &lt;style type=&quot;text/css&quot;&gt;
## body {
## color: #444444;
## font-family: Arial,Helvetica,sans-serif;
## font-size: 75%;
## }
## a {
## color: #4D87C7;
## text-decoration: none;
## }
## &lt;/style&gt;
## &lt;/head&gt;
## &lt;body&gt;</code></pre>
</div>
<div class="section slide level1" id="gvis-chart-chart">
<h1>gvis-Chart chart</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">names</span>(lc$html$chart)</code></pre>
<pre><code>## [1] &quot;jsHeader&quot; &quot;jsData&quot; &quot;jsDrawChart&quot; &quot;jsDisplayChart&quot;
## [5] &quot;jsChart&quot; &quot;jsFooter&quot; &quot;divChart&quot; </code></pre>
<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>
</div>
<div class="section slide level1" id="gvis-chart">
<h1>gvis-Chart</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(lc, <span class="st">&quot;jsHeader&quot;</span>)</code></pre>
<pre><code>## &lt;!-- LineChart generated in R 2.15.1 by googleVis 0.2.17 package --&gt;
## &lt;!-- Tue Sep 11 18:57:23 2012 --&gt;
##
##
## &lt;!-- jsHeader --&gt;
## &lt;script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi&quot;&gt;
## &lt;/script&gt;
## &lt;script type=&quot;text/javascript&quot;&gt;</code></pre>
</div>
<div class="section slide level1" id="gvis-chart-1">
<h1>gvis-Chart</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(lc, <span class="st">&quot;jsData&quot;</span>)</code></pre>
<pre><code>##
## // jsData
## function gvisDataline ()
## {
## var data = new google.visualization.DataTable();
## var datajson =
## [
## [
## &quot;A&quot;,
## 1,
## 23
## ],
## [
## &quot;B&quot;,
## 3,
## 12
## ],
## [
## &quot;C&quot;,
## 4,
## 32
## ]
## ];
## data.addColumn(&#39;string&#39;,&#39;label&#39;);
## data.addColumn(&#39;number&#39;,&#39;val1&#39;);
## data.addColumn(&#39;number&#39;,&#39;val2&#39;);
## data.addRows(datajson);
## return(data);
## }</code></pre>
</div>
<div class="section slide level1" id="gvis-chart-2">
<h1>gvis-Chart</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(lc, <span class="st">&quot;jsDrawChart&quot;</span>)</code></pre>
<pre><code>##
## // jsDrawChart
## function drawChartline() {
## var data = gvisDataline();
## var options = {};
## options[&quot;allowHtml&quot;] = true;
##
## var chart = new google.visualization.LineChart(
## document.getElementById(&#39;line&#39;)
## );
## chart.draw(data,options);
##
##
## }
## </code></pre>
</div>
<div class="section slide level1" id="gvis-chart-3">
<h1>gvis-Chart</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(lc, <span class="st">&quot;jsDisplayChart&quot;</span>)</code></pre>
<pre><code>##
## // jsDisplayChart
## function displayChartline()
## {
## google.load(&quot;visualization&quot;, &quot;1&quot;, { packages:[&quot;corechart&quot;] });
## google.setOnLoadCallback(drawChartline);
## }</code></pre>
</div>
<div class="section slide level1" id="gvis-chart-4">
<h1>gvis-Chart</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(lc, <span class="st">&quot;jsChart&quot;</span>)</code></pre>
<pre><code>##
## // jsChart
## displayChartline()</code></pre>
</div>
<div class="section slide level1" id="gvis-chart-5">
<h1>gvis-Chart</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(lc, <span class="st">&quot;jsFooter&quot;</span>)</code></pre>
<pre><code>##
## &lt;!-- jsFooter --&gt;
## //--&gt;
## &lt;/script&gt;</code></pre>
</div>
<div class="section slide level1" id="gvis-chart-6">
<h1>gvis-Chart</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(lc, <span class="st">&quot;divChart&quot;</span>)</code></pre>
<pre><code>##
## &lt;!-- divChart --&gt;
##
## &lt;div id=&quot;line&quot;
## style=&quot;width: 600px; height: 500px;&quot;&gt;
## &lt;/div&gt;</code></pre>
</div>
<div class="section slide level1" id="gvis-chart-7">
<h1>gvis-Chart</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(lc, <span class="st">&quot;caption&quot;</span>)</code></pre>
<pre><code>## &lt;div&gt;&lt;span&gt;Data: data &amp;#8226; Chart ID: &lt;a href=&quot;Chart_line.html&quot;&gt;line&lt;/a&gt;&lt;/span&gt;&lt;br /&gt;</code></pre>
</div>
<div class="section slide level1" id="gvis-chart-8">
<h1>gvis-Chart</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(lc, <span class="st">&quot;footer&quot;</span>)</code></pre>
<pre><code>##
## &lt;!-- htmlFooter --&gt;
## &lt;span&gt;
## R version 2.15.1 (2012-06-22) &amp;#8226; &lt;a href=&quot;http://code.google.com/p/google-motion-charts-with-r/&quot;&gt;googleVis-0.2.17&lt;/a&gt;
## &amp;#8226; &lt;a href=&quot;https://developers.google.com/terms/&quot;&gt;Google Terms of Use&lt;/a&gt; &amp;#8226; &lt;a href=&quot;https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart.html#Data_Policy&quot;&gt;Data Policy&lt;/a&gt;
## &lt;/span&gt;&lt;/div&gt;
## &lt;/body&gt;
## &lt;/html&gt;</code></pre>
</div>
<div class="section slide level1" id="line-chart-with-options-set">
<h1>Line chart with options set</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(<span class="kw">gvisLineChart</span>(df, <span class="dt">xvar=</span><span class="st">&quot;label&quot;</span>, <span class="dt">yvar=</span><span class="kw">c</span>(<span class="st">&quot;val1&quot;</span>,<span class="st">&quot;val2&quot;</span>),
<span class="dt">options=</span><span class="kw">list</span>(<span class="dt">title=</span><span class="st">&quot;Hello World&quot;</span>, <span class="dt">legend=</span><span class="st">&quot;bottom&quot;</span>,
<span class="dt">titleTextStyle=</span><span class="st">&quot;{color:&#39;red&#39;, fontSize:18}&quot;</span>,
<span class="dt">vAxis=</span><span class="st">&quot;{gridlines:{color:&#39;red&#39;, count:3}}&quot;</span>,
<span class="dt">hAxis=</span><span class="st">&quot;{title:&#39;My Label&#39;, titleTextStyle:{color:&#39;blue&#39;}}&quot;</span>,
<span class="dt">series=</span><span class="st">&quot;[{color:&#39;green&#39;, targetAxisIndex: 0}, </span>
<span class="st"> {color: &#39;blue&#39;,targetAxisIndex:1}]&quot;</span>,
<span class="dt">vAxes=</span><span class="st">&quot;[{title:&#39;Value 1 (%)&#39;, format:&#39;#,###%&#39;}, </span>
<span class="st"> {title:&#39;Value 2 (\U00A3)&#39;}]&quot;</span>,
<span class="dt">curveType=</span><span class="st">&quot;function&quot;</span>, <span class="dt">width=</span><span class="dv">500</span>, <span class="dt">height=</span><span class="dv">300</span>
)), <span class="st">&#39;chart&#39;</span>)</code></pre>
<!-- 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">
// 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()
<!-- jsFooter -->
//-->
</script>
<!-- divChart -->
<div id="LineChartID2b5d0c5f6c"
style="width: 500px; height: 300px;">
</div>
</div>
<div class="section slide level1" id="on-line-changes">
<h1>On-line changes</h1>
<p>You can enable the chart editor which allows users to change the chart.</p>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(<span class="kw">gvisLineChart</span>(df,
<span class="dt">options=</span><span class="kw">list</span>(<span class="dt">gvis.editor=</span><span class="st">&quot;Edit me!&quot;</span>)),
<span class="st">&#39;chart&#39;</span>)</code></pre>
<!-- 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">
// 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()
<!-- jsFooter -->
//-->
</script>
<!-- divChart -->
<input type='button' onclick='openEditorLineChartID2b5274cb225()' value='Edit me!'><br />
<div id="LineChartID2b5274cb225"
style="width: 600px; height: 500px;">
</div>
</div>
<div class="section slide level1" id="change-motion-chart-settings">
<h1>Change motion chart settings</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(<span class="kw">gvisMotionChart</span>(Fruits, <span class="st">&quot;Fruit&quot;</span>, <span class="st">&quot;Year&quot;</span>), <span class="st">&quot;chart&quot;</span>)</code></pre>
<!-- MotionChart 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">
// 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()
<!-- jsFooter -->
//-->
</script>
<!-- divChart -->
<div id="MotionChartID2b51c43af4b"
style="width: 600px; height: 500px;">
</div>
<p>Can change displaying settings via the browser. The state string from the ‘Advanced’ tab can be used to set those settings via R.</p>
</div>
<div class="section slide level1" id="motion-chart-with-initial-settings-changed">
<h1>Motion chart with initial settings changed</h1>
<pre class="sourceCode r"><code class="sourceCode r">myStateSettings &lt;- <span class="st">&#39;</span>
<span class="st">{&quot;xZoomedDataMin&quot;:1199145600000,&quot;colorOption&quot;:&quot;2&quot;,</span>
<span class="st"> &quot;xZoomedDataMax&quot;:1262304000000,&quot;iconType&quot;:&quot;LINE&quot;,</span>
<span class="st"> &quot;dimensions&quot;:{&quot;iconDimensions&quot;:[&quot;dim0&quot;]},</span>
<span class="st"> &quot;xAxisOption&quot;:&quot;_TIME&quot;,&quot;orderedByX&quot;:false,&quot;playDuration&quot;:15000,</span>
<span class="st"> &quot;xZoomedIn&quot;:false,&quot;time&quot;:&quot;2010&quot;,&quot;yZoomedDataMin&quot;:0,</span>
<span class="st"> &quot;yZoomedIn&quot;:false,&quot;orderedByY&quot;:false,&quot;yZoomedDataMax&quot;:100}</span>
<span class="st">&#39;</span>
<span class="kw">print</span>(<span class="kw">gvisMotionChart</span>(Fruits, <span class="st">&quot;Fruit&quot;</span>, <span class="st">&quot;Year&quot;</span>,
<span class="dt">options=</span><span class="kw">list</span>(<span class="dt">state=</span>myStateSettings, <span class="dt">height=</span><span class="dv">300</span>)), <span class="st">&#39;chart&#39;</span>)</code></pre>
<!-- MotionChart 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">
// 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()
<!-- jsFooter -->
//-->
</script>
<!-- divChart -->
<div id="MotionChartID2b51fa9736c"
style="width: 600px; height: 300px;">
</div>
</div>
<div class="section slide level1" id="displaying-geographical-information">
<h1>Displaying geographical information</h1>
<p>Plot countries’ S&amp;P credit rating sourced from Wikipedia</p>
<pre class="sourceCode r"><code class="sourceCode r">## Get and prepare data
<span class="kw">library</span>(XML)
url &lt;- <span class="st">&quot;http://en.wikipedia.org/wiki/List_of_countries_by_credit_rating&quot;</span>
page &lt;- <span class="kw">readLines</span>(url)
x &lt;- <span class="kw">readHTMLTable</span>(page, <span class="dt">which=</span><span class="dv">3</span>)
<span class="kw">levels</span>(x$Rating) &lt;- <span class="kw">substring</span>(<span class="kw">levels</span>(x$Rating), <span class="dv">4</span>,
<span class="kw">nchar</span>(<span class="kw">levels</span>(x$Rating)))
x$Ranking &lt;- x$Rating
<span class="kw">levels</span>(x$Ranking) &lt;- <span class="kw">nlevels</span>(x$Rating):<span class="dv">1</span>
x$Ranking &lt;- <span class="kw">as.character</span>(x$Ranking)
x$Rating &lt;- <span class="kw">paste</span>(x$Country, x$Rating, <span class="dt">sep=</span><span class="st">&quot;: &quot;</span>)
## Create a geo map
G &lt;- <span class="kw">gvisGeoMap</span>(x, <span class="st">&quot;Country&quot;</span>, <span class="st">&quot;Ranking&quot;</span>, <span class="st">&quot;Rating&quot;</span>,
<span class="dt">options=</span><span class="kw">list</span>(<span class="dt">gvis.editor=</span><span class="st">&quot;S&amp;P&quot;</span>,
<span class="dt">colors=</span><span class="st">&quot;[0x91BFDB, 0XFC8D59]&quot;</span>,
<span class="dt">gvis.editor=</span><span class="st">&quot;Edit me&quot;</span>))</code></pre>
</div>
<div class="section slide level1" id="chart-countries-sp-credit-rating">
<h1>Chart countries’ S&amp;P credit rating</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(G, <span class="st">&quot;chart&quot;</span>)</code></pre>
<!-- GeoMap generated in R 2.15.1 by googleVis 0.2.17 package -->
<!-- Tue Sep 11 18:57:25 2012 -->
<!-- jsHeader -->
<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()
<!-- jsFooter -->
//-->
</script>
<!-- divChart -->
<input type='button' onclick='openEditorGeoMapID2b52dd8c7b1()' value='S&P'><br />
<div id="GeoMapID2b52dd8c7b1"
style="width: 556px; height: 347px;">
</div>
</div>
<div class="section slide level1" id="geo-chart-with-markers">
<h1>Geo chart with markers</h1>
<p>Display earth quake information of last 30 days</p>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(XML)
eq &lt;- <span class="kw">readHTMLTable</span>(<span class="kw">readLines</span>(<span class="st">&quot;http://www.iris.edu/seismon/last30.html&quot;</span>),
<span class="dt">colClasses=</span><span class="kw">c</span>(<span class="st">&quot;factor&quot;</span>, <span class="kw">rep</span>(<span class="st">&quot;numeric&quot;</span>, <span class="dv">4</span>), <span class="st">&quot;factor&quot;</span>), <span class="dt">which=</span><span class="dv">2</span>)
eq$loc=<span class="kw">paste</span>(eq$LAT, eq$LON, <span class="dt">sep=</span><span class="st">&quot;:&quot;</span>)
G &lt;- <span class="kw">gvisGeoChart</span>(eq, <span class="st">&quot;loc&quot;</span>, <span class="st">&quot;DEPTH km&quot;</span>, <span class="st">&quot;MAG&quot;</span>,
<span class="dt">options=</span><span class="kw">list</span>(<span class="dt">displayMode=</span><span class="st">&quot;Markers&quot;</span>,
<span class="dt">colorAxis=</span><span class="st">&quot;{colors:[&#39;purple&#39;, &#39;red&#39;, &#39;orange&#39;, &#39;grey&#39;]}&quot;</span>,
<span class="dt">backgroundColor=</span><span class="st">&quot;lightblue&quot;</span>), <span class="dt">chartid=</span><span class="st">&quot;EQ&quot;</span>)
<span class="kw">print</span>(G, <span class="st">&#39;chart&#39;</span>)</code></pre>
<!-- GeoChart generated in R 2.15.1 by googleVis 0.2.17 package -->
<!-- Tue Sep 11 18:57:28 2012 -->
<!-- jsHeader -->
<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,