Google Chart Tools を R で利用する:

35  Download (0)

Full text

(1)

Google Chart Tools R で利用する:

googleVis-0.5.5 パッケージビニエット

Markus Gesmann

, Diego de Castillo

2014 年 8 月 15 日版

日本語訳 荒木孝治

2014 年 9 月 20 日

要旨

googleVisパッケージは,RとGoogleチャートツールの間のインターフェースを提供する.Google チャートツールにより,ウェブページに埋め込むことができるインタラクティブチャートを作成するこ とができる.これらのチャートの中で最も有名なものは,TEDのスピーチにおいてHans Roslingが 広めたモーションチャートだろう.

googleVisパッケージを用いると,Rのデータフレームとして保存されているデータをGoogleに

アップロードすることなしに,Google Chartとして視覚化することができる.googleVisの関数の出 力は,データおよびGoogleがホストするJavaScript関数を参照するhtmlコードである.

googleVisは,出力をローカルに表示するためにRの内蔵HTTPサーバを利用する.インターネッ

トに接続された最新のブラウザが必要であり,チャートによってはFlashが利用できる必要がある.

markus.gesmann@gmail.com

decastillo@gmail.com

翻訳に関する意見はarakitkansai-u.ac.jpまで

(2)

目次

1 はじめに 4

1.1 モチベーション . . . 4

1.2 Google Chart Tools . . . 4

2 googleVisパッケージ 6 2.1 インストール. . . 7

2.2 googleVisパッケージの利用. . . 8

2.3 モーションチャートの例 . . . 9

2.4 gvisオブジェクトをローカルに表示. . . 14

2.5 print.gvisとplot.gvisのデフォルト値の設定. . . 15

2.6 gvisMergeによるチャートの結合 . . . 16

2.7 オプションの設定 . . . 16

2.7.1 チャートエディタ . . . 18

2.7.2 列名におけるアポストロフィの取り扱い . . . 19

3 googleVisをウェブサイトに埋め込む 20 3.1 既にあるサイトにgvisオブジェクトを統合する . . . 20

3.2 googleVis出力をWordPressで利用する . . . 20

3.3 googleVisの出力をGoogleサイト, Blogger等で利用する. . . . 21

3.4 googleVisをウェブサイトに動的に埋め込む . . . 22

3.4.1 googleVisをR.rspで利用する . . . 23

3.4.2 RApacheとbrewでgoogleVisを利用する . . . 23

3.4.3 RookでgoogleVisを利用する . . . 25

3.4.4 shinyでgoogleVisを利用する . . . 26

4 knitrでgoogleVisを使う 28 5 プレゼンテーションでgoogleVisを使う 30 6 Rを超えて 30 6.1 イベントをキャッチするための登録 . . . 31

7 よくある質問— FAQ 32 7.1 googleVisの出力をPDFファイルで利用できるか? . . . 32

7.2 モーションチャートのバブルの色を変えることができるか?. . . 32

7.3 マップのアイコンを変更することができるか? . . . 32

7.4 ローカルディレクトリからモーションチャートを開いたとき,それを見ることができな いのはなぜか? . . . 32

7.5 iPadやiPhoneでモーションチャートを見ることができないのはなぜか? . . . 33

7.6 GoogleVisで軸の範囲を設定するにはどうすれば良いか? . . . 33

7.7 チャートの見た目を変更するにはどうすれば良いか . . . 33

7.8 会社の仕事でgoogleVisを利用できるか? . . . 33

(3)

7.9 バグと問題 . . . 34

8 連絡 34

8.1 コラボレーション . . . 34 8.2 引用 . . . 34 8.3 トレーニングとコンサルティング . . . 34

(4)

1 はじめに 1.1 モチベーション

ますます多くのデータが利用できる環境が整いつつあるが,データに関する物語と洞察は今なおし ばしば欠如している.私たちはデータのジャングルの中で道に迷い,木を見て森を見ようと苦闘して いる.

それゆえに,データを生き返らせ,データを利用者にぴったりと合った様々な方法で分析し,様々な 視点から観察し,語る価値のある物語(外れ値,トレンド,あるいは自明のものでさえも)を見つける ための新しいツールが必要とされている.

2006年,Hans Roslingは過去50年間の世界の社会的・経済的発展について感動的なスピーチを

TEDで行った [Ros06].それは多くの聴衆の考え方と認識に疑問を呈した.Roslingは,結論に達す

るために詳細にデータを分析した.話を視覚化するために,彼とGapminder [Fou10b]の彼のチーム は,モーションチャートというバブルチャートのアニメーション版を開発した(図1参照).

Roslingのプレゼンテーションは,インタラクティブチャートについての考えと利用を世界に広めた.

その結果の1つとして,Gapminderの背後にあったソフトウェアがGoogleによって買収され,1年後 にGoogle Charts API [Inc12e](前の名前は,Google Visualization API)にモーションチャートとし て組み込まれた.

2010年,計算ファイナンスと金融工学に関するR/Rmetricsワークショップで,Sebasti´an Per´ez Saaibi [Saa10]は,Googleのモーションチャートを使ってRの出力をR.rspパッケージ[Ben12]を用 いて視覚化するというアイデアを提案した.

これらのトークに刺激を受け,また,データ分析者と他者との対話を促進するためにインタラクティ ブな視覚化を行いたいという願望から,2010年8月に我々はgoogleVisパッケージ[GdC12], [GdC11]

の開発を始めた.

1.2 Google Chart Tools

Google Charts API [Inc12b]を用いると,インターラクティブチャートを作成して,それをGoogle ドキュメント,表計算,ウェブページの一部とすることができる.本稿では,ウェブページの一部とし てAPIを利用する方法に焦点を当てる.

Google Public Data Explorer [Inc12d]は,インタラクティブチャートの利用法,および,それがど のようにしてデータ分析の手助けとなるかということを示すよい例である.ここでの図は全て,ブラウ ザで描画されるということに注意.

作図データは,htmlファイルに埋め込まれるか,ダイナミックに読み込まれるかのいずれかである Google Chartsのポイントは,データがDataTable [Inc12e]の中に構築されるということであり,こ

のとき,googleVisが役に立つ.なぜなら,それはRJSONIOパッケージ [Lan12]の機能を利用して,

RのデータフレームをJSON [JSO06]オブジェクト(これがData Tableの基礎になる)に変換する からである.

例として,Googleのvisualisation gallery [Inc12c]にあるモーションチャートのhtmlコードを見 る.これは,図1のような図を生成する.

