Google データポータルでヒストグラムなどの標準的でないグラフを描く(Vega/Vega-Lite)

データポータルの限界

Googleデータポータル*1はSpreadsheetやGoogle アナリティクス等の様々なデータソースと接続して気軽に表・グラフを含むレポートを作成できる強力なツールだ。しかし、データポータルに標準で用意されていない可視化手法を実現しようとするととたんに困難にぶち当たる。

例えばデータポータルではヒストグラムを作成できない。いやそんなまさかという感じだができないものはできない。

箱ひげ図もダメだし、棒グラフにエラーバーもつけられないし、ヒートマップも描けないし、色と形の両方に変数を割り当てた散布図も描けないし…

とまあできないことを並べていくとキリがない。

しかしデータポータルはできる範囲のことをやるだけなら手軽だ。特にデータの探索機能は優れている。いろいろな条件でデータを絞り込みながら、簡単な棒グラフや折れ線グラフ、データテーブルを眺める。それで満足すべきではないのか…?

だがやはりヒストグラムくらいは作りたい。そうでなければ日常生活に支障がある。できればもっと複雑な可視化もしたい…

標準的な範囲を超える

冒頭に挙げた「データポータルにできないこと」はあくまでデータポータルのマニュアルに記載されているような標準的な使い方の範囲の話だ。

標準的な使い方を超えた可視化を実現する機能として、コミュニティビジュアリゼーション(Community visualizations)がある。これはサードパーティの開発者によって提供されている(中にはGoogle自身が開発者になっているものもある)可視化ツールで、標準的なものとは違ったグラフやコントロールが提供されている。その中にはレーダーチャートやガントチャートローソクチャートなんかがあり、ヒストグラムもある。

コミュニティビジュアリゼーションはベータ版*2の機能で、当初は選択肢が限られていたが(おそらく)昨年1月のアップデート(リリースノート(2020 年) - データポータルのヘルプ)でコミュニティ由来のビジュアリゼーションが利用可能になり、今はかなり選択肢がある。

ヒストグラムを作りたいだけならここからヒストグラムを選んでも良いのだが、もっと強力なものがある。それがJerry Chenの手によるVega/Vega-Liteだ。これは選択して追加してみるとワードクラウドが表示される。そのため、おそらく軽く触ってみただけの人が「ワードクラウドを作るためのビジュアリゼーションである」というような紹介をしている記事がちらほらあったが、それは正確ではない。このビジュアリゼーションは確かにワードクラウドも作成できるが、実際の機能はそれよりもずっと強力だ。

このビジュアリゼーションはその名の通り、Vega、あるいはVega-Liteをデータポータル上で利用可能にする。

Vega/Vega-Lite

Vega、Vega-Liteとは何なのか?

英語版Wikipediaに簡単な説明がある。

Vega and Vega-Lite are visualization tools implementing a grammar of graphics, similar to ggplot2. The Vega and Vega-Lite grammars extend Leland Wilkinson's Grammar of Graphics.

Vega and Vega-Lite visualisation grammars - Wikipedia

ggplot2という単語が出てきた。Vega、Vega-Liteはggplot2と同じように、リーランド・ウィルキンソンのGrammer of Graphicsの実装の一つなのだ。上記説明にもあるように、複雑なデータの探索に適した拡張も含まれている。実際にはVega、Vega-Liteは可視化をどのように行うべきかを指定する記述フォーマットで、可視化の方法やデータとのマッピングといった情報をJSONで記述していく。JSONをしかるべき処理系に渡せば目的のグラフが得られる。

Vegaは細かい指定ができる分、記述が多くなる。Vegaの高級言語としての位置づけがVega-Liteだ。Vega-Liteで記述したものをVegaに変換することもできるので、基本的にはVega-Liteを使いつつ、必要に応じてVegaに変換してより低水準の調整をするような使い方がVega-Liteの説明でも推奨されている(A High-Level Grammar of Interactive Graphics | Vega-Lite)。

今回はデータポータル上で使うので、まずはVega-Liteを試してみるのが良いだろう。

データポータルでVega-Liteを使ってみる

今回はみんな大好きirisを使ってヒストグラムを作ってみよう。目標はこれだ。

f:id:Rion778:20210715100519p:plain

下準備

まずはデータポータルのレポートを準備する。

通常のデータポータルの使用方法の範疇なので細かいところは折端るが、データポータルから空のレポートを作成して、次のデータ(irisの各行にidを振ったもの)をデータソースとして追加する。

https://gist.github.com/nozma/14776fb1aa9f1ddbf7835b9d9fe6551c

csvとして一旦ローカルに保存して、「ファイルのアップロード」を使ってデータソースを作成すると楽だ。

