akiyoko blog

akiyoko の IT技術系ブログです

「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章しか読めず。。


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




主催

PI Study

スペシャルサンクス

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

会場

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

Twitterハッシュタグ

#pistudy




「3つの Work Shift」より

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

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





 

GoogleChartsを使ってみよう

今氏(Sola株式会社)

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

GoogleChartsの特徴

  • JSで簡単にグラフが書ける
  • 出力形式は SVG
  • Chart Gallery にグラフの一覧が
  • 一番使うのは、API Reference
    • ただし、サンプルコードは少し雑なので注意

使い方

  1. Google JSAPIのロード
  2. グラフ用パッケージの指定
  3. 描画処理の呼び出し
    • 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 DashboardAPIを使ってみる。使い方は、ここ



 

D3.jsを使ってみよう

D3.js の特徴

  • 非常に凝ったグラフが書ける(が、簡単に書けるわけではない!)
  • 出力形式は SVG

使い方

  1. D3.jsのロード
  2. コードを書く
  • 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

  • domain は目盛りの数([0, 0] を指定すると出なくなる)
  • range は軸の長さ(ピクセル数)
  • translate は出力する起点のピクセル


case 06

  • X軸の「.orient("bottom")」は、指定しなくてもデフォルト


case 08

  • D3では、jQueryを使ってAjax的な書き方をしなくても、Web APIを呼ぶことができる
  • 「.append("table")」で、テーブル要素を追加できる

 

D3.js を使ってみた感想(by 今氏)

  • D3はそれほど難しくない
  • enter, existはアニメーションを書くときのキモになる