こんにちは、大谷です。

前回、紹介したZoomdataのグラフのカスタマイズ方法について今日は紹介します。

エディタ

ZoomdataはZoomdata Editorというブラウザ上で動作するエディタを用意しています。 このエディタは左半分がエディタ、右半分がプレビュー画面となっており、動作を確認しながらグラフのカスタマイズが可能です。

記述方法

ZoomdataのグラフはJavaScriptで記述します。 一から記述するわけではなく、実際にはテンプレートが用意されています。

このテンプレートはbackbone.jsとd3.jsで構成されます。

backbone.js

backbone.jsはJavaScript MVCフレームワークです。 Zoomdataのテンプレートはbackbone.jsを基本に記述されています。 backbone.jsのViewとModel（Collection含む）をカスタマイズしたいグラフごとに記述するイメージです。

View

グラフが描画される部分がViewとして実装されます。 グラフの初期化処理や描画処理を記述します。 グラフ描画に利用するデータについては、後述するModelに格納されます。

Model（Collection）

グラフに描画されるデータがModelとして実装されます。 （CollectionはModelの集合です。） backbone.jsはModel（Collection）の変更に対してListnerを仕掛けることがでます。 Zoomdata EditorのテンプレートではこのListnerを利用して、Zoomdataサーバからデータがやってくると、Modelが更新され、その更新のイベントを元にグラフを描画し直すという仕組みになっています。

Zoomdataサーバからのデータの受取処理の部分についてはテンプレートに記載がされているので、必要なデータをModelに詰め込む処理を記述するだけでOKです。

d3.js

グラフ描画の処理はd3.jsを利用しています。 d3.jsはインタラクティブな色々な形式のグラフを綺麗に書くことができます。 柔軟性が高いのでコーディングするのには少し手間がかかりますが。

Zoomdata 1.0.3ではパイチャート、バーチャート、バブルチャート、アメリカの地図（州単位）、タグクラウドがテンプレートとして用意されています。

先日のZoomdataの紹介記事の動画は、上記のテンプレートを用いて日本地図の都道府県単位でデータを可視化するグラフを作成したサンプルになります。 Zoomdataサーバから、都道府県単位に数値が送られてくるので、数値に合わせて都道府県に色をつけているものになります。

JavaScriptにある程度慣れている方なら、Zoomdata Editorを使って色々なグラフのカスタマイズが出来そうです。 また、d3.jsやbackbone.jsを利用しているため、通常のブラウザでも描画可能なグラフが書けるのではないでしょうか。

今後は、カスタマイズしたグラフをダウンロードできるよな仕組みができるともっとZoomdataが便利になりそうな気がします。