1 <html>

(5)

図 1: Google モ ー シ ョ ン チ ャ ー ト の 概 要 .plot(gvisMotionChart(Fruits, idvar=’Fruit’, timevar=’Year’))の出力のスクリーンショット.

2 <head>

3 <script type="text/javascript"

4 src="http://www.google.com/jsapi">

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’));

27 chart.draw(data, {width: 600, height:300});

(6)

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に変換(第11行〜24行)

ˆ チャートを作成するためのインスタンスの呼び出し(第25行〜26行)

ˆ オプションを付けた描画メソッドの呼び出し.ここで示したオプションは,描画領域のwidthheight(第27行)

ˆ ページにチャートを追加するためのHTMLの<div>要素(第32行〜34行)

この原則は,Google Chart Toolsのほとんどのインタラクティブチャートに当てはまる(図2の例 を参照).

なお,APIを利用する前に,Google Terms of Serviceの利用規約[Inc12a]を読んでおくべきである.

2 googleVis パッケージ

googleVisパッケージは,RとGoogle Chart Tools間のインターフェースを提供する.パッケージ の関数は,Rデータフレームに保存されているデータをGoogle Chartsを用いて視覚化することを可 能とする.

パッケージのバージョン 0.5.5は,モーションチャート(Motion Chart),注釈付タイムライン

(Annotated Time Lines),地図(Maps),地理マップ(Geo Maps),地理チャート(Geo Charts),

強度マップ(Intensity Maps),表(Tables),ゲージ(Gauges),木マップ(Treemap),さらに,折 れ線グラフ(Line Charts),横棒グラフ(Bar Charts),バブルチャート(Bubble Charts),縦棒グ ラフ(Column Charts),面グラフ(Area Charts),段階状面グラフ(Stepped Areas),複合グラフ

(Combo Charts),散布図(Scatter Charts),ロウソクチャート(Candlestick Charts),円グラフ(Pie Charts),流量図(Sankey),注釈(Annotation),ヒストグラム(Histogram),年表(Timeline),カ レンダー(Calender),組織図(Org Charts)へのインターフェースを提供する.例については,図2 を参照.利用可能なチャートの全てのリストが,プロジェクトのサイト3にある.

googleVisの関数の出力は,データと,GoogleがホストするJavaScriptの関数への参照を含むhtml コードである.出力を見るには,インターネットに接続されたブラウザが必要であり,モーション チャート,地理マップ,注釈付タイムラインには,Flushが必要である.実際のチャートは,ブラウザ で描画される.

1https://google-developers.appspot.com/chart/interactive/docs/gallery/motionchart.html#Data_

Policy

2詳細については,https://google-developers.appspot.com/chart/interactive/docs/indexを参照.

3http://code.google.com/p/google-motion-charts-with-r/wiki/GadgetExamples

(7)

図2: demo(googleVis)の出力のスクリーンショット.上の左から時計回りに,gvisMotionChart, gvisAnnotatedTimeLinegvisGeoMapgvisTreeMapgvisTablegvisMap

2.1 インストール

googleVisのインストールは,CRANより通常の方法で実行できる.例えば.

R> install.packages(’googleVis’)

コマンドlibrary(googleVis)により次のメッセージが表示されると,インストールは成功である.

R> library(googleVis)

Welcome to googleVis version 0.5.5 Please read the Google API Terms of Use before you start using the package:

https://developers.google.com/terms/

Note, the plot method of googleVis will by default use the standard browser to display its output.

(8)

See the googleVis package vignettes for more details, or visit http://github.com/mages/googleVis.

To suppress this message use:

suppressPackageStartupMessages(library(googleVis))

2.2 googleVis パッケージの利用

googleVisパッケージ内の各関数は,ヘルプページにおいて詳細に文書化されている.本稿では,

パッケージの原理のみを説明する.

例として,図1のモーションチャートを作る方法を示す.他のAPIに関しても同様に行うことがで きる.さらなる例が,googleVisパッケージのデモ4にある.

視覚化関数のデザインは,かなり共通している.名前は,‘gvis +チャートの種類’となっている.だ から,モーションチャートの場合,次のようになる.

gvisMotionChart(data, idvar=’id’, timevar=’date’, options=list(), chartid)

ここで,dataは入力のデータフレームであり,idvarとtimevarはプロットするid変数の列名と時 間変数を指定する.表示のオプションはoptionsリストで指定するが,この詳細については16ページ で説明する.オプションとデータの要求事項はGoogle Charts APIに準拠しており,ヘルプページで 説明している.ヘルプを参照するには次のようにする.

R> help(’gvisMotionChart’)

引数chartidにより,出力チャートのチャートidを手動でセットすることができる.引数が指定さ

れないとき,tempfile(pattern=’’)を用いてランダムなidが生成される.複数のチャートを1つの ページに入れるには,ユニークなチャートidが必要である.

googleVisの関数の出力は,チャートタイプ,チャートid,htmlコード(サブリストとして,ヘッ

ダ,チャート,キャプション,フッタを含む)といったリストのリスト(入れ子になったリスト)であ る(図3参照).

図3: gisリストオブジェクトの構造.

4利用可能なデモのリストを表示するには,demo(package="googleVis")を実行する.

(9)

このコンセプトの背後にある考え方は,特定のパーツ(例えばチャート)を抽出すると同時に,ユー ザが完全なウェブページを得ることができるようにするということである.この方法は,視覚化の出力 を他のサイトに送ったり,それをrspのページ(23ページ参照)やRApache(23ページ参照),Google ガジェットに埋め込んだりする場合,特に有益である.

googleVisの関数の出力は,クラス‘gvis’と‘list’である.オブジェクトの取り扱いを容易にするた めにジェネリックなprint関数(print.gvis)とplot関数(plot.gvis)を用意している.

このコンセプトを例示するために,Fruitsデータセットを用いてモーションチャートを作成して みる.

2.3 モーションチャートの例

GoogleモーションチャートAPIのドキュメントによると,少なくとも4列を持つデータセットが必

要である.1つはプロットしたい変数,もう1つは時間の変数,そして少なくとも2つの数値変数であ る.さらに数値や文字の列があってもよい.

例としてFruitsデータセットを利用する.

R> data(Fruits) R> Fruits

Fruit Year Location Sales Expenses Profit Date

1 Apples 2008 West 98 78 20 2008-12-31

2 Apples 2009 West 111 79 32 2009-12-31

