11月から12月にかけて、長岡造形大学でD3.jsを使用したデータビジュアライゼーションの授業を担当した(全4回)ので、その際に調べたことなどをまとめる。授業の中で触れられなかった内容など、補足的な資料と個人的な興味。
データビジュアライゼーションとは
その名の通りデータを視覚的に認識できるようにすること。
視覚化することの利点
数字だけでは把握しにくかった事実を見つけることができるというのもあるが、デザイナー的な視点からするとデータをグラフィックの要素に活かせるというのも魅力的。
インフォグラフィックスとの違い
インフォグラフィックスの一部と考えられるが、より扱うデータ量が多く、人間の手による編集を加えない。
データビジュアライゼーションのための7つのステージ
Ben Fry著「Visualizing Data」によると、データビジュアライゼーションのための7つの手順が示されている。
- Acquire 入手する
- Parse 分析する
- Filter 除去する
- Mining 発掘する
- Represent 表現する
- Refine 洗練する
- 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で読めて、本当に助かった。特定の領域を片っ端から調べるのにこんなにいいサービスはない。末長く続いて欲しい。英語にアクセスできるかどうかで情報の量も質も全然変わってくる。
2017年5月現在ではVersion 4に対応した本は少ないが、基礎的な考え方は同じ。
- ビューティフルビジュアライゼーション テクニックじゃなくて知識として入れておくエッセイ集。
- ビジュアライジングデータ 言語はProcessingだけど視覚化の考え方は同じ。
- What’s the difference between an Infographic and a Data... - Jack Hagley // Graphic Design // Infographics インフォグラフィックスとの違い。
- Interactive Data Visualization for the Web 無料で読める。基本はこれ。日本語は有料。
- バッドデータハンドブック 実はデータを用意するのが大変なのでこれは読んだ方がいい。
- D3.js in Action 基礎からの積み上げ方が良い。解説が丁寧。
- Data Visualization with D3.js Cookbook やりたいことがあるけど方法が分からない場合に便利。
- Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript これも分かりやすかった。特にデータバインディングの解説。
- Developing a D3.js Edge 再利用可能なチャートの作り方、TDD、プラグイン開発など一段上の知識が必要な場合。
0 件のコメント:
コメントを投稿