Google Visualisation API googlev is

Size: px

Start display at page:

Download "1 3 1.1............................................ 3 1.2 Google Visualisation API................................ 3 2 googlev is 5 2.1..............."

まないさやま
7 years ago
Views:

1 Google Visualisation API R googlevis Markus Gesmann, Diego de Castillo googlev is R Google Visualisation API Google Visualisation API TED Hans Rosling googlev is R Google Google Visualisation API googlev is Google JavaScript html googlev is R HTTP markus.gesmann@gmail.com decastillo@gmail.com arakit@kansai-u.ac.jp 1

Visualisation API Google Visualisation API TED Hans Rosling googlev is R Google

2 Google Visualisation API googlev is googlev is gvis gvismerge googlev is gvis googlev is WordPress googlev is Google, Blogger googlev is googlev is R.rsp RApache brew googlev is googlev is 22 5 R

6.2........................ 17 3 googlev is 17 3.1 gvis..................... 17 3.2 googlev is WordPress......................... 18 3.3 googlev is Google, Blogger.............. 19 3.4 googlev is.

3 Hans Rosling 50 TED [Ros06] Rosling Gapminder [Fou10b] 1 Rosling 1 Gapminder Google 1 Google Visualisation API [Inc12e] Guardian taz.de Die Tageszeitung 2010 R/Rmetrics Sebastián Peréz Saaibi [Saa10] Google R R.rsp [Ben12] googlevis [GdC12],[GdC11] Many Eyes [RtICsg10] Open Flash Chart (Flash) [JG10] OpenLayers (JavaScript) [Fou10c] Processing (Java) [FR10] simile (AJAX) [DKM10] FLARE (Action- Script) [Lab10] 1.2 Google Visualisation API Google Visualisation API [Inc12e] Google API Google Public Data Explorer [Inc12c] HTML Google Visualisation API DataTable [Inc12d] RJSONIO [Lan12] R JSON [JSO06] DataTable 3

rsp [Ben12] googlevis [GdC12],[GdC11] Many Eyes [RtICsg10] Open Flash Chart (Flash) [JG10] OpenLayers (JavaScript) [Fou10c] Processing (Java) [FR10] simile

4 1: Google plot(gvismotionchart(fruits, idvar= Fruit, timevar= Year )) Google visualisation gallery [Inc10a] html 1 1 <html> 2 <head> 3 <script type="text/javascript" 4 src=" 5 </script> 6 <script type="text/javascript"> 7 google.load( visualization, 1, 8 { packages :[ motionchart ]}); 9 google.setonloadcallback(drawchart); 10 function drawchart() { 11 var data=new google.visualization.datatable(); 12 data.addcolumn( string, Fruit ); 13 data.addcolumn( date, Date ); 14 data.addcolumn( number, Sales ); 15 data.addcolumn( number, Expenses ); 16 data.addcolumn( string, Location ); 17 data.addrows([ 18 [ Apples,new Date(1988,0,1),1000,300, East ], 19 [ Oranges,new Date(1988,0,1),1150,200, West ], 20 [ Bananas,new Date(1988,0,1),300,250, West ], 21 [ Apples,new Date(1989,6,1),1200,400, East ], 22 [ Oranges,new Date(1989,6,1),750,150, West ], 23 [ Bananas,new Date(1989,6,1),788,617, West ] 4

setonloadcallback(drawchart); 10 function drawchart() { 11 var data=new google.visualization.datatable(); 12 data.addcolumn( string, Fruit ); 13 data.addcolumn( date, Date ); 14 data.

5 24 ]); 25 var chart=new google.visualization.motionchart( 26 document.getelementbyid( chart_div )); 27 chart.draw(data, {width: 600, height:300}); 28 } 29 </script> 30 </head> 31 <body> 32 <div id="chart_div" 33 style="width:600px; height:300px;"> 34 </div> 35 </body> 36 </html> 1 html 5 2 ˆ Google AJAX ( 4 ) Visualisation API 7 8 ) ˆ DataTable ˆ ˆ width height 27 ˆ HTML <div> Google Visualisation API 2 API Google Visualization API [Inc12a] 2 googlev is googlev is R Google Visualisation API Google Visualisation API R Motion Chart Annotated Time Line Geo Map Map Geo Chart Intensity Map Table Gauge Treemap Line Chart Bar Chart Bubble Chart Column Chart Area Chart Stepped Area Combo Chart Scatter Chart Candlestick Chart Pie Chart Org Chart 2 3 googlev is Google JavaScript HTML 1 Policy 2 charts.html 3 5

) Visualisation API 7 8 ) ˆ DataTable 11 24 ˆ 25 26 ˆ width height 27 ˆ HTML <div> 32 34 Google Visualisation API 2 API Google Visualization API [Inc12a] 2 googlev is googlev is R Google

