データビジュアライゼーションのためのJavaScriptライブラリ『D3.js』
ビジュアライゼーションについて
大量のデータの中から価値のある情報を抽出する技術をデータマイニングと呼びますが、目で見ても理解し難いデータをぱっと見分かりやすい形に変える技術のことを可視化、あるいはデータビジュアライゼーションと呼びます。
ソーシャルメディアの影響で膨大な情報がネット上に溢れるようになり、ビジュアライゼーションに対する需要が世界的に高まっているのを肌で感じます。
D3.jsとは
D3.jsはデータビジュアライゼーション用の人気の高いJavaScriptライブラリの一つ。
D3.js
D3はData-Driven Documentsの略で、データに基づくドキュメント(HTML, CSS, SVGなど)の操作を行うためのライブラリ。
D3.jsでできること
データの可視化ができる。といってしまうと漠然的すぎるが、データを可視化するあらゆるグラフを作成可能。D3.jsがデフォルトでサポートしている図の形式もあるし、無いものでもD3を巧みに操れば、多種多様なビジュアラーゼーションが実現できる。
サンプルについては公式が充実しているのと、
Tributary
上記のような、ブラウザ上で作成、実行出来るサイトがあったりします。
そこでもサンプルが幾つかある。
サンプルコード
var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); svg.append("g").selectAll("path") .data(chord.groups) .enter().append("path") .style("fill", function(d) { return fill(d.index); }) .style("stroke", function(d) { return fill(d.index); }) .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius)) .on("mouseover", fade(.1)) .on("mouseout", fade(1));
細かなメソッドについては公式APIを参照してください。
API Reference
基本として、d3.select(*)、あるいはd3.selectAll(*)でDOMの指定を行います。
CSSセレクタを使用でき、以降のメソッドはd3のオブジェクトを返すため、メソッドチェーンで書いていくことができます。
このあたりの使用感はjQueryに近いので馴染みやすい人も多いはず。
DOMを指定したあと、data()メソッドでDOMにデータを紐付けます。(逆もできたりする)
そしてそのオブジェクトに対してattr()、style()といったメソッドでviewの部分を操作したり、on()メソッドでイベントハンドラの登録をしたりします。(このあたりはまた別記事書こうと思う)
d3.jsの性質上、dataとviewを紐付けて操作を行うのと、メソッドチェーンで細かい動作の指定ができるため、どうしてもコードが縦長になりがち。
コードの見通しを良くするために
・メソッドの中身を分割する
attr(), style()など、引数にオブジェクトでまとめて指定できるので、できるだけオブジェクトにまとめて、メソッドの外で設定をする。
・MVCを使う
Backbone.jsなどのMVCフレームワークを使い、できるだけModel(データ)と、View(DOM、attr、イベントハンドラ)を分離する。
・CoffeeScriptを使う
jQueryのようにコールバックを多用するライブラリのため、CoffeeScriptに限る必要はないですが、中間言語はコールバックを簡潔に書けるものが多いため、それを利用することもオススメ。
これらを用いてできるだけスマートなコードにしたい。
個々のTIPSはまた別記事で書いていく予定。
まとめ
Webアプリケーション制作の機会が増え、サーバとクライアントサイド間で扱うデータ操作の頻度がが増加し、そしてデータビジュアライゼーションを行う必要性が増しています。今後も増えていくでしょう。
以上、データの可視化を行う際の選択肢として、d3.jsの紹介記事でした。
Google Chart Tools の Geochart API を使って都道府県別グラフを描画する
可視化のためのJavascriptライブラリは数多くありますが、Google Chart Toolsは、googleが提供する可視化を実現するAPI群です。
今回はその中から Geochart API を使ったサンプルとして、都道府県別グラフを描いてみました。
また、他にも様々なAPIが提供されているので、日本語の紹介、解説のエントリも多く存在しています。
簡単にグラフを作れる Google Chart Tools を使ってグラフを作成する方法
Google Chart Toolsを使ってサイトマップを描こう!
jQueryUIでイベントの制御を行う
jQueryUIについて
jQueryUIには便利なUI操作のメソッドが用意されています。
ドラッグ&ドロップ、選択、リサイズ、ソートなどのマウスの挙動を扱うInteractions群や、
アコーディオンやスライダー、ダイアログなどを扱うWidgets群が用意されており、
いずれも簡単にインタラクティブなUIを実装することが可能です。
イベント制御
これらのメソッドには、オプションのオブジェクトを指定することも出来る。
細かなタイミングを制御するためのイベントもプロパティに登録されており、ほとんどのメソッドは、
Events: function (event, ui) { // 処理 }
の形で、様々なタイミングをサポートしている。
引数のuiには、メソッドの振る舞いで用いるjQueryオブジェクトのターゲットなどが格納されており、DOM操作も非常に楽です。
OpenStreetMap(OSM)で画像のパスを指定する方法
OpenStreetMapは、自由に利用でき、なおかつ編集機能のある世界地図を作るための共同作業プロジェクト。
OpenLayers APIが利用でき、地図のカスタマイズが可能です。
APIを利用して画像を地図内に表示したい時、画像のパスが通っていなくて、画像が表示されない場合がある。
そんな時は、以下のようにOpenLayersオブジェクトのImgPathプロパティで画像パスを指定するとよいです。
OpenLayers.ImgPath = 'image_pass';
image_passの部分に任意のパスを指定する。