Rothenbergが、GitHubグラフでおなじみのD3.jsの解説をしています。今日は、D3.jsを使って、このようなグラフを描いてみる。elementとバインディングする。チャート、地図、配列など多くのAPIがある。チャートなどをビジュアル化するにはSVGが適している。elementに同期する機能を提供してくれる。src="http://d3js.org/d3.v3.min.js">&lt;script>d3.jsスクリプトをインクルードすると、elementを追加するのに必要なトップレベルのd3オブジェクトができる。SVGはHTML5のタグで、ページの形状を決めることができます。CSSでスタイルが決まり、一般的なhtmlタグのようにJavaScriptで操作できるが、テキストというよりは形としてデザインされているので、様々な描画に使うことができる。svg.append('g');jQueryっぽく見えるが記述法は若干異なる。elementをbody内に追加し、そのelementを示すd3オブジェクトを返す。elementにheightとwidth属性をセットできる。elementを追加する。elementはビジュアル化の機能をもたないので、ユーザの見た目には特に変化はない。DOMを確認するとタグがあることがわかる。&lt;/body>次にデータを追加する。values)ファイルである。APIを使って、データをパースして、DOMの各行にelementを挿入する。コードを確認する前に、二つのコンセプトを紹介しておきたい。elementをつくっていく。名前から想像がつくように、ブラウザはそのelementを長方形として描画する。D3のメインのメカニズムは、データをDOMに結合することである。elementがあることを担保できる。Bostockのブログでこのたりの詳細が説明されている。[概念図]コード上では実際にどうなっているのか。snow.tsvを読込み、パースする。二つのコールバックを用意する。各行をフォーマットして、そしてデータを処理してDOMに追加する。averageカラムをstringからnumberに変換することで、各行をフォーマットします。データとbarクラス(ページを読込んだときには空だが、後で役にたちます。)をelementにバインドする。elementへの紐付けがないデータ(それがenter()の意味。elementをつくる。rectの位置属性をセットする。elementに紐づいたデータアイテムとともに呼び出されるcontantもしくはfunctionになる。ここまでくるとバーチャートが表示されるが、しかしデータはまだ重複したままである。(マウスオーバーするとわかります。見た目はおかしいが、このようなグラフになる。APIをいくつか紹介する。APIデータに基づいて、xとy方向それぞれにスケールさせる必要がある。バーの横幅は何ヶ月分を表示させるかにより、バーの高さは最大降雪量の月の数字次第で可変する。月のサイズはオリジナルのスケールを利用し、降雪量にはリニアに変化するスケールを適用する。yをセットする際、tsvのコールバックを指定したスケール方式に変更する。})どのようにx方向にスケールさせているかコードを確認してみよう。データから月を抽出する。d3にx方向には通常の値を設定するように指示する。(数えて並べ替えることはできるが、この時点では月の名前を認識するわけではない。バーを横に引き伸ばし、各バーの間に一定の間隔を空ける。計算結果を月データに適用する。次にバーごとに正しいxの値と幅をセットする。上記の計算をもとに各バーの幅をセットする。xをもとにどこにバーを配置するのかを指示する。17で同じロジックがy方向にも適用されていることがわかる。唯一違うのは、平均降雪量というのはnumberなので、リニアスケールを採用しているところ。ラベルが表示されていないことを除いては、このように見た目がぐっと良くなった。axesで、グラフの軸線を操作することができる。y方向に余裕を持たせるために、ggroupを右に移動させる。elementを追加する。elementに適用するように指示する。同じようにy軸を決める。このように、x軸に月の名称、y軸に降雪量(インチ)に表示されるようになった。次はもっと動的にしてみよう。sets降雨量や気温など他の気象データも取り込めるようにしてみよう。&lt;/select>シンプルなセレクトボックスを用意して、JavaScriptを変更してみる。functionでラップする。どのデータを読込むか指定する。(もう、'data/snow.tsv'をハードコードはしない。elementとバインドするかを思いだしてほしい。elementよりデータの行が多い場合、enter()を使っていた。elementが多いケースとなり、その場合は、exit()を使い、elementを削除する。グラフではこのように気候データの切り替えができるようになる。UIエレメントを追加。type=checkbox>Sort&lt;/input>次にロジックを追加する。変更したイベントにバインドされることで、ソートするチェックボックスが変更になれば呼び出されるようになる。月を並べ直し、xドメインを更新する。APIを使い、750msの実行時間を設定することで、elementが一気に描画されないようにする。全てのバーを描画する。(.barクラスをもっている。x軸のラベルを表示する。これで最終形のチャートができあがる。D3はAPIのドキュメントが充実していて、たくさんの事例がギャラリーにあるので是非チェックしてみてください。