3 Apples 2010 West 89 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 91 7 2010-12-31

9 Bananas 2010 East 81 71 10 2010-12-31

idとして列‘Fruit’を,時間の変数として‘Year’を利用することにする.‘Year’の代わりに‘Date’を 用いてもよい.

R> M <- gvisMotionChart(Fruits, idvar="Fruit", timevar="Year")

gvisMotionChartの出力の構造は,先に述べたようにリストのリストとなっている.

R> str(M) List of 3

$ type : chr "MotionChart"

$ chartid: chr "MotionChartID1602455b6328"

$ html :List of 4

..$ header : chr "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 ..$ chart : Named chr [1:7] "<!-- MotionChart generated in R 3.

.. ..- attr(*, "names")= chr [1:7] "jsHeader" "jsData" "jsDrawCh ..$ caption: chr "<div><span>Data: Fruits &#8226; Chart ID: <a h ..$ footer : chr "\n<!-- htmlFooter -->\n<span> \n R version 3.

- attr(*, "class")= chr [1:2] "gvis" "list"

リストの最初の2つの項目は,使われたチャートタイプ(type)とチャートid(chartid)に関する

(10)

情報を含む5. R> M$type

[1] "MotionChart"

R> M$chartid

[1] "MotionChartID1602455b6328"

html出力は,header(ヘッダ),chart(チャート),caption(キャプション),footer(フッタ)の リストである.これは,ユーザがページの特定の部分だけを抽出したり,完全なhtmlページを作った りするのを可能とする.

htmlページのヘッダには,基本的なhtmlとフォーマットタグだけがある.

R> print(M, tag=’header’)

<!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">

<head>

<title>MotionChartID1602455b6328</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を用いずに,tag(タ グ)をtag=’header’とする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] "jsFooter" "jsChart" "divChart"

5(訳注)出力の一部は省略されている.

(11)

チャートの内容全体を表示するには,次のようにする.

R> print(M, tag=’chart’) ## または cat(M$html$chart)

<!-- MotionChart generated in R 3.1.1 by googleVis 0.5.5 package -->

<!-- Fri Aug 15 22:25:24 2014 -->

<!-- jsHeader -->

<script type="text/javascript">

// jsData

function gvisDataMotionChartID1602455b6328 () { 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,

(12)

"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);

(13)

}

// jsDrawChart

function drawChartMotionChartID1602455b6328() { var data = gvisDataMotionChartID1602455b6328();

var options = {};

options["width"] = 600;

options["height"] = 500;

var chart = new google.visualization.MotionChart(

document.getElementById(’MotionChartID1602455b6328’) );

chart.draw(data,options);

}

// jsDisplayChart (function() {

var pkgs = window.__gvisPackages = window.__gvisPackages || [];

var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];

var chartid = "motionchart";

// Manually see if chartid is in pkgs (not all browsers support Array.indexOf) var i, newPackage = true;

14

for (i = 0; newPackage && i < pkgs.length; i++) { if (pkgs[i] === chartid)

newPackage = false;

}

if (newPackage) pkgs.push(chartid);

// Add the drawChart function to the global list of callbacks callbacks.push(drawChartMotionChartID1602455b6328);

})();

function displayChartMotionChartID1602455b6328() {

var pkgs = window.__gvisPackages = window.__gvisPackages || [];

var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];

window.clearTimeout(window.__gvisLoad);

// The timeout is set to 100 because otherwise the container div we are // targeting might not be part of the document yet

window.__gvisLoad = setTimeout(function() { var pkgCount = pkgs.length;

google.load("visualization", "1", { packages:pkgs, callback: function() { if (pkgCount != pkgs.length) {

// Race condition where another setTimeout call snuck in after us; if // that call added a package, we must not shift its callback

return;

}

while (callbacks.length > 0) callbacks.shift()();

} });

(14)

}, 100);

}

// jsFooter

</script>

<!-- jsChart -->

<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartMotion

<!-- divChart -->

<div id="MotionChartID1602455b6328"

style="width: 600; height: 500;">

</div>

同様に,チャートの特定の要素,例えば‘jsChart’にアクセスするには次のようにする(出力を一部 省略).

R> cat(M$html$chart[’jsChart’]) # or print(M, ’jsChart’)

<!-- jsChart -->

<script type="text/javascript" src="https://www.google.com/jsapi?c

基本的なチャートのキャプションとhtmlフッタは,htmlリストの最終項にある(出力を一部省略). R> print(M, tag=’caption’)

<div><span>Data: Fruits &#8226; Chart ID: <a href="Chart_MotionCha R> print(M, tag=’footer’)

<!-- htmlFooter -->

<span>

R version 3.1.1 (2014-07-10)

&#8226; <a href="https://developers.google.com/terms/">Google Te

</span></div>

</body>

</html>

2.4 gvis オブジェクトをローカルに表示

ページをローカルに表示するには,次を入力する.

R> plot(M) # ファイル名を返すが見えない

