google chart tools r で利用する：googlevis-0.4 · 2014-01-02 · google chart tools をr...

Google Chart Toolsを Rで利用する：googleVis-0.4.7パッ

ケージ

Markus Gesmann∗, Diego de Castillo†

2013年 11月 10日版

日本語訳　荒木　孝治 ‡

2014年 1月 2日

要旨

googleVisパッケージは，Rと Googleチャートツールの間のインターフェースを提供する．Google

チャートツールにより，ウェブページに埋め込むことができるインタラクティブチャートを作成するこ

とができる．これらのチャートの中で最も有名なものは，TEDのスピーチにおいて Hans Roslingが

広めたモーションチャートだろう．

googleVisパッケージの機能によって，Rのデータフレームとして保存されているデータを Google

にアップロードしないで，Google Chart Toolsで視覚化することができる．googleVis の関数の出力

は，データおよび Googleがホストする JavaScript関数を参照する htmlコードである．

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

トに接続された最新のブラウザが必要であり，一部のチャートでは Flashが利用できる必要がある．

∗ [email protected]† [email protected]‡ 翻訳に関する意見等は [email protected]まで．

1

目次

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オブジェクトをローカルに表示 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

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

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

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

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

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

3 googleVisをウェブサイトに埋め込む 19

3.1 既にあるサイトに gvisオブジェクトを統合する . . . . . . . . . . . . . . . . . . . . . 19

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

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

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

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

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

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

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

4 knitrで googleVisを使う 27

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

6 RStudioで googleVisを使う 30

7 Rを超えて 31

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

8 よくある質問 — FAQ 32

8.1 googleVisの出力を PDFファイルで利用できるか？ . . . . . . . . . . . . . . . . . . . 32

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

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

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

いのはなぜか？ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

8.5 iPadまたは iPhoneでモーションチャートを見ることができないのはなぜか？ . . . . . 32

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

2

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

8.8 会社の仕事で googleVisを利用できるか？ . . . . . . . . . . . . . . . . . . . . . . . . 33

8.9 バグと問題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

9 連絡 33

9.1 コラボレーション . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

9.2 引用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

9.3 トレーニングとコンサルティング . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

3

1 はじめに

1.1 モチベーション

ますます多くのデータが利用できる環境が整いつつあるが，データに関する物語と洞察は今なおし

ばしば欠如している．私たちはデータのジャングルの中で道に迷い，木を見て森を見ようと苦闘して

いる．

それゆえに，データを生き返らせ，データを利用者にぴったりと合った様々な方法で分析し，様々な

視点から観察し，語る価値のある物語（外れ値，トレンド，あるいは自明のものでさえも）を見つける

ための新しいツールが必要とされている．

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

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

ために詳細にデータを分析した．話を視覚化するために，彼と Gapminder [Fou10b]のチームは，モー

ションチャートというバブルチャートのアニメーション版を開発した（図 1参照）．

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

その結果の 1つとして，Gapminderの背後にあったソフトウェアが Googleによって買収され，1年後

に Google Chart Tools [Inc12e]（前の名前は，Google Visualizetion API）にモーションチャートと

して組み込まれた．

2010 年，計算ファイナンスと金融工学に関する R/Rmetrics ワークショップで，Sebastian Perez

Saaibi [Saa10]は，Googleのモーションチャートを使って Rの出力を R.rspパッケージ [Ben12]を用

いて視覚化するというアイデアを提案した．

これらのトークに刺激を受け，また，データ分析者と他者との対話を促進するためにインタラクティ

ブな視覚化を行いたいという願望から，我々は googleVis パッケージ [GdC12],[GdC11] の開発を始

めた．

もちろん，他に，d3js [Bos12]，Many Eyes [RtICsg10]，Open Flash Chart (Flash) [GHN10]，

OpenLayers (JavaScript) [Fou10c]，Processing (Java) [FR10]，FLARE (Action-Script) [Lab10]と

いった多くの視覚化ツールキットが既に存在する．

1.2 Google Chart Tools

Google Chart Tools [Inc12b]を用いると，インターラクティブチャートを作成して，それを Google

ドキュメント，表計算，ウェブページの一部とすることができる．本稿では，APIを利用する方法に焦

点を当てる．

Google Public Data Explorer [Inc12d]は，インタラクティブチャートの利用法，および，それがど

のようにしてデータ分析の手助けとなるかということを示すよい例である．ここでの図は全て，ブラウ

ザで描画される．

