d3.js の概要
D3.js は Javascript のデータヴィジュアライゼーション向けのライブラリーです。データに基づいて文書を操作します。html、SVG、CSS を使って様々にデータを描画させることができます。ただ、グラフ描画ライブラリーではないので、データを渡せばグラフが出てくるというものではなく、描画の処理はある程度自分で処理を組み合わせて書く必要があります。
学習の動機と目標
d3.js は、基本的には成果物を Web ブラウザで表示することを想定したプログラムと思われますが、SVG を描画します。SVG は Adobe Illustrator でも扱うことができます。
Illustrator にもグラフ描画の機能があり、様々なタイプのグラフを作ったり、見た目をカスタマイズすることができますが、思うようにコントロール出来ず使いづらい面も多々あります。2種類のグラフを重ね合わせる（折れ線グラフと棒グラフなど）設定が難しく、別々に作って重ね合わせたほうが手っ取り早く思ってしまったり、見た目を調節したあとからグラフの数値を変更したら表示が崩れてしまったりすることがあり、同じパターンのグラフを多数作る場合でも結局ひとつひとつ同じカスタマイズをほどこすはめになったりします。
そこで、基本的なグラフを決まったスタイルで繰り返し作るのに d3.js を使い、SVG からIllustrator を経由して Indesign を使った組版の中にグラフを持っていけないだろうか、というのが d3.js を学習する動機です。そのため、まずはモノクロで静止画のグラフを作ることに注力します。インタラクションやモーションについてはあまり考えません。
基本的なグラフが描画できるようになってきたら、Illustrator では作れないようなタイプのグラフや地図の描画などもやってみたいです。
d3.js は、バージョン3から4に変わるときに大きな仕様変更があり、3以前のコードは現行のバージョンでは動作しないことが多いようです。何冊かは日本語でも d3.js の書籍が刊行されていますが、残念ながらバージョン3以前の時に書かれたものがほとんどのようです。ただ今から古いバージョンの書き方を勉強しても仕方ないので、現在の最新のバージョン5系列を使って学習していきます。