gvisオブジェクトに対するplotメソッドは,オブジェクトのタイプとチャートidの情報を利用し て一時フォルダの中にhtmlファイルを作成する.そして,RのHTTPヘルプウェブサーバー(通常 http://127.0.0.1)のもとにローカルに出力を表示する.

チャートのキャプションは,コピー&ペーストに対して,チャートidを通してチャートコードへのリ ンクを提供することに注意.

Rのtempdir()コマンドは,セッション時の一時ディレクトリ(ここにファイルが書き込まれる)の

パスを表示する.例えば次のようにして,file引数を与えたprintコマンドによってローカルhtml

(15)

ファイルにチャートを書き込むことができる.

R> print(M, file="mygoogleVisChart.html")

セキュリティのため,ローカルファイルとしてロードされたとき,Flushのチャート6は機能せず,

ウェブサーバ経由で表示するように要求されることに注意.この問題は,Flushのセキュリティの設定 を変更することにより解決できる.Tony Breyalは,次の解決法をstackoverflow.comにポストして いる.

1. http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_

manager04.htmlへ行く.

2. ドロップボックスの‘編集’(Edit location)をクリックし,‘追加’(add location)を選択 3. ‘フォルダを参照’(browse for folder)をクリック

4. htmlファイルを保存したフォルダを選択

5. OKをクリック

これにより,googleVisのhtmlファイルを開き,うまく表示することができる.

別の方法として,関数plot.gvisを利用することもできる.例えば,あなたのhtml ファイルが /Users/JoeBloggs/myGoogleVisChart.htmlに保存されているとする.plot.gvisを次のように用いる と,ファイルは一時ディレクトリにコピーされ,gvisオブジェクトの場合と同様に,R HTTPヘルプ サーバーを通して表示される.

R> plot.gvis("/Users/JoeBloggs/myGoogleVisChart.html")

plot.gvisのこの機能は,googleVisのバージョン0.3.2より導入されたことに注意.

2.5 print.gvis と plot.gvis のデフォルト値の設定

googleVisのバージョン0.3.2より,print.gvisが持つtagという引数が関数plot.gvisに与えられ た.それは,デフォルトではNULLに設定されているので,plot関数は,その出力をブラウザで表示す る.しかし,tagがNULLでないとき,関数plot.gvisはprint.gvisと全く同じ機能を果たす.

両関数に対して,options()関数を用いてtagのデフォルト値をグローバルに設定することができ る.パッケージを起動するとき,googleVisは,オプションとしてoptions(gvis.print.tag=’html’) とoptions(gvis.plot.tag=NULL)を指定する.

オプションをoptions(gvis.plot.tag=’chart’)と指定すると,以降,plot文はブラウザを開かずに,

gvisオブジェクトのチャート部のみを表示する.最初これは少し変な感じがするが,knitrやR.rspと いった他のパッケージ用にRマークダウンファイルを作成するときに便利である.

ファイルを作成するとき,googleVisの出力をインタラクティブに確認したい場合,ファイルのトッ プでオプションをoptions(gvis.plot.tag=NULL)としておき,例えばknitrにパースする前に,設定 を’chart’に変更するとよい.これにより,全てのplot文は,ブラウザを開かずに,チャートのHTML コードを返す.第4節(28ページ)では,より詳細な内容とknitrの簡単な例を示す.

6現在,Flushを必要とするチャートは, モーションチャート,地図,注釈付タイムラインである.

(16)

2.6 gvisMerge によるチャートの結合

関数gvisMergeは2つのgvisオブジェクトを引数として取り,これらを1つのページに統合する.

HTMLテーブルの中で,2つのチャートを縦(horizontal)または横(vertival)に並べることがで きる.

図4: gvisMergeで結合された3つのチャート.

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.7 オプションの設定

googleVisオブジェクトのいろいろなオプション7を設定することは,最初は面倒だろう.オプショ

ンはGoogle Charts APIのそれに倣っており,引数optionsを通じて指定することができる.次の例

では,折れ線グラフの作成において様々なオプションを設定している(図5参照).

7オプションはチャートによって異なるので,個々のgoogleVis関数のそれらについては,ヘルプファイルを参照してほし い.

(17)

図5:様々なオプションを設定した折れ線グラフ.

> df <- data.frame(country=c("US", "GB", "BR"),

+ val1=c(1,3,4), val2=c(23,12,32))

> Line <- gvisLineChart(df, xvar="country", yvar=c("val1","val2"),

+ options=list(

+ title="Hello World",

+ titleTextStyle="{color:’red’,

+ fontName:’Courier’,

+ fontSize:16}",

+ backgroundColor="#D3D3D3",

+ vAxis="{gridlines:{color:’red’, count:3}}",

+ 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

+ ))

> plot(Line)

上の例からわかるように,簡単なオプションは,名前=(例えば,width=500)の形で設定できる.

下位要素を持つような複雑なオプションは中括弧{ }の中にリストされ,2つの軸を定義するためのア レイには角括弧[ ]を用いる.

一般に次のルールが適用される.

ˆ 名前に“.”を含まないパラメータ(例えば,width,height)は一つの値で設定される.これら は,Rで行うように設定される.例えば,options=list(width=200, height=300).ブール型の 引数の場合,Rのシンタックスを用いて,TRUEまたはFALSEに設定される.

ˆ 名前に“.”を含まず,複数の値に設定されるパラメータ(例えば,color)は,“[ ]”で囲んで指 定する.例えば,options=list(colors="[’#cbb69d’, ’#603913’, ’#c69c6e’]").

ˆ 名前に“.”を含むパラメータで,複数のサブオプションを持つものは,“{}”を用いて指定する.

(18)

こうしたサブオプションの値は,parameter: valueを通じて指定する.ブール値は,’true’また

は’false’として指定する.例えば,Google文書によると,縦軸に対するオプションのパラメータ

はvAxis.formatである.これをRで指定するには,options=list(vAxis="{format:’#,###%’}") とする.

ˆ 例えば,titleTextStyle.color, title-TextStyle.fontNameやtitleTextStyle.fontSize とい った複数のサブオプションを設定する必要がある場合,

 options=list( titleTextStyle="{color:’red’ ,fontName:’Courier’, fontSize:16}") のような形で一つのリストに結合して指定することができる.

ˆ サブオプション毎に複数の値を指定するパラメータに対しては,[ ]”を用いる.例えば,左と右の 軸に対するラベルを指定する場合,options=list(vAxes="[{title:’val1’}, {title:’val2’}]") のようにする.

地理チャートの軸の色を設定する他の例を示す(図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’]}")

+ )

R> plot(Geo)

図6: 軸の色を設定した地理チャート.

2.7.1 チャートエディタ

gvis.editorにより,全てのチャートに対して特別なオプションを設定できる.これは編集ボタンを

ページに加えるので,ユーザが自由にチャートを編集・変更・カスタマイズすることができる.これに 関しては,次の例と図7を参照.例におけるgvis.editorのリスト項目は,ブラウザボタンのラベル を’Edit me!’と指定している.8

8https://google-developers.appspot.com/chart/interactive/docs/drawing_charts#charteditorも参照.

(19)

R> Editor <- gvisLineChart(df, options=list(gvis.editor=’Edit me!’)) R> plot(Editor)

図7: options = list (gvis.editor = ’Edit me!’)としたときのgoogleVisチャートの例.

2.7.2 列名におけるアポストロフィの取り扱い

googleVisパッケージは,データフレームをJSONオブジェクトに変換する.その結果,JSONの表

の列名は,単一引用符で括られる(4ページのコード例の1216行目参照).

よって,入力データフレームの列名にアポストロフィがある場合,これと区別するため,2重のバッ クスラッシュを頭に付けておく必要がある.

簡単な例9,および,その出力を図8に示す.

R> df <- data.frame("Year"=c("2009", "2010"), "Lloyd\\’s"=c(86.1, 93.3),

"Munich\\’ Res R/I"=c(95.3, 100.5), check.names=FALSE)

R> df

