googleVis-0.6.1 入門

googleVis-0.6.1 入門
Markus Gesmann*, Diego de Castillo
2016 年 9 月 1 日版
日本語訳荒木孝治
2016 年 9 月 21 日
要旨
googleVis パッケージは，R と Google チャートツールの間のインターフェースを提供する．Google
チャートツールにより，ウェブページに埋め込むことができるインタラクティブチャートを作成するこ
とができる．これらのチャートの中で最も有名なものは，TED のスピーチにおいて Hans Rosling が
広めたモーションチャートだろう．
googleVis パッケージを用いると，R のデータフレームとして保存されているデータを Google に
アップロードすることなしに，Google Chart として視覚化することができる．googleVis の関数の出
力は，データおよび Google がホストする JavaScript 関数を参照する HTML コードである．
googleVis は，出力をローカルに表示するために R の内蔵 HTTP サーバを利用する．インターネッ
トに接続された最新のブラウザが必要であり，チャートによっては Flash プレイヤーが利用できる必要
がある．
* [email protected]
[email protected]
翻訳に関する意見は arakitkansai-u.ac.jp まで
1
目次
はじめに
1
4
1.1
モチベーション
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
1.2
Google Chart Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
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
オプションの設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
17
2.7.1
チャートエディタ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
2.7.2
列名におけるアポストロフィの取り扱い . . . . . . . . . . . . . . . . . . . . . . .
19
2
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
3
4
knitr で googleVis を使う
28
5
プレゼンテーションで googleVis を使う
30
6
R を超えて
31
6.1
イベントをキャッチするための登録 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
よくある質問 — FAQ
32
7.1
googleVis の出力を PDF ファイルで利用できるか？ . . . . . . . . . . . . . . . . . . .
32
7.2
モーションチャートのバブルの色を変えることができるか？ . . . . . . . . . . . . . . .
32
7.3
マップのアイコンを変更することができるか？ . . . . . . . . . . . . . . . . . . . . . .
32
7.4
ローカルディレクトリからモーションチャートを開いたとき，それを見ることができな
7
いのはなぜか？
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
33
7.5
iPad や iPhone でモーションチャートを見ることができないのはなぜか？ . . . . . . .
33
7.6
GoogleVis で軸の範囲を設定するにはどうすれば良いか？ . . . . . . . . . . . . . . . .
33
7.7
チャートの見た目を変更するにはどうすれば良いか
. . . . . . . . . . . . . . . . . . .
33
7.8
会社の仕事で googleVis を利用できるか？ . . . . . . . . . . . . . . . . . . . . . . . .
34
2
バグと問題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
34
7.10 引用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
34
7.9
3
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 ワークショップで，Sebastián Peréz
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 が役に立つ．なぜなら，それは jsonlite パッケージ [Oom14] の機能を利用して，
R のデータフレームを JSON [JSO06] オブジェクト（これが Data Table の基礎になる）に変換する
からである．
例として，Google の visualisation gallery [Inc12c] にあるモーションチャートの html コードを見
る．これは，図 1 のような図を生成する．
1 <html>
4
図 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});
5
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 Charts を用いて視覚化することを可
能とする．
パッケージのバージョン 0.6.1 は，モーションチャート（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 が必要である．地図マップと注釈付き
タイムラインに対しては，地図チャートと注釈チャートを用いて HTML5 で代替することも可能であ
1
2
3
https://google-developers.appspot.com/chart/interactive/docs/gallery/motionchart.html#Data_
Policy
詳細については，https://google-developers.appspot.com/chart/interactive/docs/index を参照．
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) により次のメッセージが表示されると，インストールは成功である．
R> library(googleVis)
Welcome to googleVis version 0.6.1
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
7
the standard browser to display its output.
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 リストで指定するが，この詳細については 17 ページ
で説明する．オプションとデータの要求事項は Google Charts API に準拠しており，ヘルプページで
説明している．ヘルプを参照するには次のようにする．
R> help(’gvisMotionChart’)
引数 chartid により，出力チャートのチャート id を手動でセットすることができる．引数が指定さ
れないとき，tempfile(pattern=’’) を用いてランダムな id が生成される．複数のチャートを 1 つの
ページに入れるには，ユニークなチャート id が必要である．
googleVis の関数の出力は，チャートタイプ，チャート id，HTML コード（サブリストとして，ヘッ
ダ，チャート，キャプション，フッタを含む）といったリストのリスト（入れ子になったリスト）であ
る（図 3 参照）．
このコンセプトの背後にある考え方は，特定のパーツ（例えばチャート）を抽出すると同時に，ユー
ザが完全なウェブページを得ることができるようにするということである．この方法は，視覚化の出力
を他のサイトに送ったり，それを rsp のページ（23 ページ参照）や RApache（23 ページ参照）
，Google
ガジェットに埋め込んだりする場合，特に有益である．
googleVis の関数の出力は，クラス ‘gvis’ と ‘list’ である．オブジェクトの取り扱いを容易にするた
めにジェネリックな print 関数（print.gvis）と plot 関数（plot.gvis）を用意している．
このコンセプトを例示するために，Fruits データセットを用いてモーションチャートを作成して
みる．
4
利用可能なデモのリストを表示するには，demo(package="googleVis") を実行する．
8
図 3: gis リストオブジェクトの構造．
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 "MotionChartID14c805cbd833b"
$ html :List of 4
..$ header : chr "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0
..$ chart : Named chr [1:7] "\n<span> \n R version 3.
- attr(*, "class")= chr [1:2] "gvis" "list"
リストの最初の 2 つの項目は，使われたチャートタイプ（type）とチャート id（chartid）に関する
情報を含む5 ．
R> M$type
[1] "MotionChart"
R> M$chartid
[1] "MotionChartID14c805cbd833b"
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>MotionChartID14c805cbd833b</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"
[5] "jsFooter"
"jsData"
"jsChart"
"jsDrawChart"
"divChart"
"jsDisplayChart"
チャートの内容全体を表示するには，次のようにする．
R> print(M, tag=’chart’) ## または cat(M$html$chart)