6 2: demo(googlevis) gvismotionchart gvisannotatedtimeline gvisgeomap gvistreemap gvistable gvismap 2.1 googlev is CRAN R> install.packages( googlevis ) library(googlevis) R> library(googlevis) Welcome to googlevis version Please read the Google API Terms of Use before you use the package: Type?googleVis to access the overall documentation and 6

packages( googlevis ) library(googlevis) R> library(googlevis) Welcome to googlevis version 0.2.

7 vignette( googlevis ) for the package vignette. You can execute a demo of the package via: demo(googlevis) More information is available on the googlevis project web-site: Contact: <rvisualisation@gmail.com> To suppress the this message use: suppresspackagestartupmessages(library(googlevis)) 2.2 googlev is googlev is 1 API googlev is 4 2 gvis+ gvismotionchart(data, idvar= id, timevar= date, options=list(), chartid) data idvar timevar id options 14 Google Visualisation API R> help( gvismotionchart ) 3: gis 4 7

com> To suppress the this message use: suppresspackagestartupmessages(library(googlevis)) 2.

8 chartid id 1 id googlev is id html 3 rsp 20 RApache 21 Google googlev is gvis list print print.gvis plot plot.gvis Fruits 2.3 Google API Fruits R> data(fruits) R> Fruits Fruit Year Location Sales Expenses Profit Date 1 Apples 2008 West Apples 2009 West Apples 2010 West Oranges 2008 East Bananas 2008 East Oranges 2009 East Bananas 2009 East Oranges 2010 East Bananas 2010 East id F ruit Y ear Y ear Date R> M <- gvismotionchart(fruits, idvar="fruit", timevar="year") gvismotionchart R> str(m) List of 3 $ type : chr "MotionChart" $ chartid: chr "MotionChartID46d3641c73d" $ html :List of 4..$ header : chr "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0..$ chart : Named chr [1:7] "\n<span> \nr version

76 13 2010-12-31 4 Oranges 2008 East 96 81 15 2008-12-31 5 Bananas 2008 East 85 76 9 2008-12-31 6 Oranges 2009 East 93 80 13 2009-12-31 7 Bananas 2009 East 94 78 16 2009-12-31 8 Oranges 2010 East 98

9 - attr(*, "class")= chr [1:2] "gvis" "list" 2 type id chartid 5 R> M$type [1] "MotionChart" R> M$chartid [1] "MotionChartID46d3641c73d" html header chart caption footer html html html R> print(m, tag= header ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>motionchartid46d3641c73d</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> M$html$header header tag print cat(m$html$header) Google visualisation html JavaScript HTML JavaScript id print.gvis R> names(m$html$chart) [1] "jsheader" "jsdata" "jsdrawchart" "jsdisplaychart" [5] "jschart" "jsfooter" "divchart" R> print(m, tag= chart ) ## cat(m$html$chart) 5 9

org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.

10   <script type="text/javascript" src=" </script> <script type="text/javascript"> // jsdata function gvisdatamotionchartid46d3641c73d () { var data = new google.visualization.datatable(); var datajson = [ [ "Apples", 2008, "West", 98, 78, 20, " " ], [ "Apples", 2009, "West", 111, 79, 32, " " ], [ "Apples", 2008, "West", 98, 78, 20, " " ], [ "Apples", 2009, "West", 111, 79, 32, " " ], 10

com/jsapi"> </script> <script type="text/javascript"> // jsdata function gvisdatamotionchartid46d3641c73d () { var data = new google.

11 [ "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, 11

"2008-12-31" ], [ "Oranges", 2009, "East", 93, 80, 13, "2009-12-31" ], [

12 " " ], [ "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.addcolumn( string, Date ); data.addrows(datajson); return(data); } // jsdrawchart function drawchartmotionchartid46d3641c73d() { var data = gvisdatamotionchartid46d3641c73d(); var options = {}; options["width"] = 600; options["height"] = 500; var chart = new google.visualization.motionchart( document.getelementbyid( MotionChartID46d3641c73d ) ); chart.draw(data,options); } // jsdisplaychart function displaychartmotionchartid46d3641c73d() { google.load("visualization", "1", { packages:["motionchart"] }); google.setonloadcallback(drawchartmotionchartid46d3641c73d); } // jschart displaychartmotionchartid46d3641c73d()  //--> </script> 12

addrows(datajson); return(data); } // jsdrawchart function drawchartmotionchartid46d3641c73d() { var data = gvisdatamotionchartid46d3641c73d(); var options = {}; options["width"] = 600;

13  <div id="motionchartid46d3641c73d" style="width: 600px; height: 500px;"> </div> jschart R> cat(m$html$chart[ jschart ]) # print(m, jschart ) // jschart displaychartmotionchartid46d3641c73d() html html R> print(m, tag= caption ) <div><span>data: Fruits Chart ID: <a href="chart_motioncha R> print(m, tag= footer )  <span> R version RC ( r58819) <a href=" <a href=" Term </span></div> </body> </html> 2.4 gvis R> plot(m) # gvis plot id HTML R HTTP & id R tempdir() file print html R> print(m, file="mygooglevischart.html") 13

footer ) <!-- htmlfooter --> <span> R version 2.15.0 RC (2012-03-23 r58819) <a href="http://co <a href="https://developers.google.