作図データは，htmlファイルに埋め込まれるか，ダイナミックに読み込まれるかのいずれかである

Google Visualisation APIのポイントは，データが DataTable [Inc12e]の中に構築されるということ

である．なぜなら，それは RJSONIOパッケージ [Lan12]の機能を利用して，Rのデータフレームを

JSON [JSO06] オブジェクト（これが Data Tableの基礎になる）に変換するからである．

例として，Google の visualisation gallery [Inc12c] にあるモーションチャートの html コードを見

4

図 1: Google モーションチャートの概要．plot(gvisMotionChart(Fruits, idvar=’Fruit’,

timevar=’Year’))の出力のスクリーンショット．

る．これは，図 1のような図を生成する．

1 <html>

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

5

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に変換（第 11行～24行）

� チャートを作成するためのインスタンスの呼び出し（第 25行～26行）

� オプションを付けた描画メソッドの呼び出し．ここで示したオプションは，描画領域の width

と height（第 27行）

� ページにチャートを追加するための HTMLの<div>要素（第 32行～34行）

この原則は，Google Chart Toolsのほとんどのインタラクティブチャートに当てはまる（図 2の例

を参照）．

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

2 googleVisパッケージ

googleVisパッケージは，Rと Google Chart Tools間のインターフェースを提供する．パッケージ

の関数は，Rデータフレームに保存されているデータを Google Chart Toolsを用いて視覚化すること

を可能とする．

パッケージのバージョン 0.4.7 は，モーションチャート（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），組織図（Org Charts）へのインターフェースを提供する．例については，図 2を参照．利用

可能なチャートの全てのリストが，プロジェクトのサイト3にある．

googleVisの関数の出力は，データと，Googleがホストする JavaScriptの関数への参照を含む html

コードである．出力を見るには，インターネットに接続されたブラウザが必要であり，モーション

チャート，地理マップ，注釈付タイムラインには，さらに Flushが必要である．実際のチャートは，ブ

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

Policy2 詳細については，https://google-developers.appspot.com/chart/interactive/docs/indexを参照．3 http://code.google.com/p/google-motion-charts-with-r/wiki/GadgetExamples

6

ラウザで描画される．

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

gvisAnnotatedTimeLine，gvisGeoMap，gvisTreeMap，gvisTable，gvisMapによる．

2.1 インストール

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

R> install.packages(’googleVis’)

コマンド library(googleVis)により次のメッセージが表示されたとき，インストールは成功している．

> library(googleVis)

Welcome to googleVis version 0.4.7

Please read the Google API Terms of Use

before you use the package:

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

Note, the plot method of googleVis will by default use

7

the standard browser to display its output.

See the googleVis package vignette for more details.

To suppress the this message use:

suppressPackageStartupMessages(library(googleVis))

2.2 googleVisパッケージの利用

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

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

例として，モーションチャートを作る方法を図 1 に示す．これは他の API に関しても同様である．

さらなる例が，googleVisパッケージのデモ4にある．図 2も参照のこと．

視覚化関数のデザインは，かなり共通している．名前は，‘gvis + チャートの種類’である．だから，

モーションチャートの場合，次のようになる．

gvisMotionChart(data, idvar=’id’, timevar=’date’,

options=list(), chartid)

ここで，dataは入力のデータフレームであり，idvarと timevarではプロットする id変数の列名と

時間変数を指定する．表示のオプションは optionsリストで指定するが，これについては 17ページで

詳しく説明する．オプションとデータの要求事項は Google Chart Toolsに準拠しており，ヘルプペー

ジで説明している．ヘルプを参照するには次のようにする．

R> help(’gvisMotionChart’)

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

れないとき，tempfile(pattern=’’) を用いてランダムな id が生成される．複数のチャートを 1 つの

ページに入れるには，ユニークなチャート idsが必要である．

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

ダ，チャート，キャプション，フッタを含む）といったリストのリスト（入れ子になったリスト）であ

る（図 3参照）．

このコンセプトの背後にある考え方は，特定のパーツ（例えばチャート）を抽出すると同時に，ユー

ザが完全なウェブページを得ることができるようにするということである．視覚化の出力を他のサイト

に送ったり，それを rspのページ（22ページ参照）や RApache（23ページ参照），Googleガジェット

に埋め込んだりする場合，特に有益である．

googleVis の関数の出力は，クラス ‘gvis’ と ‘list’ である．ジェネリックな print 関数（print.gvis）

と plot関数（plot.gvis）を，オブジェクトの取り扱いを容易にするために用意している．

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

