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

Size: px

Start display at page:

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

せぴあひがき
5 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

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 21 5 R Registering to catch events

3 Hans Rosling 50 TED [Ros06] Rosling Gapminder [Fou10b] Figure 1 Rosling 1 Gapminder Google 1 Google Visualisation API [Inc11] Guardian taz.de Die Tageszeitung 2010 R/Rmetrics Sebastián Peréz Saaibi [Saa10] Google R R.rsp [Ben11] googlevis [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 [Inc11], [Inc] Google API Google Public Data Explorer [Inc10b] HTML Google Visualisation API DataTable [Inc10c] RJSONIO [Lan11] R JSON [JSO06] DataTable Google visualisation gallery [Inc10a] html Figure 1 3

4 Figure1: Google plot(gvismotionchart(fruits, idvar= Fruit, timevar= Year )) 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 ] 24 ]); 25 var chart=new google.visualization.motionchart( 26 document.getelementbyid( chart_div )); 4

5 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 Google Maps/Google Earth API 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 Column Chart Area Chart Combo Chart Scatter Chart Candlestick Chart Pie Chart Org Chart Figure 2 3 googlev is Google JavaScript HTML 1 Policy 2 charts.html 3 5

6 Figure2: demo(googlevis) gvismotionchart gvisannotatedtimeline gvisgeomap gvistreemap gvistable gvismap 2.1 googlev is CRAN R> install.packages( googlevis ) library(googlevis) R> library(googlevis) 6

7 Welcome to googlevis version Please read the Google Visualisation & Maps API Terms of Use before you use the package: Type?googleVis to access the overall documentation and vignette( googlevis ) for the package vignette. You can execute the 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 Figure 1 API googlev is Figure 2 gvis + gvismotionchart(data, idvar= id, timevar= date, options=list(), chartid) data idvar timevar id options 14 Google Visualisation API R> help( gvismotionchart ) chartid id 1 id googlev is id html Figure 3 rsp 19 RApache 20 Google googlev is gvis list print print.gvis 7

8 Figure3: gis plot plot.gvis Fruits 2.3 Google API 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 "MotionChartID144c8b2545c" $ html :List of 4..$ header : chr "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 8

9 ..$ chart : Named chr [1:7] "\n<span> \nr version attr(*, "class")= chr [1:2] "gvis" "list" 2 type id chartid 4 R> M$type [1] "MotionChart" R> M$chartid [1] "MotionChartID627977d7" 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>motionchartid144c8b2545c</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" 4 9

10 R> print(m, tag= chart ) ## cat(m$html$chart)   <script type="text/javascript" src=" </script> <script type="text/javascript"> // jsdata function gvisdatamotionchartid144c8b2545c () { 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

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

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

13 //--> </script>  <div id="motionchartid144c8b2545c" style="width: 600px; height: 500px;"> </div> jschart R> cat(m$html$chart[ jschart ]) # print(m, jschart ) // jschart displaychartmotionchartid144c8b2545c() 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 ( ) <a href=" <a href=" </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

14 5 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 Figure 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 6 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", 5 6 googlev is 14

+ titletextstyle="{color: red, + fontname: Courier, + fontsize:16}", + backgroundcolor="#d3d3d3", + vaxis="{gridlinecolor: #FFFFFF }", + haxis="{title: Country, + titletextstyle:{color: blue }}", +

15 + titletextstyle="{color: red, + fontname: Courier, + fontsize:16}", + backgroundcolor="#d3d3d3", + vaxis="{gridlinecolor: #FFFFFF }", + haxis="{title: Country, + 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) Figure4: gvismerge 3 = width=500 2 [ ] gvis.editor Figure 6 gvis.editor 15

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

17 3 googlev is 3.1 gvis googlev is gvismotionchart gvismotionchart html R & R> print(m, chart ) ## cat(m$html$chart) 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 8 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] Figure 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"?>

18 Figure7: googlev is WordPress <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 ˆ Google Site "Insert" -> "More gadgets..." -> "Add gadget URL", ˆ wiki:gadget Google Code wiki <wiki:gadget url=" />, ˆ Blogger 18

19 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 [Ben11] 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() R> # googlevis rsp googlev is R> file.path(system.file("rsp", package = "googlevis"), "index.rsp") R.rsp 19

20 3.4.2 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 ) 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 20

</Directory> HTTP brew http://localhost/rapache/brew/filename <html> <body> <h1>fruits</h1> <% library(googlevis) M <- gvismotionchart(fruits, idvar="fruit", timevar="year") %> <%= M$html$chart %>

21 </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 PowerPoint 9 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 Figure8: deck.js googlevis : 9 MS-Windows Microsoft PowerPoint liveweb PowerPoint 21

22 5 R R 5.1 Registering to catch events Google visualisations 10 2 JavaScript ˆ google.visualization.events.trigger() fire ˆ google.visualization.events.addlistener() listen Google selection registering 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))) 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))

23 R> plot(j2) demo(eventlistener) Google Visualisation API Google Visualisation API rvisualisation@gmail.com 6.2 R / googlev is R> citation() R> citation("googlevis") 6.3 rvisualisation@gmail.com [Ben11] 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 environment to create images, animations, and interactions [GdC11] 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: 23

24 // [Inc] Google Inc. Google Visualization API Terms of Service. visualization/terms.html. [Inc10a] Google Inc. Google Motion Chart API. visualization/documentation/gallery/motionchart.html, [Inc10b] Google Inc. Google Public Data Explorer [Inc10c] Google Inc. Google Visualisation Reference. visualization/documentation/reference.html, [Inc11] Google Inc. Google Visualization API. documentation/gallery.html, [JG10] George Neusse John Glazebrook, Guenther Harrasser. Open ash chart. teethgrinder.co.uk/open-flash-chart/, [JSO06] JSON.org. JSON RFC 4627 application/json. [Lab10] UC Berkeley Visualization Lab. are: Data visualisation for the web. prefuse.org, [Lan11] 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 Meielisalp, Lake Thune Switzerland, June 27 - July 1, [Tro11] Caleb Troughton. deck.js: Modern HTML Presentations, jquery framework for creating HTML presentations. 24

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

1 3 1.1............................................ 3 1.2 Google Visualisation API................................ 3 2 googlev is 5 2.1............... Google Visualisation API R googlevis-0.2.16 Markus Gesmann, Diego de Castillo 2012 6 1 2012 6 8 googlev is R Google Visualisation API Google Visualisation API TED Hans Rosling googlev is R Google Google