ビジュアリゼーションを追加する

Community visualizationsを開き、「+もっと見る」から「Vega/Vega-Lite」を探して追加する。開発者がGoogle以外のものは追加時に規約への同意を求められるので、一応諸々確認して各自判断してほしい。

f:id:Rion778:20210715101632p:plain

f:id:Rion778:20210715101545p:plain

色々同意してビジュアリゼーションを追加すると、ワードクラウドが表示されるはずだ。

f:id:Rion778:20210715101609p:plain

ヒストグラムにする

表示されたワードクラウドを選択した状態で右ペインに表示される内容を編集していく。通常のグラフや表と同じだ。

まずFieldsを次のように設定する。

f:id:Rion778:20210715101656p:plain

idは表示には使わないが、指定しておかないとSpecies単位でPetal.Widthが集計されてしまうので、それを防ぐために入れている*3

次に右ペインを「スタイル』タブに切り替える。そうすると上の方になにやらJSONが書いてある領域がある。

f:id:Rion778:20210715101749p:plain

そこのJSONを次のように書き換える。

 {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "mark": "bar",
  "encoding": {
    "x": {
      "bin": {"step": 0.1},
      "field": "$metric0"
    },
    "y": {"aggregate": "count"},
    "color": {
      "field": "$dimension0"
    }
  }
 }

これでヒストグラムになったはずだ。完。

ちょっとは説明して

先程記述したJSONの各フィールドについて簡単に説明する。

  • "$schema": このプロパティは必須で、Vegaを使うのかVega-Liteを使うのかをバージョンと共に指定する。サンプルファイルとかに記述があるのでコピペすれば良いと思う。
  • "mark": プロットの方法を記載する。"bar"なら棒グラフ、"point"なら散布図といった感じ。ggplot2で言うところのgeomみたいな感じで使う。
  • "encoding": 主にデータのマッピングを行う。今回はx軸とy軸と色にデータをマッピングしている。ggplot2で言うところのaesみたいな感じ。binの幅の指定だとか、集計方法の指定とかもこの中で行う。

記述方法は違うものの思想は近いのでggplot2に馴染みがあればそれほど迷うことはないだろう。ggplot2に馴染みが無くとも特に意味不明なことをやっているわけではないので、少し練習すれば理解できると思う。多分。おそらく。

また、データポータルでVega/Vega-Liteを使う際特有の挙動として、データへのアクセスがある。

「データ」タブで設定したディメンションには"$dimension0", "$dimesion1"...といった変数でアクセスできる。同様に、指標には"$metric0", "$metric1"...でアクセスできる。他にも"$themeSeriesColor0"などでテーマの色が取得できるようだ。また、$dimension0.nameのようにすればディメンション等の名前が取得ができる。 これはサンプルが記載されたレポート( https://datastudio.google.com/u/0/reporting/88379d94-19e1-4403-ae92-d279dcb2cbf5/page/mxl9 )を見ると分かるが、これ以外のドキュメントが見当たらないので他に使える変数があるのかどうかは分からない。

もっと先へ

より高度な使い方をするためにはVega-Lite(あるいはVega)の使い方を理解していく必要がある。チュートリアルhttps://vega.github.io/vega-lite/tutorials/getting_started.html )をざっとやってみれば、基本的なプロットの仕方とデータの加工の仕方までわかる。あとはExamples( https://vega.github.io/vega-lite/examples/ )の中から好きなプロットを探してデータポータルに移植してみるなどすると理解が深めやすいだろう。Examplesにある例の殆どは変数名やラベル名を調整すればデータポータルでも動く。箱ひげ図やヒートマップを描いたり、誤差範囲付きの折れ線グラフを描いたり、散布図の周辺にヒストグラムを置いてみたり、大抵のことはできる。そして一度JSONを書いておけば他のレポートで使い回すのも容易だ。

Vega-Liteだけでも通常の集計用途なら十分な可視化能力があるが、Vegaを使えば記述量が増える代わりに相当自由度は上がるようだ。パックマンだって動く( https://vega.github.io/vega/examples/pacman/ )。データポータルで無茶をやりたい人はぜひ挑戦してみてほしい。

*1:どういう経緯か不明だが日本語以外では相変わらずData Studioという名称が使われているようで、Google Data Studioだとか#datastudioなどのキーワードを使わないと日本語以外のリソースが見つけづらい。

*2:かなり長いことベータ版のままだが。

*3:通常のグラフや表と同じだが、データポータルではディメンションの値の組み合わせ単位で指標の値が集計され、集計された値が可視化に使われる。したがって、逆に集計したくないということであれば、IDのようなユニークな値をデータの各レコードに振っておき、それをディメンションに指定しておく必要がある。