4 利用可能なデモのリストを表示するには，http://code.google.com/p/google-motion-charts-with-r/wiki/GadgetExamples

を用いる．

8

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

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

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

要である．１つはプロットしたい変数，もう 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” を，時間の変数として “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] "<!-- MotionChart generated in R 2.

.. ..- attr(*, "names")= chr [1:7] "jsHeader" "jsData" "jsDrawCh

9

..$ caption: chr "<div><span>Data: Fruits • Chart ID: <a h

..$ footer : chr "\n\n<span> \nR version 2.15

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

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

情報を含む5．

R> M$type

[1] "MotionChart"

R> M$chartid

[1] "MotionChartID91346b750a96"

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>MotionChartIDc5cf627b1e</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の

5 （訳注）出力の一部は省略されている．

10

ヘルプページを参照．

R> names(M$html$chart)

[1] "jsHeader" "jsData" "jsDrawChart" "jsDisplayChart"

[5] "jsFooter" "jsChart" "divChart"

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

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







<script type="text/javascript">

// jsData

function gvisDataMotionChartIDc5cf627b1e () {

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,

11

"East",

96,

81,

15,

"2008-12-31"

],

[

"Bananas",

2008,

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

]

];

12

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 drawChartMotionChartIDc5cf627b1e() {

var data = gvisDataMotionChartIDc5cf627b1e();

var options = {};

options["width"] = 600;

options["height"] = 500;

var chart = new google.visualization.MotionChart(

document.getElementById(’MotionChartIDc5cf627b1e’)

);

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;

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(drawChartMotionChartIDc5cf627b1e);

})();

function displayChartMotionChartIDc5cf627b1e() {

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

13

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

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

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

gvis オブジェクトの plot メソッドは，オブジェクトのタイプとチャート id の情報を利用して一

時フォルダの中に html ファイルを作成する．そして，R の HTTP ヘルプウェブサーバー（通常

http://127.0.0.1）のもとにローカルに出力を表示する．

チャートのキャプションは，コピー&ペーストに対して，チャート idを通してチャートコードへのリ

ンクを提供することに注意．

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

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

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

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オブジェクトと同様に，RR 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に与えられ

た．デフォルトでは，plot.gvisの引数 tagは，デフォルトで NULLに設定されており，plot関数は，

その出力をブラウザで表示する．しかし，tagが NULLでないと，関数 plot.gvisは print.gvisと全

く同じ機能を果たす．

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

15

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節（27ページ）では，より詳細な内容と knitrの簡単な例を示す．

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


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


R> GT <- gvisMerge(G,T, horizontal=FALSE)

R> GTM <- gvisMerge(GT, M, horizontal=TRUE,

+ tableOptions="bgcolor=\"#CCCCCC\" cellspacing=10")

R> plot(GTM)

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

16

2.7 オプションの設定

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

ンは Google Chart Toolsのそれに倣っており，引数 optionsを通じて指定することができる．次の例

では，折れ線グラフの作成において様々なオプションを設定している（図 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)

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

上の例からわかるように，簡単なオプションは，名前=値（例えば，width=500）の形で設定できる．

下位要素を持つような複雑なオプションは中括弧{ }の中にリストされ，2つの軸を定義するためのア

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

い．

17

レイには角括弧 [ ]を用いる．

地理チャートの軸の色を設定する他の例を示す（図 6参照）．

> 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’]}")

+ )

> plot(Geo)

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

2.7.1 チャートエディタ

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

ページに加えるので，ユーザが自由にチャートを編集・変更・カスタマイズすることができる．これに

関しては，次の例と図 7 を参照．例における gvis.editor のリスト項目は，ブラウザボタンのラベル

を’Edit me!’と指定している．8

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

R> plot(Editor)

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

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

の列名は，単一引用符で括られる（5ページのコード例の 12− 16行目参照）．

よって，入力データフレームの列名にアポストロフィがある場合，これと区別するため，2重のバッ

クスラッシュを頭に付けておく必要がある．簡単な例9，および，その出力を図 8に示す．

8 https://google-developers.appspot.com/chart/interactive/docs/drawing_charts#charteditorも参照．9 訳注）1行目の"Year"=c(2009, 2010)を"Year"=c("2009", "2010")に変更．

18

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

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)

3 googleVisをウェブサイトに埋め込む

3.1 既にあるサイトに gvisオブジェクトを統合する

既にウェブページがあり，googleVis関数の，例えば gvisMotionChartの出力をそれに組み込みたい

