Radian とは

Radianは、HTMLドキュメント中に簡単にグラフの埋込みを可能にするオープンソースの JavaScript ライブラリです。Radian はオープンブレイン社の BayesHive プロジェクトの一環として開発が行われています。

Radian では、グラフを描くのに JavaScript のコードを書くのではなく、独自の HTML 要素を用います。例えば下のグラフは、次のような HTML コードをもとに描かれています。

Radian デモ画面
こうした独自 HTML 要素の実装のために、Radian は JavaScript フレームワークの AngularJS を採用しました。また AngularJS により、HTML 要素の属性と JavaScript の変数が双方向データバインディングを実現しています。画像生成には、D3 .js グラフライブラリを使っています。グラフは SVG 要素として直接ページ中に生成されるため、大部分のモダンブラウザで表示可能です。

Radian のライセンスはモジラ・パブリック・ライセンスです。

応用例

Radian は BayesHive のベイジアン統計プラットフォーム内で幅広く使われています。Radian でどのようなことができるのか、興味のある方はぜひ BayesHive に触れてみてください。


Radian の特徴

  • 関数グラフとデータプロットグラフの両方とも簡単に作成可能です。
  • JavaScript は一行も書く必要はありません。
  • 一般的グラフ形式にはほとんど対応しています(折れ線グラフ、点グラフ、棒グラフ、エリアグラフ、ヒートマップ(開発中)など)。
  • AngularJS との統合により複雑で対話的なアプリケーションが作成可能です。
  • 開放型ライセンスによるオープンソースで提供されます。
  • 豊富なサンプルとわかりやすいドキュメントが用意されています。

Radian のメリット

世の中にはすでに多数のグラフ作成用 JavaScript ライブラリが存在しています。Flot のように簡単にすぐ使えるユーティリティから、D3.js のように強力かつ複雑なライブラリまで、種類もさまざまです。いずれも優れたツールであり魅力的なグラフを作れるのですが、そのためには自分で JavaScript を書く必要がありました。

Radian グラフ作成 API はまったく別のアプローチを採用しました。Radian では、グラフは独自の HTML 要素を使って宣言的に定義します。HTMLテンプレート中のセットアップ用コードを除けば、一行も JavaScript を書く必要はありません。

Radian には次のメリットがあります。

  • JavaScript なんか知らない、書きたくもない、ホームページの中にサクッとグラフを作りたいだけなんだ。そういう方にうってつけの解決策が Radian です。ページ内にグラフを描くためには、HTML タグを記述するだけです。また、 他のマークアップシステムでも Radian を使えるものがあります。Markdown によって記述されたマークアップシステムです。Radian のグラフを表示するのに必要なものは、Radian とその依存ライブラリにアクセスするためのいくつかの <script>タグだけです。
  • 数十ものグラフを掲載したページや、数値やグラフを動的に生成するページから構成されるような複雑なアプリケーションは、Radian を使うほうがずっと簡単に作成できます。HTML とは別にグラフ作成用の JavaScript コードを書くのではなく、Radian の独自タグを使った HTML コードを書くだけで済むからです。

    実際 Radian は、そうした複雑なアプリーションとともに発展してきました。ベイジアン統計オーサリングシステムの BayesHiveは、 ユーザが入力した複雑な統計計算式を Radian でグラフにします。そうした作業を極力楽に行うために Radian 的なものが必要だということは、開発の初期段階から明らかでした。


Radian の構成要素

Radian は、二つの非常に優れた JavaScript ライブラリのパワーをてこに作られています。

一つ目は Web アプリケーションを作るためのフレームワーク AngularJS です。AngularJS はいくつもの興味深く革新的なアイデアをベースにしています。第一のアイデアは双方向データバインディングです。AngularJS では HTML のコンテンツと JavaScript の変数を簡単にリンクすることができ、これによって JavaScript の変数の変化は即座に表示しているページに反映され、ページの変化は(フォームの対話的要素経由で) JavaScript の変数へと伝わるのです。第二のアイデアは独自タグと属性による HTML の拡張です。これによりアプリケーション固有の動作を実現しています。

お気づきの通り、Radian はこの二つのアイデアを最大限に活用しています。たとえば双方向データバインディングの働きにより対話的なグラフを当たり前のように作成できます。また、<plot>や<plot-data>、<line>や<points> など独自 HTML 要素が Radia のあらゆるところに使われています。

二つ目のライブラリが D3.js です。「データ駆動型ドキュメント」を作るためのライブラリです。D3 は使いこなすにはなかなか骨が折れますが、その結果には驚嘆すべきものがあります。こちらのサンプルをご覧になれば、その可能性を感じとっていただけるでしょう。

我々は AngularJS と D3.js の優れた機能を何とか取り入れたいと考え、このグラフ作成 API を作りました。シンプルなグラフはあきれるほど簡単に作成でき、複雑なグラフ作成にも充分耐えうる API が出来上がったのです。

Radian は AngularJS と D3.js 以外にも便利なライブラリをいくつか利用しています。Radian 式のパースと処理のために、修正版の Acorn JavaScript パーサーestraverse、それに escodegen ライブラリが用いられています。


本記事は、Ian Ross氏の許可を得てサイトRadian のトップページ解説文を翻訳したものです。

原文 Copyright c (2013) OpenBrain Ltd / 訳文 Copyright 2013 h.sakai

・原文の “plot” は原則「グラフ」と訳しています(参考:graph / chart / diagram / plot の違い
・来週から「 Radian チュートリアル」(翻訳)の連載を開始します。ご期待ください。


コメントを残す


1 × 六 =