Year Lloyd\\’s Munich\\’ Res R/I

1 2009 86.1 95.3

2 2010 93.3 100.5

R> CR <- gvisColumnChart(df, options=list(vAxis=’{baseline:0}’, title="Combined Ratio %",

legend="{position:’bottom’}")) R> plot(CR)

9訳注)1行目の"Year"=c(2009, 2010)"Year"=c("2009", "2010")に変更.

(20)

図8: 列名にアポストロフィが入っている場合のデータの可視化.

3 googleVis をウェブサイトに埋め込む 3.1 既にあるサイトに gvis オブジェクトを統合する

既にウェブページがあり,googleVis関数の,例えばgvisMotionChartの出力をそれに組み込みたい とする.この場合,gvisMotionChartからのチャートの出力だけを必要とする.そこで,Rconsoleで R> print(M, ’chart’) ## または cat(M$html$chart)

により出力し,存在するhtmlページにコピー&ペーストしてもよいし,次のようにして直接ファイル に内容を書き込んで処理してもよい.

R> print(M, ’chart’, file=’myfilename’)

3.2 googleVis 出力を WordPress で利用する

WordPressは,ウェブサイトやブログを作成するための人気があるウェブソフトウェアである.こ

こでは,googleVisの出力をWordPressで利用する方法を簡単に説明する.

デフォルトでは,WordPressはJavaScriptのコード(よって,googleVisの出力)がページに挿入 されるのを許さない.しかし,プラグインを追加することによりWordPressの機能を拡張することが できる.

JavaScriptコードをWordPressに埋め込む方法の1つとして,“custom fields shortcode”プラグ イン10を利用することができる.このプラグインによって,googleVisコード用のカスタムメイドの フィールドを作成し,それを自分の記事の中で参照することができる.

10http://wordpress.org/extend/plugins/custom-fields-shortcode

(21)

例えば,Rでモーションチャートを作成したとしよう:

R> M <- gvisMotionChart(Fruits, "Fruit", "Year",

+ options=list(width=400, height=370))

チャートのこのコードを,

R> print(M, ’chart’)

により表示し,これをコピーしてWordPressのカスタムフィールドのvalueのテキスト領域にペース トする(例えば,Fruitsというインスタンス名で).記事にモーションチャートを組み込むには,ポス

トに[cf]Fruits[/cf]を付け加える(例については,図9参照).

図9: googleVisの出力をWordPressのブログエントリに入れる.

3.3 googleVis の出力を 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!

]]>

(22)

</Content>

</Module>

googleVisパッケージには関数createGoogleGadgetがある.これはgvisオブジェクトを引数として 取り,XMLガジェットファイルにラップする.モーションチャートの例を次に示す.

R> M <- gvisMotionChart(Fruits, "Fruit", "Year") R> G <- createGoogleGadget(M)

R> cat(G, file="myGadget.xml")

ガジェットを使うためには,例えばGoogle Docsを使用して,ファイルmyGadget.xmlをオンライン にホストしなければならない.ガジェットに対するURLがhttp://example.com/myGadget.xmlだ とすると,次のようにしてGoogle Siteにガジェットを埋め込むことができる:

ˆ メニューを用いてGoogle Siteに:

"Insert" -> "More gadgets ..." -> "Add gadget URL",

ˆ wiki:gadgetタグを用いてGoogle Code wikiに:

<wiki:gadget url="http://example.com/gadget.xml" />,

ˆ デザインタブ(ガジェットサイト参照)を用いてBloggerに.

しかし,blogger postにgoogleVisの出力を含めたい場合は,状況は異なる.この場合,ガジェット

は機能しない.postにチャートを直接コピー&ペーストするか(マイクロソフトのインターネットエク スプローラでは機能しない),間接的なアプローチを使うかである.後者では,googleVisのチャートを 別のページ(例えばパブリックなDropboxフォルダに)にホストし,<iframe>タグを用いて,例えば,

<iframe width="100%" height="400px" frameborder="0"

src="http://example.com/myGoogleVisChart.html">

</iframe>

のようにして埋め込む.

例に関しては,ブログのエントリhttp://lamages.blogspot.com/2011/09/including-googleVis- output-into-blogger.htmlを参照.

3.4 googleVis をウェブサイトに動的に埋め込む

本節では,googleVis関数をダイナミックにウェブサイトに埋め込む例を示す.

RのパッケージR.rsp [Ben12]とbrew [Hor11a]を用いることにより,Rのコードをhtmlコードに 統合することができる.R.rspパッケージはそれ自身の内蔵ウェブサーバを持つが,brewはRApache モジュール [Hor11b] がインストールされたApache HTTPサーバ [Fou10a] を必要とする.現在,

RApacheモジュールは,UNIX/LinuxとMac OS X上でしか動作しないことに注意.

Rのバージョン2.11.0以来,Rは自身のインターネットウェブサーバーを持ち,Rook [Hor13]と

shiny [Rl13]という選択肢もある.これら2つのアプリケーションにより,利用者はほとんどオーバー

ヘッドなくウェブアプリケーションをローカルに作成することができる.shinyフレームワークは最新 のものであり,RとgoogleVisを用いたウェブアプリケーションの開発を始めるにはおそらく最も簡単 である.

(23)

3.4.1 googleVisを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のコードは,R.rsp HTTPサーバーにより読まれ たとき,実行されるが,Rのアウトプットは表示されない.htmlコードにRの出力を埋め込むために は,等号を加ておく<\%=...\%>.これば,cat文として機能する.

googleVisパッケージの中に例がある.これは,次のRのコマンドにより表示することができる.

R> library(R.rsp) R> browseRsp()

R> # 後は,開かれたブラウザのgoogleVisのリンクをたどっていく

実際のrspファイルはgoogleVisパッケージのディレクトリにあり,そのファイルを見つけるには次 のコマンドを利用する.

R> file.path(system.file("rsp", package = "googleVis"), "index.rsp")

詳細は,R.rspパッケージのマニュアルを参照のこと.

3.4.2 RApacheとbrewでgoogleVisを利用する

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特有の注意に関しては,http://-worldofrcraft.blogspot.

com/2010/08/installing-rapache-on-mac-os-x-snow.htmlを参照.

RApacheのマニュアルに従ってRApacheをインストール後,Apacheの設定が必要となる.おそら

く,apache2.confファイルまたはhttpd.confファイルに次の行を追加する必要があるだろう(おそら

く,/etc/httpdで,あるいは,Mac OS Xに関しては/etc/httpdor/private/etc/apache2/httpd で見つけることができる):