とする．この場合，gvisMotionChartからのチャートの出力だけを必要とする

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

により出力し，存在する htmlページに Rコンソールの出力をコピー&ペーストしてもよいし，次のよ

うにして直接ファイルに内容を書き込んで処理してもよい．

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

19

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

3.2 googleVis出力をWordPressで利用する

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

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

デフォルトでは，WordPressは JavaScriptのコード（よって，googleVisの出力）がページに挿入

されるのを許さない．しかし，プラグインを追加することによりWordPressの機能を拡張することが

できる．

JavaScriptコードをWordPressに埋め込む方法の 1つとして，“custom fields shortcode”プラグイ

ン10を利用することがある．プラグインによって，googleVisコード用のカスタムメイドのフィールド

を作成し，それを自分の記事の中で参照することができる．

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

R> M <- gvisMotionChart(Fruits, "Fruit", "Year", options=list(width=400, height=370))

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

R> print(M, ’chart’)

により表示し，これをコピーしてWordPressのカスタムフィールドの valueのテキスト領域にペース

トする（例えば，Fruitsというインスタンス名で）．記事にモーションチャートを組み込むには，ポス

トに [cf]Fruits[/cf]を付け加える（例については，図 9参照）．

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

20

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

]]>

</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にガジェットを埋め込むことができる：

21

� メニューを用いて 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] を用いるという 2つのオプションにより，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つの選択肢により，これを利用することができる．これら 2つのアプリケーショ

ンにより，利用者はほとんどオーバーヘッドなくウェブアプリケーションをローカルに作成することが

できる．shinyフレームワークは最新のものであり，Rと googleVisを用いたウェブアプリケーション

の開発を始めるにはおそらく最も簡単である．

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>

22

<%...%> 内にある Rコードは R.rsp HTTPサーバで読まれるときに実行されるが，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に関しては /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}

23

library{Cairo}

MyGlobalVar <- 42

RApacheが機能しているかどうかを調べるには，http://localhost/RApacheInfoを開いて自分

のシステムの詳細を見る必要がある．例が，RApache のサイト http://biostat.mc.vanderbilt.

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

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

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参照）．

24

図 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

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

25

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

+ })

+

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

+ )

+ ))

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

26

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

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

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

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

他の例が，Markusのブログ（http://lamages.blogspot.co.uk/search/label/shiny）にある．

4 knitrで googleVisを使う

knitr [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’)

27

‘‘‘

ブログ（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を参照．

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

# Markdown example with knitr and googleVis

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

This is a little Markdown example file.

28

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

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

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

plot(M)

‘‘‘

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

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

とに注意．

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

‘‘‘{r resetOptions}

## オプションを元のオプションに戻す

options(op)

‘‘‘

knitrファイル内で options()コマンドを用いて，Rコンソールに Rのコードをコピー&ペーストす

ることにより試行することができるインタラクティブモードと，ファイル全体を実行することとを切り

29

替えることができる．

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

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

Google Chart Toolsはウェブページ用に設計されているので，googleVisの出力をMS PowerPoint12や Google Docs，OpenOffice の Impress，Apple Keynot のような伝統的なプレゼンテーションソ

フトに埋め込むことが難しかったり不可能であったりすることは不思議ではない．

最も簡単な方法は，ウェブページへのリンクによりスライドにスクリーンショットを埋め込むことで

ある．しかし，この方法では，発表者がトークの間に，アプリケーションを切り替える必要がある．こ

れは楽しみでもあるが，たいていはそうではない．

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

最もよく利用される方法は，Ramnath Vaidyanathan [Vai12] によるパッケージ slidifyを利用する

ものである．これは，前節の knitrマークダウンアプローチに基づく．slidifyプレゼンテーションの例

が，2013年の useR!コンファレンスで開かれた googleVisチュートリアルにある．

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

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

することができる．

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

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

6 RStudioで googleVisを使う

RStudioは，人気のあるフリーでオープンソースの Rの統合開発環境である．バージョン 0.98.4341

より，RStudioは，ユーザが HTMLファイルを表示することができる表示枠を IDEの中に導入した．

googleVisは，Flushでないチャートを表示するのに，デフォルトで，RStudio（バージョン 0.98.441

以降）の表示枠を用いる．Flushのチャートと結合された gvisオブジェクトは，デフォルトのブラウ

12 MS-Windows のMicrosoft PowerPoint に関しては，プラグイン liveweb が，ウェブページを PowerPoint スライド

に挿入して，スライドショーの間，ページをリアルタイムに更新する機能を提供している．

