「PI Study #4 「GoogleCharts、D3.jsによるデータビジュアライゼーション入門（ハンズオン）」」に参加してきました

今日は日曜日でしたが、JavaScript で利用できるデータビジュアライゼーションライブラリである「Google Charts」「D3.js」のハンズオンに参加してきました。

約5時間におよぶ長時間セッションでしたが、そのうち、Google Charts が6割、D3.js が4割という感じでした。

Google Charts、D3.js ともにほぼ初体験でしたが、講師である今氏の問題・解答コードがしっかり準備されていたので、とても濃密なハンズオンを体験することができました。
https://github.com/katsuakikon/datavisualize

ありがとうございました！

で、このハンズオンに向けて、気合い入れて書籍買ってみました。
・・が、前日に届いたので、事前に第1章しか読めず。。

データビジュアライゼーションのためのD3.js徹底入門 Webで魅せるグラフ&チャートの作り方

作者: 古籏一浩
出版社/メーカー: SBクリエイティブ
発売日: 2014/06/02
メディア: 大型本
この商品を含むブログ (2件) を見る

非常に丁寧に書かれているので、とても役立ちそうです。

タイトル

PI Study #4 「GoogleCharts、D3.jsによるデータビジュアライゼーション入門（ハンズオン）」　（2014.9.28）

主催

PI Study

スペシャルサンクス

テラインターナショナル　朴氏

会場

東京都豊島区東池袋３丁目４番３号池袋イースト10F
テラインターナショナル株式会社

Twitter ハッシュタグ

#pistudy

「3つの Work Shift」より

ゼネラリストから「連続スペシャリスト」へ
孤独な競争から「協力して起こすイノベーション」へ
大量消費から「情熱を傾けられる経験」へ

なるほど。「連続スペシャリスト」が求められるというのは、確かに現場の実感としてありますね。頑張ろう！！

GoogleChartsを使ってみよう

今氏（Sola株式会社）

http://www.itdashboard.go.jp/Statistics/system#200
とか。

GoogleChartsの特徴

JSで簡単にグラフが書ける
出力形式は SVG

Chart Gallery にグラフの一覧が
一番使うのは、API Reference
- ただし、サンプルコードは少し雑なので注意

使い方

Google JSAPIのロード
グラフ用パッケージの指定
描画処理の呼び出し
- Googleに一旦データを送信して、結果を受け取る
- コールバック関数をセットする

Googleにデータを送信するという性質上、秘匿データは送らない方がよい。あと、ネット環境が使えない状況ではグラフが見れない

書き方

https://github.com/katsuakikon/datavisualize/blob/master/question/gc/start_sample.html

データ設定領域
- Googleが読める形で指定する
表示設定領域
描画処理領域

case 01

普通は、chartArea を使う
chartAreaで "100%" 指定すると、凡例が消えてしまうので注意
直接 "width", "height" だと、integer指定しかできない

case 02

colorsのサイズよりもバーの種類が多い場合は、colorsが繰り返し使われる

case 03

縦軸は vAxis、横軸は hAxis

case 04

ツールチップをOFFにするには、tooltip: {trigger: 'none'}
要素をクリックした時にツールチップを表示させるには、tooltip: {trigger: 'selection'}

case 05

積み上げ棒グラフにするには、isStacked: true

case 06

データ配列の説明はここを参照
- カラム0のデータ形式は全て合わせないといけない
- 一部だけ数値にすると計算処理が入ってしまい、「2007.0」などという表示になってしまう
- 軸名は、文字列にしておいた方が無難
1レコード目は、ヘッダ（凡例）として扱われる

case 07

ツールチップのフォーマットは、ここを参照
- カンマ区切りのフォーマットは、patternオプションを使う

case 08

棒の1本1本に個別の色を付けてあげたい場合
{role: 'style'} で、直前のデータにスタイルを充てることができる
詳しくは、ここ

case 09

データをソートするには、sort({column: 1}) などと使う
以下の API Reference を参照（つまり、データ形式によらず共通で使える）
arrayToDataTableの戻り値で受け取った data は、DataTableクラスのオブジェクト
sort() はメソッドチェーンできない
- おそらく、sort() はソート順の書き換えをするだけ。DataTableオブジェクトは元のデータを保持している

case 10

グループ化
ここを参照
groupメソッドの引数は、{対象データ, グループ化する列のインデックス（配列形式で）, 集計列（集計オプション）}

データフォーマットの形式が同じであれば、BarChart のところを ColumnChart（縦バージョンの棒グラフ）に書き換えてもOK
- まずは、Chart Gallery のグラフの一覧から、気になるグラフの Data Format をチェック！

パイチャート
コンボチャート（折れ線入り）
- seriesType で、全体のグラフ形式を指定する（"bars" など）
- series で個別に指定する。なお、インデックスはデータの開始を起点とするので注意

WebAPIのデータを使う
IT Dashboard のAPIを使ってみる。使い方は、ここ

D3.jsを使ってみよう

D3.js の特徴

非常に凝ったグラフが書ける（が、簡単に書けるわけではない！）
出力形式は SVG

使い方

D3.jsのロード
コードを書く

参考になるサイト

d3.select("#result").append("svg") から書き始める
- サイズを指定した時点で、描画される

case 03

文字を描画するときは、'dominant-baseline' を気にしないといけない
- テキスト描画位置を参照

case 04

ヒント
selectAll, data, enter はセットと考えてよし
- selectAll は新しいDOM要素を指定できる（"hoge"とか）
- enter は、データ数だけ要素を生成（理解が難しい。。曲者）
- data でセットしたデータを、d や index(or i) で簡単に使えるのが D3 のスゴイところ

case 05