LoadModule R_module /usr/lib/apache2/modules/mod_R.so

## On Mac OS X more likely to be:

## LoadModule R_module libexec/apache2/mod_R.so

(24)

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が機能しているかどうかを調べるには,http://localhost/RApacheInfoを開いて自分 のシステムの詳細を見る必要がある.例が,RApache のサイトhttp://biostat.mc.vanderbilt.

edu/rapache/files/RApacheInfo.htmlにある.

次に行うべきことは,brewパッケージをRの通常の方法でインストールすることである:

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

</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 %>

</body>

</html>

brewの構文はrspのものと非常に似ている.詳細については,RApache モジュールとbrewパッ ケージのドキュメントを参照.brewファイルの簡単な例が,googleVisパッケージに2つある.また,

次のRのコマンドにより,フォルダのパスを示すことができる:

R> system.file("brew", package = "googleVis")

(25)

3.4.3 RookでgoogleVisを利用する

Rook [Hor13]は,Jeffrey Horner(RApacheとbrewの作成者)が作成したRのウェブサーバーイン タフェースである.他のウェブフレームワークと比較して,Rookは信じられないくらい軽い.Rookは 設定が不要である.それはRのパッケージであるが,R HTTPサーバーとは自由に機能する.よって,

設定ファイルが不要である.特定のフォルダにファイルを置いておく必要もない.その代わり,Rook のウェブアプリケーションはローカルデスクトップで動く.しかし,Rookを利用するには,HTTPプ ロトコルに関する知識がある程度必要である.

Rookの応用例を示す.これは,Rの小さなデータフレームをデフォルトでgoogleVisの表として示 す.利用者は,Edit me!ボタンをクリックすることにより見え方を変更し,自分のCSVファイルを アップロードすることができる(図10参照).

図10: googleVisによるRookのアプリケーションの出力のスクリーンショット.

R> require(Rook) R> require(googleVis) R> s <- Rhttpd$new()

R> s$start(listen=’127.0.0.1’) R> my.app <- function(env){

+ ## Start with a table and allow the user to upload a CSV-file + req <- Request$new(env)

+ res <- Response$new() +

+ ## Provide some data to start with

+ ## Exports is a sample data set of googleVis + data <- Exports[,1:2]

+ ## Add functionality to upload CSV-file

(26)

+ if (!is.null(req$POST())) {

+ ## Read data from uploaded CSV-file + data <- req$POST()[["data"]]

+ data <- read.csv(data$tempfile) + }

+ ## Create table with googleVis + tbl <- gvisTable(data,

+ options=list(gvis.editor="Edit me!",

+ height=350),

+ chartid="myInitialView")

+ ## Write the HTML output and

+ ## make use of the googleVis HTML output.

+ ## See vignette(’googleVis’) for more details + res$write(tbl$html$header)

+ res$write("<h1>My first Rook app with googleVis</h1>") + res$write(tbl$html$chart)

+ res$write(’

+ Read CSV file:<form method="POST" enctype="multipart/form-data">

+ <input type="file" name="data">

+ <input type="submit" name="Go">\n</form>’) + res$write(tbl$html$footer)

+ res$finish() + }

R> s$add(app=my.app, name=’googleVisTable’)

R> ## ブラウザのウィンドウを開き,ウェブアプリケーションを表示する

R> s$browse(’googleVisTable’)

3.4.4 shinyでgoogleVisを利用する

shiny11はRStudioによるパッケージである.shinyを用いると,信じられないくらい簡単にRでイ ンタラクティブなウェブアプリケーションを作ることができる.

googleVisのバージョン0.4.0より,shinyアップリケーションのサポートが行われた[Rl13].Joe ChengがrenderGvis関数を作成し,これにより,他のプロット関数と同様の形でgoogleVisの出力を

shinyで利用可能となった.shinyのバージョン0.4.0以降が必要であることに注意.

次の例は,renderGvisのヘルプファイルからのものである.それは,利用するデータセットを利用 者が選択して散布図を表示するものである.図11に示すスクリーンショット参照.

R> # server.R

R> library(googleVis)

R> shinyServer(function(input, output) { + datasetInput <- reactive({

+ switch(input$dataset, + "rock" = rock,

+ "pressure" = pressure, + "cars" = cars)

+ }) +

11http://www.rstudio.com/shiny/

(27)

図11: googleVisによるshinyのアプリケーションの出力のスクリーンショット.

+ output$view <- renderGvis({

+ gvisScatterChart(datasetInput()) + })

+ }) R> # ui.R

R> shinyUI(pageWithSidebar(

+ headerPanel("googleVis on Shiny"), + sidebarPanel(

+ selectInput("dataset", "Choose a dataset:",

+ choices = c("rock", "pressure", "cars")) + ),

+ mainPanel(

+ htmlOutput("view")

+ )

+ ))

次のコマンドを用いると,例をローカルに実行することができる.

R> library(shiny) ## バージョン0.4.0以上が必要

R> runApp(system.file("shiny/", package="googleVis"))

