Ian Ross氏が現在開発中の Radian について自身で解説したブログ記事の翻訳を Ian氏の許可を得てアップしました。

AngularJS + D3.js = Radian(翻訳)

タイトルが示す通り、Radian は AngularJS と D3 を協業して働かせるための JavaScript ライブラリ( radian.js )です。最小限の設定とデータを与えるだけで、簡単に見栄えのよいグラフを作成できます。




グラフの設定は、AngularJS の構文によく似た ディレクティブを使って「宣言的」に記述でき、プログラムは一行も書く必要はありません。データは、外部ファイルを指定することも、インラインに直接記述することもできます。CSV、空白区切り、JSON形式などに対応しています。

データを使わず Radian の内部関数だけでグラフを作成することもでき、簡単に関数グラフが作成できます。

Radian のサンプル集はこちらです。現在28種類のサンプルが掲載されています。

D3 はデータに基づいて視覚化を行うための強力なツールです。視覚化は通常 SVG 画像により行われますが、静的で変化のないグラフや地図だけでなく、アニメーションやトランジション(遷移)等のD3 の豊富なメソッドを使って、動的・対話的な視覚化が可能です。

しかし D3 の機能があまりにも豊富過ぎ、また、使いこなすためには関数型プログラミング等、 JavaScript についての深い理解が必要となるため、デザイナーなど非プログラマはもちろんのこと、JavaScript 初心者にとってもなかなか手を出しづらいツールでした。

そのため最近では、D3 を「カーネル」として組込み、簡単な設定だけでグラフや地図を作製できるツール類が多数発表されるようになりました。最近では JSON フォーマットで視覚化の設定を行える VEGAというプロジェクトが大きな注目を集めました。




発表されたばかりの Ian氏の Radion も大きな注目を集めています。注目を浴びた理由は、設定を Angular を拡張した構文で宣言的に行え、D3 はディレクティブ経由で内部的に呼ばれるだけで表には出てこないという構成の美しさもあるでしょうが、Radian が AngularJS と D3 という、ともに今最もホットな JavaScript ライブラリの組み合わせである点も大きいでしょう。

D3 と AngularJS の組み合わせによるプロジェクトは、ほかにdangleがあり、こちらのデモもなかなか綺麗です。

現時点では Radian はオープンソースのプロジェクトではありません。RadianはBayesHive という商用ソフトの開発過程で生まれたライブラリだからです。ただ作者 Ian 氏もオープンソース化の意向を持っており、また、コミュニティからの期待も非常に大きい(→Hacker’s News)ようですので、そう遠くない将来にオープンソース化されるのでは、と期待しています。

(2013/04/27 15:59 投稿)