<script type="text/javascript">
// jsData
function gvisDataMotionChartID14c805cbd833b () {
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,
11
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"
]
];
data.addColumn(’string’,’Fruit’);
data.addColumn(’number’,’Year’);
12
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 drawChartMotionChartID14c805cbd833b() {
var data = gvisDataMotionChartID14c805cbd833b();
var options = {};
options["width"] = 600;
options["height"] = 500;
options["state"] = "";
var chart = new google.visualization.MotionChart(
document.getElementById(’MotionChartID14c805cbd833b’)
);
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(drawChartMotionChartID14c805cbd833b);
})();
function displayChartMotionChartID14c805cbd833b() {
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() {
13
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()();
} });
}, 100);
}
// jsFooter
</script>

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

<div id="MotionChartID14c805cbd833b"
style="width: 600; height: 500;">
</div>
同様に，チャートの特定の要素，例えば ‘jsChart’ にアクセスするには次のようにする（出力を一部
省略）．
R> cat(M$html$chart[’jsChart’]) # or print(M, ’jsChart’)

<script type="text/javascript" src="https://www.google.com/jsapi?c
基本的なチャートのキャプションと 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 3.3.1 (2016-06-21)
• <a href="https://developers.google.com/terms/">Google Te
</span></div>
</body>
</html>
2.4 gvis オブジェクトをローカルに表示
ページをローカルに表示するには，次を入力する．
R> plot(M) # ファイル名を返すが見えない
14
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 オブジェクトの場合と同様に，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 の出力をインタラクティブに確認したい場合，ファイルのトッ
6
現在，Flush を必要とするチャートは，モーションチャート，地図，注釈付タイムラインである．
15
プでオプションを options(gvis.plot.tag=NULL) としておき，例えば knitr にパースする前に，設定
を’chart’ に変更するとよい．これにより，全ての plot 文は，ブラウザを開かずに，チャートの HTML
コードを返す．第 4 節（28 ページ）では，より詳細な内容と knitr の簡単な例を示す．
2.6 gvisMerge によるチャートの結合
関数 gvisMerge は 2 つの gvis オブジェクトを引数として取り，これらを 1 つのページに統合する．
HTML テーブルの中で，2 つのチャートを縦（horizontal）または横（vertival）に並べることがで
きる．
図 4: gvisMerge で結合された 3 つのチャート．
gvisMerge の出力も gvis オブジェクトである．そのため，gvisMerge を繰り返して適用することに
より，チャートの複雑なレイアウトが可能となる．次の例では，地図と表を上下に並べてから，右に
モーションチャートを配置している（図 4）
．
R>
+
R>
+
R>
+
R>
R>
+
R>
G <- gvisGeoChart(Exports, "Country", "Profit",
options=list(width=200, height=100))
T <- gvisTable(Exports,
options=list(width=200, height=270))
M <- gvisMotionChart(Fruits, "Fruit", "Year",
options=list(width=400, height=370))
GT <- gvisMerge(G,T, horizontal=FALSE)
GTM <- gvisMerge(GT, M, horizontal=TRUE,
tableOptions="bgcolor=\"#CCCCCC\" cellspacing=10")
plot(GTM)
16
2.7 オプションの設定
googleVis オブジェクトのいろいろなオプション7 を設定することは，最初は面倒だろう．オプショ
ンは Google Charts API のそれに倣っており，引数 options を通じて指定することができる．次の例
では，折れ線グラフの作成において様々なオプションを設定している（図 5 参照）．
図 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 つの軸を定義するためのア
7
オプションはチャートによって異なるので，個々の googleVis 関数のそれらについては，ヘルプファイルを参照してほし
い．
17
レイには角括弧 [ ] を用いる．
一般に次のルールが適用される．
名前に “.” を含まないパラメータ（例えば，width，height）は一つの値で設定される．これら
は，R で行うように設定される．例えば，options=list(width=200, height=300). ブール型の
引数の場合，R のシンタックスを用いて，TRUE または FALSE に設定される．
名前に “.” を含まず，複数の値に設定されるパラメータ（例えば，color）は，“[ ]” で囲んで指
定する．例えば，options=list(colors="[’#cbb69d’, ’#603913’, ’#c69c6e’]")．
名前に “.” を含むパラメータで，複数のサブオプションを持つものは，“{}” を用いて指定する．
こうしたサブオプションの値は，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: 軸の色を設定した地理チャート．
18
2.7.1
チャートエディタ
gvis.editor により，全てのチャートに対して特別なオプションを設定できる．これは編集ボタンを
ページに加えるので，ユーザが自由にチャートを編集・変更・カスタマイズすることができる．これに
関しては，次の例と図 7 を参照．例における gvis.editor のリスト項目は，ブラウザボタンのラベル
を’Edit me!’ と指定している．8
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 ページのコード例の 12 − 16 行目参照）
．
よって，入力データフレームの列名にアポストロフィがある場合，これと区別するため，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
8
https://google-developers.appspot.com/chart/interactive/docs/drawing_charts#charteditor も参照．
9
訳注）1 行目の"Year"=c(2009,
2010) を"Year"=c("2009", "2010") に変更．
19
2 2010
93.3
100.5
R> CR <- gvisColumnChart(df, options=list(vAxis=’{baseline:0}’,
title="Combined Ratio %",
legend="{position:’bottom’}"))
R> plot(CR)
図 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 の出力）がページに挿入
20
されるのを許さない．しかし，プラグインを追加することにより 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 参照）
．
図 9: googleVis の出力を WordPress のブログエントリに入れる．
3.3 googleVis の出力を Google サイト, Blogger 等で利用する．
Google チャートを，他の Google 製品（例えば，Google サイト，Blogger，Google Code wiki pages）
で使うことができる．しかし，ほとんどの場合，チャートは Google ガジェットとして埋め込む必要が
ある．Google ガジェットは XML で書かれ，要素として HTML や Javascript を持つことができる．
Google ガジェットの技術を利用して書かれた ‘Hello World’ プログラムの Wikipedia からの例を次に
10
http://wordpress.org/extend/plugins/custom-fields-shortcode
21
示す．
<?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 にガジェットを埋め込むことができる：
メニューを用いて 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://www.magesblog.com/2011/09/including-googlevis-output-into-blogg
htm を参照．
3.4 googleVis をウェブサイトに動的に埋め込む
本節では，googleVis 関数をダイナミックにウェブページに埋め込む例を示す．
R のパッケージ R.rsp [Ben12] と brew [Hor11a] を用いることにより，R のコードを HTML コー
ドに統合することができる．R.rsp パッケージはそれ自身の内蔵ウェブサーバを持つが，brew は
22
RApache モジュール [Hor11b] がインストールされた Apache HTTP サーバ [Fou10a] を必要とする．
現在，RApache モジュールは，UNIX/Linux と Mac OS X 上でしか動作しないことに注意．
R のバージョン 2.11.0 以来，R は自身のインターネットウェブサーバーを持ち，Rook [Hor13] と
shiny [Rl13] という選択肢もある．これら 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>
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 を参照．
23
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
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>
24
</html>
brew の構文は rsp のものと非常に似ている．詳細については，RApache モジュールと brew パッ
ケージのドキュメントを参照．brew ファイルの簡単な例が，googleVis パッケージに 2 つある．また，
次の R のコマンドにより，フォルダのパスを示すことができる：
R> system.file("brew", package = "googleVis")
3.4.3
Rook で googleVis を利用する
Rook [Hor13] は，Jeﬀrey Horner（RApache と brew の作成者）が作成した R のウェブサーバーイン
タフェースである．他のウェブフレームワークと比較して，Rook は信じられないくらい軽い．Rook は
設定が不要である．それは R のパッケージであるが，R HTTP サーバーとは自由に機能する．よって，
設定ファイルが不要である．特定のフォルダにファイルを置いておく必要もない．その代わり，Rook
のウェブアプリケーションはローカルデスクトップで動く．しかし，Rook を利用するには，HTTP プ
ロトコルに関する知識がある程度必要である．
Rook の応用例を示す．これは，R の小さなデータフレームをデフォルトで googleVis の表として示
す．利用者は，Edit me! ボタンをクリックすることにより見え方を変更し，自分の CSV ファイルを
アップロードすることができる（図 10 参照）
．
図 10: googleVis による Rook のアプリケーションの出力のスクリーンショット．
R>
R>
R>
R>
R>
+
require(Rook)
require(googleVis)
s <- Rhttpd$new()
s$start(listen=’127.0.0.1’)
my.app <- function(env){
## Start with a table and allow the user to upload a CSV-file
25
+
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>")
+
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) {
11
http://www.rstudio.com/shiny/
26
図 11: googleVis による shiny のアプリケーションの出力のスクリーンショット．
+
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")
+
)
27
+ ))
次のコマンドを用いると，例をローカルに実行することができる．
R> library(shiny) ## バージョン 0.4.0 以上が必要
R> runApp(system.file("shiny/", package="googleVis"))
別の例が，Markus のブログ（blog:http://www.magesblog.co.uk/search/label/shiny）に
ある．
4 knitr で googleVis を使う
knitr
12
[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://www.magesblog.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’)
‘‘‘
12
http://yihui.name/knitr/
28
図 12: マークダウンの例の出力のスクリーンショット
次の 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))
29
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 のコードをコピー&ペーストす
ることにより試行することができるインタラクティブモードと，ファイル全体を実行することとを切り
替えることができる．
?plot.gvis でヘルプを表示することにより，より詳細な例を参照することができる．
5 プレゼンテーションで googleVis を使う
Google Chart Tools はウェブページ用に設計されているので，googleVis の出力を MS PowerPoint
13
や Google Docs，OpenOﬃce の Impress，Apple Keynot のような伝統的なプレゼンテーションソ
フトに埋め込むことが難しかったり不可能であったりすることは不思議ではない．
最も簡単な方法は，ウェブページへのリンクによりスライドにスクリーンショットを埋め込むことで
ある．しかし，この方法では，発表者がトークの間に，アプリケーションを切り替える必要がある．こ
れは楽しみでもあるが，たいていはそうではない．
別の方法として，ウェブページ自体としてプレゼンテーションを構築することもできる．
最もよく利用される方法は，Ramnath Vaidyanathan [Vai12] によるパッケージ slidify を利用する
ものである．これは，前節の knitr マークダウンアプローチに基づく．slidify プレゼンテーションの例
が，2013 年の useR!コンファレンスで開かれた googleVis チュートリアルにある．[GdC13]
slidify では，レイアウトの異なるフレームワークと構文をハイライトするオプションを選択すること
ができる．さらに，slidify のスライドは，R からオンラインに，例えば，Dropbox や github に発行す
ることができる．
13
MS-Windows の Microsoft PowerPoint に関しては，プラグイン liveweb が，ウェブページを PowerPoint スライド
に挿入して，スライドショーの間，ページをリアルタイムに更新する機能を提供している．
30
図
13:
2013 年 useR!コンファレンスでの googleVis チュートリアル：
http://decastillo.github.io/googleVis Tutorial
6 R を超えて
本項では，R の通常のコーディングを越えるアイデアと，少し実験的な考えを示す．
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)); "
14
http://code.google.com/apis/chart/interactive/docs/reference.html#addlistener
31
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))
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）．
32
7.4 ローカルディレクトリからモーションチャートを開いたとき，それを見ることが
できないのはなぜか？
2.4 項（14 ページ）参照．
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>
R>
+
R>
+
+
+
+
+
R>
library(googleVis)
dat <- data.frame(x=LETTERS[1:10],
y=c(0, 4, -2, 2, 4, 3, 8, 15, 10, 4))
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")
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）を参照のこと．
33
7.8 会社の仕事で googleVis を利用できるか？
Google のサービス利用規約（https://developers.google.com/terms/）を参照し，会社の IT
部門または法務部に相談すること．確信が持てないときは，Google に直接コンタクトすること．
7.9 バグと問題
googleVis のバグや問題を見つけたら，メールを送付するか，問題リスト（https://github.com/
mages/googleVis/issues）に記入してほしい．
7.10 引用
仕事や出版物で R および googleVis を利用した場合，出典を記載してほしい．記載事項やソフトウェ
アを引用する方法に関しては，
R> citation("googleVis")
および
R> citation()
で確認のこと．
参考文献
[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.8.
[Hor11a] Jeﬀrey Horner. brew: Templating framework for report generation. http://CRAN.
R-project.org/package=brew, 2011. R package version 1.0-6.
[Hor11b] Jeﬀrey Horner. RApache: Web application development with R and Apache. http:
//www.rapache.net/, 2011.
[Hor13] Jeﬀrey 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/
interactive/docs/gallery, 2012.
[Inc12c] Google Inc. Google Motion Chart API. https://google-developers.appspot.com/
chart/interactive/docs/gallery/motionchart.html, 2012.
34
[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.
[Oom14] Jeroen Ooms. The jsonlite package: A practical and consistent mapping between json
data and r objects. arXiv:1403.2805 [stat.CO], 2014.
[Lan12] Duncan Temple Lang. RJSONIO: Serialize R objects to JSON, JavaScript Object Notation. 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] Sebastián Peŕez 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

Download Report