火曜日, 12月 15, 2015

D3.jsによるデータビジュアライゼーション 0

11月から12月にかけて、長岡造形大学でD3.jsを使用したデータビジュアライゼーションの授業を担当した(全4回)ので、その際に調べたことなどをまとめる。授業の中で触れられなかった内容など、補足的な資料と個人的な興味。

データビジュアライゼーションとは

その名の通りデータを視覚的に認識できるようにすること。

視覚化することの利点

数字だけでは把握しにくかった事実を見つけることができるというのもあるが、デザイナー的な視点からするとデータをグラフィックの要素に活かせるというのも魅力的。

インフォグラフィックスとの違い

インフォグラフィックスの一部と考えられるが、より扱うデータ量が多く、人間の手による編集を加えない。

データビジュアライゼーションのための7つのステージ

Ben Fry著「Visualizing Data」によると、データビジュアライゼーションのための7つの手順が示されている。

  1. Acquire 入手する
  2. Parse 分析する
  3. Filter 除去する
  4. Mining 発掘する
  5. Represent 表現する
  6. Refine 洗練する
  7. Interact 対話する

発見のためには、仮説を立てるのも大事だが、とりあえずやってみるというのも大事。

データの集め方

公開データを利用する
インターネット上には自由に使えるデータが存在している。D3.jsではCSVやTSV、JSONなどをパースできる。公開データをよく見てみると、ファイルの形式こそCSVだがExcelをそのままExportしたのか余計なデータが入っていたりして使えない場合がある。

自分で集める
ないデータは集めなければならない。マナーや法律は守る。スプレッドシートやOpenDataKitを活用する。

D3.jsとは

Data-Driven Documentの略。

データをDOM上で表現できるツール。JavaScriptだけでDOMの操作をしようとすると煩雑になるものを、D3が楽にしてくれる。 自由度が高い分、逆に何をすればいいのか分かりにくいところもある。単純なチャート化であれば表計算ソフトなどで十分。 データから何か意味のあるパターンを見つけ出すための視覚化(exploratory visualizations)と、既に分かっていることを解説するための視覚化(explanatory visualization)があって、D3は後者に向いている。

D3はSVGが扱いやすいので、作ったデータをIllustratorに持っていくことも簡単。

関数型プログラミングの特徴を活かした設計になっている。色々触ってみて少し感覚は掴めたかも。

参考

原書はほとんどSafariで読めて、本当に助かった。特定の領域を片っ端から調べるのにこんなにいいサービスはない。末長く続いて欲しい。英語にアクセスできるかどうかで情報の量も質も全然変わってくる。

0 件のコメント: