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

24,516 views
24,952 views

Published on

R's googleVis package makes it easy to use the Google Visualization API with your data. Here we demonstrate how to create a Hans Rosling-style motion chart with some sample data. Just one line of R code automatically generates 165 lines of HTML and JavaScript for us. This "lightning talk" was presented at the July 2011 meeting of the Greater Boston useR meeting.

Published in: Technology, Business
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
24,516
On SlideShare
0
From Embeds
0
Number of Embeds
15,898
Actions
Shares
0
Downloads
96
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

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

  1. 1. Lightning Talk: Move your data(Hans Rosling style) with googleVis + 1 line of R codeGreater Boston useR Group July 13, 2011 by Jeffrey Breen jbreen@cambridge.aero
  2. 2. 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 ● Roslings team at the Gapminder Foundation used animated bubble charts to visualize 50 years of global economic indicators ● Google bought Gapminders Trendalyzer software and development team in 2007 & incorporated “motion charts” into the Google Visualization APILightning Talk: googleVis + 1 line of code = motion charts Greater Boston useR Meeting, July 2011 Slide 2
  3. 3. 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 Rs built-in help web server to preview ● Overrides plot() functionLightning Talk: googleVis + 1 line of code = motion charts Greater Boston useR Meeting, July 2011 Slide 3
  4. 4. 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 RLightning Talk: googleVis + 1 line of code = motion charts Greater Boston useR Meeting, July 2011 Slide 4
  5. 5. googleVis galleryLightning Talk: googleVis + 1 line of code = motion charts Greater Boston useR Meeting, July 2011 Slide 5
  6. 6. motion charts in one lineLoad 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")Lightning Talk: googleVis + 1 line of code = motion charts Greater Boston useR Meeting, July 2011 Slide 6
  7. 7. viewing the resultsUse plot() topreview in browser> plot(M)Uses Rs built-in webserver ● Convenient ● Overcomes Flash security restriction running from local filesLightning Talk: googleVis + 1 line of code = motion charts Greater Boston useR Meeting, July 2011 Slide 7
  8. 8. 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),<!-- MotionChart generated in R 2.13.0 by googleVis 0.2.5 package --> google.setOnLoadCallback(drawChartILoveFruit); 2009,<!-- Wed Jul 13 14:56:33 2011 --> } "East", 93, 80, // jsChart<!-- jsHeader --> displayChartILoveFruit() 13<script type="text/javascript" src="http://www.google.com/jsapi"> ],</script> <!-- jsFooter --> [<script type="text/javascript"> //--> "Bananas", new Date(2009,11,31), </script>// jsData 2009,function gvisDataILoveFruit () <!-- divChart --> "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", <!-- htmlFooter --> "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],Lightning Talk: googleVis + 1 line of code = motion charts Greater Boston useR Meeting, July 2011 Slide 8
  9. 9. What? No airline example?Lightning Talk: googleVis + 1 line of code = motion charts Greater Boston useR Meeting, July 2011 Slide 9
  10. 10. blog post: 20 Years of the U.S. Domestic AirlineMarket In 20 secondshttp://www.cambridge.aero/_blog/main/post/US_Domestic_Airline_Market_In_Motion_1990-2010/Lightning Talk: googleVis + 1 line of code = motion charts Greater Boston useR Meeting, July 2011 Slide 10

×