ITエンジニア/デザイナ向けにオープンソースを毎日紹介

JITはJavaScriptを使ったデータビジュアル化ライブラリです。

JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit(JIT)です。その多彩な表現をご覧ください。


積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。


実際のコードです。


棒の積み上げグラフです。


横向き、2Dのグラフです。


関連グラフです。マウスで動かせます。


マウスオーバーで説明が表示されます。


こんなグラフもあります。


星形。格好いいです。


カスタマイズにも多様に対応しています。


容量の表示などによく利用されるツリーマップです。


こちらもパターンが色々用意されています。


グラフを組み合わせたパターンです。


こんな表現も可能です。


派生していくアニメーションが格好いいです。


円グラフです。アニメーションやマウス操作によるアクションがあります。


こんなグラフはいかがでしょう。


星形。使い道が難しい気もしますが…。


きれいで格好いいですね。


構造解析する際に使えそうなグラフです。


線だけにしたパターンです。


数値だけのパターンです。


マインドマップ風です。


表示を変えるだけで印象が変わってきます。


データのつながりを表現するのに良さそうです。


マウスオーバーで色が変わります。


さらに情報をフローティング表示させることもできます。


ツリーマップもこんな複雑な表現が可能です。


全部塗りつぶし。


3Dっぽい表示。


全て縦に。この時のアニメーションも格好いいです。

JITはグラフも描けますが、実際にはデータのビジュアル化ライブラリと考えた方が良さそうです。実に多彩な表現ができる上、マウス操作にも反応したりと面白いライブラリになっています。

JITはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

データのビジュアル化はとても大事です。一覧表や数値だけを並べられても理解できない相関性をビジュアル化することで簡単に理解できるようになります。しかし大事なのはビジュアル化する際にどの手法を使うかになります。それを誤ると良い結果にはつながらないでしょう。

さらにデータの種類によっては二次元、三次元の他、時間や位置情報など多次元で展開しなければ傾向が見えないデータもあります。そうした無数のデータの中から最適な手法を選び出し、さらに表現できる技術力が重要です。選定する目があれば、ビジュアル化はJITのようなライブラリを知っておけばできるようになるはずです。

JavaScript InfoVis Toolkit

philogb/jit - GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2