ドリルダウンできるWebベースのツリーマップグラフライブラリ「webtreemap」
webtreemapはHDD容量のビジュアル化などに使われるツリーマップをWebベース化したグラフライブラリ。
webtreemapはJavaScript製のフリーウェア（ソースコードは公開されている）。情報のビジュアル化はとても重要だ。特に文字や数字だけの羅列になっている情報は適切に並べたりフィルタリングすることでとても見やすく、内容が把握できるようになる。
Webベースのツリーマップ
グラフを使ったり、モデリングしたりと様々な表示形式があるが、今回紹介するのはツリーマップだ。HDDの利用状況などをビジュアル化するのに使われる手法だ。それをWebベースで実現するのがwebtreemapだ。
webtreemapはJSONファイルで定義した内容に沿って、データをツリーマップ表示するライブラリだ。まず最大の枠で全体が表示される。そしてその中に四角が多数入り、個々のサイズが表示される。サイズはJSONで指定した数字によって自動的に決定される。
マウスオーバーでハイライト。クリックでドリルダウン
そして子要素の下に孫、さらにひ孫要素と順番に描かれていく。最初に全ての要素がレンダリングされる訳ではなく、要素をクリックしてはじめて表示されるものもある。要素をクリックすると自動的にズームし、もう一度クリックするとパンする仕組みだ。データの利用状況等をビジュアル化するのに使えそうだ。
MOONGIFTはこう見る
webtreemapが秀逸なのはデータを適当にフィルタリングして全ての内容を表示しきらないことだ。データのビジュアル化を考える際に、全てを正しく表示しきることが適切ではない場合は多い。グラフでもその他という要素に詰め込んでしまうことで分かりやすくなるケースは多い。
そして詳細が見たい場合にはドリルダウンして追いかけていく。ユーザの都道府県別登録数や、クライアント別の売り上げ比較など多階層データをビジュアル化するのに有効だろう。一つのグラフに表すとごちゃごちゃしそうなデータも、webtreemapで見ると分かりやすいのではないだろうか。