googleVis-0.6.1 入門1 はじめに 1.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

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

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

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を超えて 31

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

7 よくある質問 — FAQ 32

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

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

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

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

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

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

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

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

7.8 会社の仕事で googleVisを利用できるか？ . . . . . . . . . . . . . . . . . . . . . . . . 34

2

7.9 バグと問題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

7.10 引用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

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 ワークショップで，Sebastian Perez

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 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)により次のメッセージが表示されると，インストールは成功である．

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] "<!-- MotionChart generated in R 3.

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

9

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

..$ footer : chr "\n\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" "jsData" "jsDrawChart" "jsDisplayChart"

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

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

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

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


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

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

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] は，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

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> 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 PowerPoint13や Google Docs，OpenOffice の 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> 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）を参照のこと．

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

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

googleVis-0.6.1 入門1 はじめに 1.1 モチベーション...

Documents

Transcript of googleVis-0.6.1 入門1 はじめに 1.1 モチベーション...