30

ザで表示される．設定は，オプションの googleVis.viewerによりコントロールすることができる．デ

フォルト値は，getOption("viewer")である．

options("googleVis.viewer"=NULL)と設定すると，googleVisの plot関数は，全ての出力を標準の

ブラウザで開く．

7 Rを超えて

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

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

Google visualisations はイベントの作り出し，および，受け取り13を行うことができる．そのため

に，次の 2つの JavaScriptのメソッドを公開している：

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

� 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(’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)

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

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

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

31

+ 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 Chart Toolsの文書を参照のこと．

8 よくある質問 — FAQ

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

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

Google Chart ToolsAPIは，紙へではなく，スクリーンへのダイナミックなウェブ出力のために設

計されている．googleVisをプレゼンテーションで利用する方法については，第 5節（30ページ）を参

照のこと．

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

注意．

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

残念ながら，できない．

色は，Google Chart ToolsAPIにより設定されており，利用者が変更することはできない．

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

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

しかし，あなたのデータを Google Fusion Tableにアップロードし，それを，アイコンを定義する別

のテーブルにリンクさせることができる．詳細については，Google Fusion Tableのサポートページを

参照．

8.4 ローカルディレクトリからモーションチャートを開いたとき，それを見ることが

できないのはなぜか？

2.4項（15ページ）参照．

8.5 iPadまたは iPhoneでモーションチャートを見ることができないのはなぜか？

モーションチャート（地図マップ，注釈付タイムラインも同様）は，HTML5を用いる他のチャート

と異なり，Flashを用いてブラウザに表示される．残念ながら，iPadsや iPhonesといった iOSのデバ

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

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

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

32

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

残念ながら，ylimや cxlimのような引数はない．その代わりに，Googleチャートの軸に関するオプ

ションを hAxesと vAxesを用いて変更できる．ここで，hは horizontao（横），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)

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

チャートの見た目を変更するためのオプションは多くある．詳細については，ヘルプファイルを参

照．しかし，googleVisはGoogle Chart Toolsへのインタフェースを持つのみである．チャートに関す

る特定の疑問があるならば，Google Visualization APIニューズグループ（http://groups.google.

com/group/google-visualization-api）に参加してほしい．

APIに関する一般的な質問は https://developers.google.com/chart/interactive/faq を参

照のこと．

8.8 会社の仕事で googleVisを利用できるか？

Google のサービス利用規約を参照し，会社の IT 部門または法務部に相談すること．確信が持てな

いときは，Googleに直接コンタクトをとること．

8.9 バグと問題

googleVis に関するバグや問題を見つけたら，メールを送付するか，問題リスト（http://code.

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

9 連絡

9.1 コラボレーション

パッケージの開発は進行中であり，パッケージ化していない Google Chart Tools の多くの機能

がある．新しいバージョンに関する情報を受けたいならば，気軽に電子メールを送ってほしい．ま

33

た，フィードバック，アイデア，提案があったり，コラボレートしたりしたい場合にも．アドレスは，

[email protected]．

9.2 引用

あなたが仕事や出版において Rおよび googleVisを利用する場合，引用情報を記載してほしい．そ

の際の形式は，次で表示される情報を参照．

R> citation("googleVis")

R> citation()

9.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.7.5.

[Bos12] Mike Bostock. Data-Driven Documents (d3.js), a visualization framework for internet

browsers running JavaScript. http://d3js.org, 2012.

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

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

[Fou10c] Open Source Geospatial Foundation. Openlayers: Free maps for the web. http://www.

openlayers.org/, 2010.

[FR10] Ben Fry and Casey Reas. Processing an open source programming language and environ-

ment to create images, animations, and interactions. http://processing.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.

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

[GdC13b] Markus Gesmann and Diego de Castillo. googleVis: Using the Google Chart Tools with

R. http://code.google.com/p/google-motion-charts-with-r/, 2013. R package version

0.4.7.

[GHN10] John Glazebrook, Guenther Harrasser, and George Neusse. Open flash chart. http:

//teethgrinder.co.uk/open-flash-chart/, 2010.

[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.

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

34

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.

[Lab10] UC Berkeley Visualization Lab. flare: Data visualisation for the web. http://flare.

prefuse.org, 2010.

[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.

[RtICsg10] IBM Research and the IBM Cognos software group. Many eyes. http://www-958.

ibm.com/software/data/cognos/manyeyes/, 2010.

[Saa10] Sebastian Perez 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.

35