Move Data with GoogleVis

Lightning Talk:

Move your data
(Hans Rosling style)
with googleVis
+ 1 line of R code

Greater Boston useR Group
July 13, 2011

by

Jeffrey Breen
jbreen@cambridge.aero

Hans and TED and Gapminder and Google

● Swedish polymath Hans Rosling gave an amazing
presentation on economic development at the
2006 TED Conference
● http://www.ted.com/index.php/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html

● Rosling's team at the Gapminder Foundation used
animated bubble charts to visualize 50 years of
global economic indicators
● Google bought Gapminder's Trendalyzer software
and development team in 2007 & incorporated
“motion charts” into the Google Visualization API

Lightning Talk: googleVis + 1 line of code = motion charts Greater Boston useR Meeting, July 2011 Slide 2

about the googleVis package

● Written by Markus Gesmann & Diego de Castillo
● Available on CRAN
● Allows you to create a visualization with just one
line of code
● Automatically converts your data to JSON via
RJSONIO package
● Writes all the JavaScript and HTML for you
● Uses R's built-in help web server to preview
● Overrides plot() function


googleVis supports many visualizations

gvisAnnotatedTimeLine() Google Annotated Time Line with R
gvisAreaChart() Google Area Chart with R
gvisBarChart() Google Bar Chart with R
gvisColumnChart() Google Column Chart with R
gvisGauge() Google Gauge with R
gvisGeoMap() Google Geo Map with R
gvisIntensityMap() Google Intensity Map with R
gvisLineChart() Google Line Chart with R
gvisMap() Google Maps with R
gvisMotionChart() Google Motion Chart with R
gvisOrgChart() Google Org Chart with R
gvisPieChart() Google Pie Chart with R
gvisScatterChart() Google Scatter Chart with R
gvisTable() Google Table Chart with R
gvisTreeMap() Google Tree Map with R

googleVis gallery


motion charts in one line

Load the library and some supplied (sample) data
> library(googleVis)
> data(Fruits)

Create the motion chart
> M = gvisMotionChart(data=Fruits, idvar="Fruit",
timevar="Date", chartid="ILoveFruit")


viewing the results

Use plot() to
preview in browser
> plot(M)

Uses R's built-in web
server
● Convenient
● Overcomes Flash
security restriction
running from local
files


one line of R = 165 lines of HTML + JavaScript
> print(M) [ data.addColumn('number','Profit');
"Oranges", data.addRows(datajson);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" return(data);
new Date(2008,11,31),
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> }
2008,
<html xmlns="http://www.w3.org/1999/xhtml">
"East",
<head> // jsDrawChart
96,
<title>ILoveFruit</title> function drawChartILoveFruit() {
81,
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> var data = gvisDataILoveFruit()
15
<style type="text/css"> var chart = new google.visualization.MotionChart(
],
body { document.getElementById('ILoveFruit')
[
color: #444444; );
"Bananas",
font-family: Arial,Helvetica,sans-serif; var options ={};
new Date(2008,11,31),
font-size: 75%; options["width"] = 600;
2008,
} options["height"] = 500;
"East",
a{ chart.draw(data,options);
85,
color: #4D87C7; }
76,
text-decoration: none;
9
} // jsDisplayChart
],
</style> function displayChartILoveFruit()
[
</head> {
"Oranges",
<body> google.load("visualization", "1", { packages:["motionchart"] });
new Date(2009,11,31),
 google.setOnLoadCallback(drawChartILoveFruit);
2009,
 }
"East",
93,
80, // jsChart
 displayChartILoveFruit()
13
<script type="text/javascript" src="http://www.google.com/jsapi">
],
</script> 
[
<script type="text/javascript"> //-->
"Bananas",
new Date(2009,11,31), </script>
// jsData
2009,
function gvisDataILoveFruit () 
"East",
{ <div id="ILoveFruit"
94,
var data = new google.visualization.DataTable(); style="width: 600px; height: 500px;">
78,
var datajson = </div>
16
[ <div><span>Data: Fruits • Chart ID: <a
],
[ href="Chart_ILoveFruit.html">ILoveFruit</a></span><br />
[
"Apples", 
"Oranges",
new Date(2008,11,31), <span>
new Date(2010,11,31),
2008, R version 2.13.0 (2011-04-13) • <a
2010,
"West", href="http://code.google.com/p/google-motion-charts-with-r/">googleVis-
"East",
98, 0.2.5</a>
98,
78, • <a href="http://code.google.com/apis/visualization/terms.html">Google
91,
20 Terms of Use</a>
7
], </span></div>
],
[ </body>
[
"Apples", </html>
"Bananas",
new Date(2009,11,31),
new Date(2010,11,31),
2009,
2010,
"West",
"East",
111,
81,
79,
71,
32
10
],
]
[
];
"Apples",
data.addColumn('string','Fruit');
new Date(2010,11,31),
data.addColumn('date','Date');
2010,
data.addColumn('number','Year');
"West",
data.addColumn('string','Location');
89,
data.addColumn('number','Sales');
76,
data.addColumn('number','Expenses');
13
],

What? No airline example?


blog post: 20 Years of the U.S. Domestic Airline
Market In 20 seconds
http://www.cambridge.aero/_blog/main/post/US_Domestic_Airline_Market_In_Motion_1990-2010/


Move Data with GoogleVis

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a Move Data with GoogleVis

Similar a Move Data with GoogleVis (20)

Más de Jeffrey Breen

Más de Jeffrey Breen (6)

Último

Último (20)

Move Data with GoogleVis