14 6 Tony Breyal stackoverflow.com 1. manager04.html html 5. OK googlev is html 2.5 gvismerge gvismerge 2 gvis 1 HTML 2 horizontal vertival gvismerge gvis gvismerge 4 R> G <- gvisgeochart(exports, "Country", "Profit", + options=list(width=200, height=100)) R> T <- gvistable(exports, + options=list(width=200, height=270)) R> M <- gvismotionchart(fruits, "Fruit", "Year", + options=list(width=400, height=370)) R> GT <- gvismerge(g,t, horizontal=false) R> GTM <- gvismerge(gt, M, horizontal=true, + tableoptions="bgcolor=\"#cccccc\" cellspacing=10") R> plot(gtm) 2.6 googlev is 7 Google Visualisation API option R> df <- data.frame(country=c("us", "GB", "BR"), + val1=c(1,3,4), val2=c(23,12,32)) R> Line <- gvislinechart(df, xvar="country", yvar=c("val1","val2"), + options=list( + title="hello World", 6 7 googlev is 14

$gvismerge(gt, M, horizontal=true, + tableoptions="bgcolor=\"#cccccc\" cellspacing=10") R> plot(gtm) 2.6 googlev is 7 Google Visualisation API option R> df <- data.$

15 + titletextstyle="{color: red, + fontname: Courier, + fontsize:16}", + backgroundcolor="#d3d3d3", + vaxis="{gridlines:{color: red, count:3}}", + haxis="{title: Country, titletextstyle:{color: blue }}", + titletextstyle:{color: blue }}", + series="[{color: green, targetaxisindex: 0}, + {color: orange,targetaxisindex:1}]", + vaxes="[{title: val1 }, {title: val2 }]", + legend="bottom", + curvetype="function", + width=500, + height=300 + )) R> plot(line) 4: gvismerge 3 = width=500 { } 2 [ ] 6 R> Geo <- gvisgeochart(citypopularity, locationvar= City, + colorvar= Popularity, + options=list(region= US, height=350, + displaymode= markers, + coloraxis="{values:[200,400,600,800], + colors:[\ red, \ pink\, \ orange,\ green ]}") + ) 15

$locationvar= City, + colorvar= Popularity, + options=list(region= US, height=350, + displaymode= markers, + coloraxis="{values:[200,400,600,800], + colors:[\ red, \ pink\, \ orange,\$

16 5: R> plot(geo) 6: gvis.editor 7 gvis.editor Edit me! 8 R> Editor <- gvislinechart(df, options=list(gvis.editor= Edit me! )) R> plot(editor) 8 Google Visualization API Reference html#google visualization charteditor 16

)) R> plot(editor) 8 Google Visualization API Reference http://code.

17 7: options = list (gvis.editor = Edit me! ) googlev is googlevis JSON JSON R> df <- data.frame("year"=c(2010,2011), "Lloyd\\ s"=c(86.1, 93.3), + "Munich Re\\ s R/I"=c(95.3, 100.5), + check.names=false) R> df Year Lloyd\\ s Munich Re\\ s R/I R> CR <- gviscolumnchart(df, options=list(vaxis= {baseline:0}, + title="combined Ratio %", + legend="{position: bottom }")) R> plot(cr) 3 googlev is 3.1 gvis googlev is gvismotionchart gvismotionchart 17