別の例が,Markusのブログ(http://lamages.blogspot.co.uk/search/label/shiny)にある.

(28)

4 knitr で googleVis を使う

knitr12[Xie13]でgoogleVisを利用するのは,インタラクティブで再現可能なレポートを作成する便 利な方法である.knitrが取るアプローチは,Sweaveのものに似ており,Rコードをテキストとフォー マット化のタグとを結合することができる.さらに,knitrは,googleVisチャートを埋め込むのに必 要なHTMLにエクスポートすることができる.

googleVisの出力をknitrドキュメントに埋め込むには,chunkオプションのresultsを’asis’に設 定し,次の例で示すように,チャート要素のみをプリントする必要がある.

‘‘‘{r results=’asis’}

M <- gvisMotionChart(Fruits, "Fruit", "Year",

options=list(width=550, height=450)) print(M, ’chart’)

‘‘‘

ブログ(http://lamages.blogspot.co.uk/2012/05/interactive-reports-in-r-with-knitr-and.

html)に簡単な例がポストされている.

googleVisのバージョン0.3.2において,プロット関数plot.gvisの新しい引数として’tag’が導入 された(15ページ参照). この引数はデフォルトではNULLに設定されているが,options()関数を用 いてplot関数の外からグローバルに設定することができる.

引数tagは,plot関数の振る舞いに影響を与える.tagパラメータは,プリント関数であるprint.gvis のものと同じである.実際,options(gvis.plot.tag = ’chart’)と設定すると,plotの機能はprint に変更される.そのため,plot()はブラウザのウィンドウを開かず,xがgvisオブジェクトのとき,

print(x, tag=’chart’)と同じ出力を生成する.

よって,knitrマークダウンRmdファイルのgvis.plot.tagを’chart’に指定すると,以降の全て のplot文の出力は,自動的にhtmlとなる.次の例と図12を参照.

# Markdown example with knitr and googleVis

===========================================

This is a little Markdown example file.

Set the googleVis options first.

In this case change the behaviour of plot.gvis

‘‘‘{r setOptions, message=FALSE}

library(googleVis)

op <- options(gvis.plot.tag=’chart’)

‘‘‘

次のplot文は,結合された出力に必要なHTMLを自動的に返す.

## コンボチャート

‘‘‘{r ComboExample, results=’asis’, tidy=FALSE}

## 平均の追加

CityPopularity$Mean=mean(CityPopularity$Popularity) CC <- (CityPopularity, xvar=’City’,

yvar=c(’Mean’, ’Popularity’),

12http://yihui.name/knitr/

(29)

図12: マークダウンの例の出力のスクリーンショット

options=list(seriesType=’bars’, width=450, height=300, title=’City Popularity’, series=’{0: {type:\"line\"}}’)) plot(CC)

‘‘‘

上記の\R のコードを持つgvisComboChartの例.

## 2つのチャートを並べて表示

‘‘‘{r gvisMergeExample, results=’asis’, echo=FALSE}

Geo <- gvisGeoChart(Exports, locationvar=’Country’, colorvar=’Profit’, options=list(height=300, width=350))

Tbl <- gvisTable(Exports, options=list(height=300, width=200)) plot(gvisMerge(Geo, Tbl, horizontal=TRUE))

‘‘‘‘‘‘

gvisTableを持つgvisGeoChart\R のコードを隠した例.

## モーションチャート

‘‘‘{r MotionChartExample, results=’asis’, tidy=FALSE}

M <- gvisMotionChart(Fruits, ’Fruit’, ’Year’,

(30)

options=list(width=400, height=350)) plot(M)

‘‘‘

モーションチャートは,ウェブサーバーにホストされたとき,あるいは,[security settings of Macromedia]

にある信頼のおけるソースに追加されたディレクトリに置かれたときのみ表示されることに注意.

詳細については,googleVisパッケージのビニエット参照.

‘‘‘{r resetOptions}

## オプションを元のオプションに戻す options(op)

‘‘‘

knitrファイル内でoptions()コマンドを用いて,RコンソールにRのコードをコピー&ペーストす ることにより試行することができるインタラクティブモードと,ファイル全体を実行することとを切り 替えることができる.

?plot.gvisでヘルプを表示することにより,より詳細な例を参照することができる.

5 プレゼンテーションで googleVis を使う

Google Chart Toolsはウェブページ用に設計されているので,googleVisの出力をMS PowerPoint

13やGoogle Docs,OpenOfficeのImpress,Apple Keynotのような伝統的なプレゼンテーションソ フトに埋め込むことが難しかったり不可能であったりすることは不思議ではない.

最も簡単な方法は,ウェブページへのリンクによりスライドにスクリーンショットを埋め込むことで ある.しかし,この方法では,発表者がトークの間に,アプリケーションを切り替える必要がある.こ れは楽しみでもあるが,たいていはそうではない.

別の方法として,ウェブページ自体としてプレゼンテーションを構築することもできる.

最もよく利用される方法は,Ramnath Vaidyanathan [Vai12]によるパッケージslidifyを利用する ものである.これは,前節のknitrマークダウンアプローチに基づく.slidifyプレゼンテーションの例 が,2013年のuseR!コンファレンスで開かれたgoogleVisチュートリアルにある.[GdC13]

slidifyでは,レイアウトの異なるフレームワークと構文をハイライトするオプションを選択すること

ができる.さらに,slidifyのスライドは,Rからオンラインに,例えば,Dropboxやgithubに発行す ることができる.

6 R を超えて

本項では,Rの通常のコーディングを越えるアイデアと,少し実験的な考えを示す.

13MS-WindowsMicrosoft PowerPointに関しては,プラグインlivewebが,ウェブページをPowerPointスライド に挿入して,スライドショーの間,ページをリアルタイムに更新する機能を提供している.

(31)

図 13: 2013 年 useR!コ ン フ ァ レ ン ス で の googleVis チ ュ ー ト リ ア ル:

http://decastillo.github.io/googleVis Tutorial

6.1 イベントをキャッチするための登録

Google visualisationsはイベントの発生,および,受け取りを行うことができる14.そのために,次 の2つのJavaScriptのメソッドを公開している:

ˆ google.visualization.events.trigger()がイベントを発生させる

ˆ google.visualization.events.addListener()がイベントを受け取る

Googleドキュメンテーションにある選択するイベントを受け取るための登録の例を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(’http://en.wikipedia.org/wiki/’

+ + 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)

14http://code.google.com/apis/chart/interactive/docs/reference.html#addlistener

(32)

同様に,他のチャート,例えば組織図または折れ線グラフでこのコードを利用することができる:

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)) R> plot(J2)

詳細については,demo(EventListener)とGoogle Chartsの文書を参照のこと.

7 よくある質問 — FAQ

7.1 googleVis の出力を PDF ファイルで利用できるか?

できない.少なくとも直接には.

Google Charts APIは,紙へではなく,スクリーンへのダイナミックなウェブ出力のために設計さ

れている.googleVisをプレゼンテーションで利用する方法については,第5節(30ページ)を参照の こと.

本稿では,googleVisチャートの例を組み込むために,スクリーンショットを利用していることに 注意.

より詳細には,PNGチャートを印刷することに関するGoogleのオンライン文書を参照のこと.

7.2 モーションチャートのバブルの色を変えることができるか?

残念ながら,できない.

色は,Google Charts APIにより設定されており,利用者が変更することはできない.

7.3 マップのアイコンを変更することができるか?

できない.gvisMapを通じては.

しかし,あなたのデータをGoogle Fusion Tableにアップロードし,それを,アイコンを定義する別 のテーブルにリンクさせることができる.詳細については,Google Fusion Tableのサポートページを 参照(http://support.google.com/fusiontables/answer/2679986?hl=en).

7.4 ローカルディレクトリからモーションチャートを開いたとき,それを見ることが できないのはなぜか?

2.4項(14ページ)参照.

(33)

7.5 iPad や iPhone でモーションチャートを見ることができないのはなぜか?

モーションチャート(地図マップ,注釈付タイムラインも同様)は,HTML5を用いる他のチャート と異なり,Flashを用いてブラウザに表示される.残念ながら,iPadsやiPhonesといったiOSのデバ

イスではFlashは直接サポートされていない.

Googleには,モーションチャートをHTML5や他のテクノロジーに移転させる意欲はほぼない.

Google Visualizetion APIのニューズグループの投稿参照(http://goo.gl/5Zyuw).

7.6 GoogleVis で軸の範囲を設定するにはどうすれば良いか?

残念ながら,ylimやcxlimのような引数はない.その代わりに,Googleチャートの軸に関するオプ ションをhAxesとvAxesを用いて変更できる.ここで,hはhorizontal(横),vはvertical(縦)を意 味する.正確にいうと,viewWindowModeを’explicit’に設定し,viewWindowを望ましい最小値と最大 値に設定する必要がある.さらに,これらの設定はh/vAxesのサブオプションであるため,これを全て [{ }]で囲んでおく必要がある.同様に,minValue,maxValueというオプションもあるが,これは軸の 範囲を拡大するだけである.

y軸の範囲を0から10に変更する最小限の例を示す:

R> library(googleVis)

R> dat <- data.frame(x=LETTERS[1:10],

+ y=c(0, 4, -2, 2, 4, 3, 8, 15, 10, 4))

R> area1 <- gvisAreaChart(xvar="x", yvar="y", data=dat, + options=list(vAxes="[{viewWindowMode:’explicit’,

+ viewWindow:{min:0, max:10}}]",

+ width=500, height=400,

+ title="y-limits set from 0 to 10"),

+ chartid="area1ylim")

R> plot(area1)

7.7 チャートの見た目を変更するにはどうすれば良いか

チャートの見た目を変更するためのオプションは多くある.詳細については,ヘルプファイルを参 照.しかし,googleVisはGoogle Charts APIへのインタフェースを持つのみである.チャートに関す る特定の疑問があるならば,Google Visualization APIニューズグループ(http://groups.google.

com/group/google-visualization-api)に参加してほしい.

APIに関する一般的な質問については,API check(https://developers.google.com/chart/

interactive/faq)を参照のこと.

7.8 会社の仕事で googleVis を利用できるか?

Googleのサービス利用規約(https://developers.google.com/terms/)を参照し,会社のIT 部門または法務部に相談すること.確信が持てないときは,Googleに直接コンタクトすること.

(34)

7.9 バグと問題

googleVisのバグや問題を見つけたら,メールを送付するか,問題リスト(http://code.google.

com/p/google-motion-charts-with-r/issues/list)に記入してほしい.

8 連絡

8.1 コラボレーション

パッケージの開発は進行中であり,パッケージ化されていないGoogle Charts APIの多くの機能 がある.新しいバージョンに関する情報を受けたいならば,気軽に電子メールを送ってほしい.ま た,フィードバック,アイデア,提案があったり,コラボレートしたりしたい場合にも.アドレスは,

rvisualisation@gmail.com.

8.2 引用

あなたが仕事や出版においてRおよびgoogleVisを利用する場合,引用情報を記載してほしい.そ の際の形式は,次で表示される情報を参照.

R> citation("googleVis") R> citation()

8.3 トレーニングとコンサルティング

特定の目的のトレーニングまたはコンサルティングを検討したいときの連絡先は:rvisualisation@

gmail.com.

参考文献

[Ben12] Henrik Bengtsson. R.rsp: R server pages.http://CRAN.R-project.org/package=R.rsp, 2012. R package version 0.8.2.

[Fou10a] Apache Foundation. Apache HTTP Server 2.2.http://httpd.apache.org, 2010.

[Fou10b] Gapminder Foundation. Gapminder.http://www.gapminder.org, 2010.

[GdC11] Markus Gesmann and Diego de Castillo. Using the Google Visualisation API with R.

The R Journal, 3(2):40-44, December 2011.

[GdC13] Markus Gesmann and Diego de Castillo.googleVis Tutorial, 2013.

[GdC14] Markus Gesmann and Diego de Castillo. googleVis: Using the Google Chart Tools with R.http://github.com/mages/googleVis, 2014. R package version 0.5.5.

[Hor11a] Jeffrey Horner. brew: Templating framework for report generation. http://CRAN.

R-project.org/package=brew, 2011. R package version 1.0-6.

[Hor11b] Jeffrey Horner. RApache: Web application development with R and Apache. http:

//www.rapache.net/, 2011.

[Hor13] Jeffrey Horner.Rook: Rook - a web server interface for R, 2013. R package version 1.0-9.

(35)

[Inc12a] Google Inc. Google API Terms of Service. https://developers.google.com/terms/, 2012.

[Inc12b] Google Inc. Google Chart Tools. https://google-developers.appspot.com/chart/

interactive/docs/gallery, 2012.

[Inc12c] Google Inc. Google Motion Chart API. https://google-developers.appspot.com/

chart/interactive/docs/gallery/motionchart.html, 2012.

[Inc12d] Google Inc. Google Public Data Explorer.http://www.google.com/publicdata/home, 2012.

[Inc12e] Google Inc. Google Visualisation Reference. https://developers.google.com/chart/

interactive/docs/reference, 2012.

[JSO06] JSON.org. JSON.http://www.json.org/, 2006. RFC 4627 application/json.

[Lan12] Duncan Temple Lang. RJSONIO: Serialize R objects to JSON, JavaScript Object Nota- tion.http://www.omegahat.org/RJSONIO/, 2012. R package version 1.0-1.

[RI13] RStudio and Inc.shiny: Web Application Framework for R, 2013. R package version 0.4.0.

[Ros06] Hans Rosling. TED Talk: Hans Rosling shows the best stats you’ve ever seen.http://www.

ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html, 2006.

[Saa10] Sebasti´an Pe´rez Saaibi.R/RMETRICS Generator Tool for Google Motion Charts.https:

//www.rmetrics.org/, 2010. Meielisalp, Lake Thune Switzerland, June 27 - July 1, 2010.

[Vai12] Ramnath Vaidyanathan. slidify: Generate reproducible html5 slides from R markdown, 2012. R package version 0.3.3.

[Xie13] Yihui Xie.knitr: A general-purpose package for dynamic report generation in R, 2013. R package version 1.1.

Figure

Updating...

References

Related subjects :