BT

InfoQ ホームページ ニュース C3.jsが実現する,学習不要のグラフ機能

C3.jsが実現する,学習不要のグラフ機能

ブックマーク

原文(投稿日:2014/09/08)へのリンク

JavaScriptチャートライブラリのC3.jsは,同じようなツールに溢れる大海に現れた新顔だ。D3可視化ライブラリ上に開発されたこのライブラリでは,再利用性のあるグラフの開発が可能だ。作成したグラフは,画面表示後の操作にも対応する。

C3を使ったグラフの開発は,単にgenerate関数にオブジェクトリテラルを渡すだけ,という簡単なものだ。

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type: 'spline'
    }
});

(画像をクリックして拡大)

ドキュメントは充実しているとは言い難いが,提供されているサンプルコードはC3の機能を十分に表現している。グラフオブジェクトには,データセットのロードやアンロードなど,便利な操作ポイントが用意されている。

chart.load({
        columns: [
            ['data1', 230, 190, 300, 500, 300, 400]
        ]
    });

マーケットプレースはオープンソースや商用のものなど,多数のチャートオプションで溢れている。D3上で開発されたライブラリはC3が初めてではなく,他にもnvd3.jsrickshaw.jsなどが,再利用性のあるグラフ作成にD3の能力を活用している。

D3は"HTML, SVG, CSSを使ったデータ"の提供を目標として,2010年に公開された。ただしD3は,正確にはチャートライブラリではない。その優れた能力に対して高い評価がある一方で,習得に要する時間も少ないものではない。D3を使って簡単な折れ線グラフを書くにも,"スタイルやツールチップ,凡例,などのカスタマイズに数日から数週間が必要です"と,Hacker Newsのユーザであるcapkutayは述べている。

InfoQではC3を開発したMasayuki Tanaka氏に,その開発と方向性について聞いた。

InfoQ : C3を開発しようと思った動機は何ですか?

MT: "私がWebアプリケーションを開発していたときに,グラフを描画した後で状態をコントロールしたり,対話的な操作でイベントを発行したいと思ったのがきっかけです。私が見付けたライブラリは,どれも,そのような設計にはなっていませんでした (基本的に,グラフを描画するためだけに作られていました)。"

InfoQ: C3が他のライブラリと比べて,違っている部分はどこでしょうか?

MT: "C3ではAPIを使って,グラフの状態をコントロールすることができます。データ系列にフォーカスしたり,データポイントを選択したり,データ系列を表示あるいは非表示にしたり,データを更新したり,といったことが可能です。これがC3の最もユニークな特徴でしょう。この機能によってWebアプリケーション[開発者は,ユーザ入力との相互作用やサーバの応答,その他のイベントなどに応じて図を変更することができます。"

InfoQ: ベースにD3を使うことを決めた理由では何ですか?

MT: "D3は最も成功したデータ可視化ライブラリです。 データ駆動型アプローチなど,D3の基本的なアーキテクチャが,C3に一番適していると思いました。これによって,直感的かつ容易なコードを書くことができるようになります。(例えば,要素にデータをバインドしたり,要素からデータを取得することが,ごく簡単にできるようになります。それからもうひとつ,データの更新や移動,追加と削除,表示/非表示などで,スムーズなアニメーションを実装したいと思っていました。

InfoQ: 今後の計画はどのようなものでしょうか?

MT: "まずはプラグインアーキテクチャを改善したいですね。バージョン0.3でプラグインアーキテクチャを導入したのですが,実装があまりまとまっていないために,内部関数の利用や動作の変更が難しくなっています。ですからこの問題を解決して,もっと多くの人たちに役に立つものにする必要があります。

それから,ドキュメントを完成させなくてはなりません。今はリファレンスがほとんどないので,何ができて何ができないのかを理解するのが難しくなっています。これには近いうちに着手するつもりです。それからD3のように,サンプルをもっと増やしたいと思っています。開発者にとっては,本当に有用なアプローチだと思いますから。"

nvd3.jsとrickshaw.jsはいずれも,営利企業内の開発作業としてスタートし,後にオープンソース化されたものだ。Highchartsは人気の商用グラフ作成ライブラリだが,開発者ライセンスあたり390ドルというプライスタグが付けられている。これらに対してC3は,MITライセンスを持つ独立したソフトウェアだ。

C3に関するHacker Newsの議論では,ビジュアル化関連の開発者であるmuyueh氏が,いつの日かC3のようなものに顧客を奪われるのではないか,と心配している。

D3の開発はすでに3,200以上のコミットと173のリリースを数え,高い成熟度レベルに達しているが,最近1ヶ月以上アップデートが受信されていない。作者のMike Bostock氏が,再利用可能なグラフを開発する上での自身の見解について書いている。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。