もっと簡単にチャートを生成するためのAPI

D3.jsを使えばなんでもチャートを生成できるので勉強中なんだが、なんかいつまでも慣れない感じがする。そもそもなんでこんなに書かないといけないんだろう。

このライブラリは、既存のDOMに対してちょっとずつ重ねていく、という記述方法になっているので、その全てを明確に定義しないといけないからだと思う。

もっとシンプルに欲しいチャートを生成するフレームワークがあっていい気がする。どんなAPIがあれば便利だろうかと考えてみよう。

まずは、最もシンプルなPieチャート。

var dataSet = [10, 20, 30, 10, 24];
var colors = ['#98abc5', '#8a89a6', '#7b6888'];
// jQuery Style
$('#chart').pieChart({
  dataSet: dataSet,
  colors: colors,
  // other options...
});

// React Style
<PieChart dataSet={dataSet} colors={colors} ... />

こんな感じでかけそうなもんだ。Bar Chartも同じような感じでいけるな。

var dataSet = [10, 20, 30, 10, 24];
var colors = ['#98abc5', '#8a89a6', '#7b6888'];
// jQuery Style
$('#chart').barChart({
  dataSet: dataSet,
  colors: colors,
  // other options...
});

// React Style
<BarChart dataSet={dataSet} colors={colors} ... />

LineChartはどうだろう。こちらも基本的には値の連なりだから、値またはオブジェクトの配列を渡すだけでかける気がする。

ただ、実際にチャートを扱うとなると重要なのは色々組み合わせられることだと思う。ラインチャートを複数重ねたり、バーチャートを組み合わせてみたりということが柔軟にできる必要がある。パイチャートが遷移したりというアニメーションも重要だ。

それを定義するには、結局のところD3.js自体のやり方が一番柔軟なのかもしれない。要は手書きの絵と同じようなもんで、重ねて行きさえすればいい。その中でどの形が本当に必要で、何を型として切り取っていくかが分かれ目になるのかもしれない。

ちなみに、既存のラッパーライブラリはいっぱいあるんじゃないかと思って検索したらいくらでも出てくる。
http://matome.naver.jp/odai/2138966107937611601
http://scottlogic.github.io/d3fc/

ここら辺色々といじってみつつ、どんなやり方がいいのかを考えていきたい。