sigma.jsはネットワーク図をはじめとする多数のノードが絡むグラフを描くライブラリです。

有機的な要素やネットワークが重なり合っているグラフを描きたい時に使えるのがsigma.jsです。Canvasタグを使って簡単にグラフを描き出します。


かなり密集したデモ。


ズームイン/アウトもできます。


こちらはアニメーション。動き続けています。


プラグインで独自拡張もできます。


もちろんズームできます。描画はCanvasを使っており、拡大しても奇麗です。


選択したノード以外を隠すデモです。


隠れました。


さらにマウスのある場所を膨らませるデモです。

sigma.jsはデータさえあれば容易に使えること、カスタマイズ性の高いこと、jQueryライクなイベントシステム、プラグイン対応、豊富なAPIなどが特徴になっています。

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

MOONGIFTはこう見る

単にデータを一覧で見ただけでは分からないトレンドはグラフによってビジュアル化することで明らかになります。しかし適切なグラフを選ばなければ、その特徴をきちんと把握することはできません。そのためグラフの種類と主な用途については予め学んでおく必要があります。

グラフは単にデータを正確に描写すれば良い訳ではなく、その方向性や偏りを見えるようにすることでトレンドと今後も変化を予想するのが目的です。どういったデータがsigma.jsに向いているか、身の回りのデータから考えてみるのも面白そうです。

sigma.js | a lightweight JavaScript graph drawing library

デモ:sigma.js | examples

jacomyal/sigma.js