$names=false) R> df Year Lloyd\\ s Munich Re\\ s R/I 1 2010 86.1 95.3 2 2011 93.3 100.$

18 8: R> print(m, chart ) ## cat(m$html$chart) html R & R> print(m, chart, file= myfilename ) 3.2 googlev is WordPress WordPress googlev is WordPress WordPress JavaScript googlev is WordPress JavaScript WordPress 1 custom fields shortcode 9 googlev is R R> M <- gvismotionchart(fruits, "Fruit", "Year", options=list(width=400, height=370)) R> print(m, chart ) WordPress value Fruits [cf]fruits[/cf]

WordPress 1 custom fields shortcode 9 googlev is R R> M <- gvismotionchart(fruits, "Fruit", "Year",

19 9: googlev is WordPress 3.3 googlev is Google, Blogger Google Google Google Blogger Google Code wiki Google Google XML HTML Javascript Google Hello World Wikipedia <?xml version="1.0" encoding="utf-8"?> <Module> <ModulePrefs title="simple hello world example" /> <Content type="html"> <![CDATA[ Hello, world! ]]> </Content> </Module> googlev is creategooglegadget gvis XML R> M <- gvismotionchart(fruits, "Fruit", "Year") R> G <- creategooglegadget(m) R> cat(g, file="mygadget.xml") Google Docs mygadget.xml URL Google Site 19

xml version="1.0" encoding="utf-8"?> <Module> <ModulePrefs title="simple hello world example" /> <Content type="html"> <!

20 ˆ Google Site "Insert" -> "More gadgets..." -> "Add gadget URL", ˆ wiki:gadget Google Code wiki <wiki:gadget url=" />, ˆ Blogger blogger post googlev is post & googlev is Dropbox <iframe> <iframe width="100%" height="400px" frameborder="0" src=" </iframe> googlev is googlev is R R.rsp [Ben12] brew [Hor11a] R HTML 2 R.rsp brew RApache [Hor11b] Apache HTTP [Fou10a] RApache UNIX/Linux Mac OS X googlev is R.rsp R.rsp R HTML R R.rsp rsp <html> <body> <% library(googlevis) M <- gvismotionchart(fruits, idvar="fruit", timevar="year") %> <%= M$html$chart %> </body> </html> <%...%> R R.rsp HTTP R : HTML R <\%=...\%> cat googlev is R R> library(r.rsp) R> browsersp() 20

html"> </iframe> http://lamages.blogspot.com/2011/09/including-googlevisoutput-into-blogger.html 3.4 googlev is googlev is R R.rsp [Ben12] brew [Hor11a] R HTML 2 R.

21 R> # googlevis rsp googlev is R> file.path(system.file("rsp", package = "googlevis"), "index.rsp") R.rsp RApache brew googlev is RApache R Apache HTTP RApache Apache R R HTML R brew HTTP brew brew R RApache R.rsp 2 R RApache http: //rapache.net/manual.html, Mac OS X blogspot.com/2010/08/installing-rapache-on-mac-os-x-snow.html RApache RApache Apache apache2.conf httpd.conf /etc/httpd Mac OS X /private/etc/apache2/httpd.conf LoadModule R_module \url{/usr/lib/apache2/modules/mod_r.so} ## On Mac OS X more likely to be: ## LoadModule R_module libexec/apache2/mod_r.so ROutputErrors RSourceOnStartup "/var/www/rapache/r/startup.r" ## On Mac OS X the www folder is often equivalent to: ## /Library/WebServer/Documents/ 1 Apache R 2 startup.r ## Ensure the packages are installed so that mod_r ## has access to them, e.g. not in your home folder library{googlevis} library{lattice} library{cairo} MyGlobalVar <- 42 RApache RApache files/rapacheinfo.html brew R> install.packages( brew ) 21

22 brew Apache apache2.conf httpd.conf RHandler brew <Directory /var/www/rapache/brew> ## On Mac OS more likely to be something like: ## <Directory /Library/WebServer/Documents/rapache/brew> SetHandler r-script RHandler brew::brew </Directory> HTTP brew <html> <body> <h1>fruits</h1> <% library(googlevis) M <- gvismotionchart(fruits, idvar="fruit", timevar="year") %> <%= M$html$chart %> </body> </html> brew rsp RApache brew brew googlev is 2 R R> system.file("brew", package = "googlevis") 4 googlev is Google Visualisation API googlevis MS Power- Point 10 Google Docs OpenOffice Impress Apple Keynot JavaScript deck.js [Tro11] Caleb Troughton HTML jquery YouTube googlevis mages s googlevis blogspot.com/2011/11/interactive-presentations.html 10 MS-Windows Microsoft PowerPoint liveweb PowerPoint 22

23 10: deck.js googlevis : 5 R R 5.1 Google visualisations 11 2 JavaScript ˆ google.visualization.events.trigger() fire ˆ google.visualization.events.addlistener() listen Google selection 1 var table = new google.visualization.table(document.getelementbyid( table_div )); table.draw(data, options); google.visualization.events.addlistener(table, select, selecthandler); function selecthandler() { alert( A table row was selected ); } addlistner select addlistener gvis.listener.jscode gvis JavaScript Wikipedia R> jscode <- "window.open( data.getvalue(chart.getselection()[0].row,0)); " R> J1 <- gvisgeomap(exports, locationvar= Country, numvar= Profit, + options=list(datamode="regions", gvis.listener.jscode=jscode)) R> plot(j1) R> plot(gvisorgchart(regions, options=list(gvis.listener.jscode=jscode))) R> plot(gvislinechart(regions[,c(1,3)], options=list(gvis.listener.jscode=jscode)))

24 R> jscode <- " + var sel = chart.getselection(); + var row = sel[0].row; + var text = data.getvalue(row,1); + alert(text); + " R> J2 <- gvistable(population, options=list(gvis.listener.jscode=jscode)) R> plot(j2) demo(eventlistener) Google Visualisation API Google Visualisation API rvisualisation@gmail.com 6.2 R googlevis R> citation("googlevis") R> citation() 6.3 rvisualisation@ gmail.com [Ben12] Henrik Bengtsson. R.rsp: R server pages R package version [DKM10] MacKenzie Smith (MIT Libraries) David Karger (MIT CSAIL). Simile: Semantic Interoperability of Metadata and Information in unlike Environments [Fou10a] Apache Foundation. Apache HTTP Server [Fou10b] Gapminder Foundation. Gapminder [Fou10c] Open Source Geospatial Foundation. Openlayers: Free maps for the web. openlayers.org/, [FR10] Ben Fry and Casey Reas. Processing an open source programming language and environ- 24

25 ment to create images, animations, and interactions [GdC11] Markus Gesmann and Diego de Castillo. Using the Google Visualisation API with R. The R Journal,3(2):40-44, December [GdC12] Markus Gesmann and Diego de Castillo. googlevis: Using the Google Visualisation API with R R package version [Hor11a] Jeffrey Horner. brew: Templating framework for report generation. R-project.org/package=brew, R package version [Hor11b] Jeffrey Horner. RApache: Web application development with R and Apache. http: // [Inc12a] Google Inc. Google API Terms of Service [Inc12b] Google Inc. Google Motion Chart API. chart/interactive/docs/gallery/motionchart.html, [Inc12c] Google Inc. Google Public Data Explorer [Inc12d] Google Inc. Google Visualisation Reference. interactive/docs/reference, [Inc12e] Google Inc. Google Visualization API. chart/interactive/docs/gallery, [JG10] George Neusse John Glazebrook, Guenther Harrasser. Open flash chart. teethgrinder.co.uk/open-flash-chart/, [JSO06] JSON.org. JSON RFC 4627 application/json. [Lab10] UC Berkeley Visualization Lab. flare: Data visualisation for the web. prefuse.org, [Lan12] Duncan Temple Lang. RJSONIO: Serialize R objects to JSON, JavaScript Object Notation R package version [Ros06] Hans Rosling. TED Talk: Hans Rosling shows the best stats you ve ever seen. rosling shows the best stats you ve ever seen.html, [RtICsg10] IBM Research and the IBM Cognos software group. Many eyes. alphaworks.ibm.com/manyeyes/page/create a Visualization.html, [Saa10] Sebasti an Pe rez Saaibi. R/RMETRICS Generator Tool for Google Motion Charts. https: // Meielisalp, Lake Thune Switzerland, June 27 - July 1, [Tro11] Caleb Troughton. deck.js: Modern HTML Presentations, jquery framework for creating HTML presentations. 25

Google Visualisation API R googlevis Markus Gesmann, Diego de Castillo googlev is R Google Visualisation API Google Visual

Google Visualisation API R googlevis-0.2.13 Markus Gesmann, Diego de Castillo 2011 12 19 2012 1 19 googlev is R Google Visualisation API Google Visualisation API TED Hans Rosling googlev is R Google Google