Googleデータポータルからスプレッドシートに接続してPCとスマホで見れるダッシュボードを作ってみたいと思います。
アナリティクスやサーチコンソールにも接続できますが、最初はディメンションや指標が絞られたデータの方がとっつきやすいと思います。サンプルは私の飛行機の搭乗実績。別のブログ掲載用ですが、サンプルにちょうどいいかな？と思い記事投稿します。
今年、ANA搭乗少ないんじゃない？
昨年いっぱい乗ったので…
Googleデータポータルについてほぼまっさらな方
以下に、概要的な内容を投稿しています。先に読んでもよいし、この記事で触ってから読んでも良いと思います。
データポータルの利用登録は済ませておくようにしてください。概念的には上記にまとめていますが、利用登録だけ済ませておけば、この記事で手を動かせる内容にしています。
今回使うデータと完成形
スプレッドシートのデータ
使うデータは私のフライト搭乗実績という生々しいものです。
データポータルの完成形
スマホ用も作ったのですが、今回はPC用をお題にします。
作成のポイント
- フィルターを3種類（期間×1、ディメンション×2）
- グラフは5種類
- スコアカード
- 普通の棒グラフ
- 積み上げ棒グラフ（期間累計）
- ドーナツチャート
- 表（テーブル）
Googleデータポータルでスプレッドシートを可視化
- ステップ1スプレッドシートのテンプレートをダウンロードする
- ステップ2データポータルからスプレッドシートに接続する
- ステップ3計算フィールドを追加する
- ステップ4キャンバスの大きさを決める
- ステップ5グラフを配置していく
- ステップ6動作確認を行う
スプレッドシートのテンプレートをダウンロード
今回のお題のデータをダウンロードして、Googleスプレッドシート上にアップロードします。
Googleデータポータルからスプレッドシートに接続
▲ まずは「新しいレポートの開始」→「＋」アイコンで新規のレポートを開きます。
▲ ファイル名を「練習用レポート」など都合の良いものに変更してください。
▲ 右サイドバー下部の「＋新しいデータソースを作成」をクリックします。
▲ データポータルから接続可能なコネクタがたくさん表示されます。今回は「Googleスプレッドシート」を選択します。
▲ コネクタの管理画面に入りました。「搭乗実績(’18/01～)」という名前のスプレッドシートを選択、ワークシートが3つあるので「搭乗実績」シートを選択します。オプションはオンにした状態で右上の「接続」をクリックします。
- （オン）先頭行をヘッダーとして使用する
- （オン）非表示のセルやフィルタ処理されたセルを含める
▲ 左からフィールドの一覧、データのタイプ、集計方法が表示されます。
フィールドは読み込んだエクセルの「搭乗実績」ワークシートに定義された列名が入っています。
緑色がディメンション（非数値フィールド）、水色が指標（数値フィールド）です。
タイプは、データの型です。
エクセルやスプレッドシートに型が入っていればそれを継承、入ってなければデータポータル がいいように解釈します。
ここでは、日付、テキスト、数値と認識されました。日付が文字列とかで認識されてしまうとあとで使い勝手が悪くなるのでここで変更しておくと良いでしょう。
今回はこのままにします。
▲ 集計方法とは、数値型のフィールドを表の集合として時に「どのようにまとめあげるか」みたいなことです。今回のケースでは何もしないと「合計」として扱われます。他のオプションは画像の通り、平均値や件数、最小値・最大値…等々があります。
計算フィールドを追加する
フィールドの一覧のみでもよいのですが、いくつか計算フィールドを追加します。
計算フィールドとは、既存のフィールドを利用して他のフィールドを作る一般的なBIツールが備える機能です。データポータルを使い込むためにはこのフィールドの理解が必要です。
エクセルだと既存の列から別の列で関数使って色々やるやつです。制御構文が使えるので処理的には融通ききますが、現在のところはデータポータルの関数がそれほど多くはないですね。
いくつか追加の計算フィールドを作ります。
▲ フィールドが一覧で表示された右上「＋フィールドを追加」をクリックします。
最初に「PP/FOP単価」。
PP/FOPはポイントみたいなものだと理解してください。料金をポイントで割ってポイントあたりの料金を出しています。
項目名と数式いれたら「保存」して行ってください。
次に「フライト回数」。
元のエクセルには行番号がないので、代わりのフィールドを作ります。
どの項目でも良いのですがCOUNT関数で数を数えます。行番号と異なるのは、フィルターで表を絞った時にうまい具合に再計算してくれます。
最後に「ルート」です。
出発フィールド、到着フィールドを繋げてルートという文字列フィールドを作っています。
▲ ここまでできたら右上にやや隠れている「レポートに追加」を押してこの画面を閉じます。
簡単な項目のみですが、オリジナルのデータソースにフィールドを追加するイメージは掴めたかと思います。もちろんもっと複雑な計算も可能です。
キャンバスの大きさを決める
レポート作成画面を開いたらまず最初にキャンバスの大きさを決めましょう。右サイドバーの「レイアウトと設定」から「キャンバスサイズ」を選択します。
- 幅：780ピクセル
- 縦：1,450ピクセル
グラフを配置していく
各コンポーネントのサイズは数値として指定できないので目分量でやっていくことになります。グリッド線を目安にしながら配置していきます。同じタイプのグラフはサイズを揃えると綺麗に仕上がります。
フィルター
使うフィルターは3つです。このフィルターを使うとグラフが動的に変動します。
- 期間
- 出発（略称）
- 航空会社
▲ 期間はカレンダーマーク、ほかの2つはその隣のマークを押します。
▲ 期間はそのまま使えますが、航空会社がないので一つを選んでディメンションを変更します。
▲ フィルターの背景色と文字色を変えます。ANAっぽくしたかったのでRGB色は次のものを使っています。（RGB：#002596ff）
設定は右サイドバーのスタイルから変更できます。
▲ この後は並べるだけです。グリッド線をうまく活用しながら並べましょう。
スコアカード
スコアカードは指標を目立つようにしてくれる機能です。厳密にはグラフではないのですが指標選ぶと文字カードにしてくれます。注目指標をレポートの上部に配置するのはBIツールでよく使われる手法です。
▲ スコアカードは桁省略したものと、そうでないものの2種類あります。場面によって適当なものを選べば良いと思います。
▲ スコアカードを選んで、使いたい指標を選んでいきます。
▲ またうまい具合に並べます。色は背景は薄いグレー、文字色は「RGB: #002596ff」を使っています。これ以降、濃いブルーの色は全てこのRGB色です。
▲ 下の段はコピペで手抜き。
上の段は、表内のデータを「合計」という集計方法でまとめあげています。2段目は平均にします。
▲ 2段目は全部平均にしています。コピペした上段と異なる値になっていますね。
▲ さらに３段目を追加。左二つの集計方法を「最大値」に、名前は画面の通りに変更します。右のスコアカードは指標の中から「フライト回数」を選びます。
▲ ちなみに「フライト回数」の集計方法は変更できません。これはデータソース設定の際に設定した計算フィールドでその際に、SUM（合計）を指定しているからです。
円グラフ（ドーナツグラフ）
続いてドーナツグラフを2つ作ります。
レポート上部のツールバーから「グラフを追加」→ドーナツグラフを選択します。
↓ドーナツが出現します。
ドーナツグラフの配色を変更します。
▲ グラフを選択した状態で、スタイルプロパティを変更します。配色を「単一色」、色をRGBで「#00a0df」を指定します。
▲ 背景をグレーにするとこんな感じ。
▲ ドーナツチャートを作った時、ディメンションは「出発(略称)」、メジャーは「加算マイル」になっています。このままでもいいのですが今回は指標を「フライト回数」に変更します。3レター表記の空港ごとの利用回数になります。
▲ ドーナツグラフを複製します。2つ目のディメンションを航空会社に変更しています。これで航空会社ごとの利用回数となります。
時系列グラフ
続いて棒グラフ関連。マイルの累計グラフと各月での獲得がわかるように棒グラフを一つずつ作ります。どちらも棒グラフですが、データポータル上では異なる種類のグラフとなっています。
レポート上部のツールバーから「グラフを追加」→「時系列グラフ」を選択します。
↓イケてない折れ線グラフが出現します。
まばらでイマイチです。これはディメンションの期間を変更すると直せます。
次の設定を一気にいきます。
- データプロパティ
- ディメンション「期間」の表示形式
- 「自動」→「年、月」へ変更
- ディメンション「期間」の表示形式
- スタイルプロパティ
- 系列1「折れ線」→「棒グラフ」へ変更
- 「累計」にチェック
▲ 時系列で積み上げの棒グラフが出来上がりました。データの粒度によってディメンション「期間」の表示形式を選択した方が良さそうです。
棒グラフ
同じ期間を示す棒グラフですが、今度は「時系列グラフ」ではなく、「縦棒グラフ」で暦順に取得したマイルを描画してみます。
▲ 時系列グラフをコピペ、右サイドバーでグラフタイプを変更します。
▲ コピペしたものは期間が「降順」になってい流ので「昇順」に変更します。
▲ 最後に2つの棒グラフをコピペして、指標が「PP/FOP」になるものも作っておきます。これで航空会社のポイントの積算と各月の取得状況も描画されました。
表（テーブル）
最後に一つ表を入れておきます。グラフじゃないけど表でみたい情報っていうのもあります。データポータルの表は指標を色で濃淡をつけることができます。
レポート上部のツールバーから「グラフを追加」→「ヒートマップ付きデータ表」を選択します。
▲ 指標「マイル」に濃淡がついたデータ表が出現しました。
▲ 表示領域いっぱいに表を広げた後にディメンションを増やしていきます。
▲ 指標も同じ要領で増やせます。必要なディメンションと指標を入れたら列の枠を整えて好みの配色にすればヒートマップ付きデータ表の完成です。
レポートタイトル
最後にレポートタイトルを入れます。図形やテキスト、画像が使えます。
▲ ANAのサイトをイメージしてみました。「令和」はおまけ（著作権フリー画像）。
動作確認を行う
▲ 出来上がったらレポート上部の「ビュー」を開いて動作確認します。フィルターやツールチップが動作することを確認しましょう。
▲ フィルター、ツールチップの動作確認。
▲ テーブルはスクロールできます。並べ替えも可能。
まとめ
ということで概念的な話ははし折り、駆け足でハンズオンしてみました。ちゃんと読んで試した方はツールのイメージが持てたのではないでしょうか。
まぁ、普通に考えて飛行機の記録ごとき、こんな面倒なことやらないでしょw
ビジュアライズする。なぜならそこにデータがあるから