G6 - ノードの繋がりを可視化するチャートライブラリ
Webの表現力を補うために多くのデータビジュアル化ライブラリが存在します。グラフのようなものもあれば、さらに複雑なチャートライブラリもあります。アニメーションしたり、高速で表示されたりと様々な特徴があります。 G6はノード同士を連携し、それを表現するのを得意とするチャートライブラリになります。
G6の使い方
サンプルです。左側のコードが右側のチャートになります。
![]()
こんな複雑な描画も行えます。
![]()
ノードの繋がり方も様々に用意されています。
![]()
こんなペアを作るようなデザインも。
![]()
マインドマップ的な表現。
![]()
ノード同士の複雑なつながりを表現。
![]()
見せ方を変えた版。
![]()
ノードの繋がり方を複雑にしたもの。
![]()
ソーシャルグラフ的に使えます。
![]()
アニメーションもサポートしています。
![]()
バブルチャート風。真円でないところが面白いです。
![]()
電車と合わせたもの。アニメーションしながら表示されます。
![]()
G6は一般的なグラフライブラリとは異なり、特殊な表現が可能です。利用する場面は選びそうです。しかしノード同士をつないで表現したいという場面は多いので、知っておくと活用できる時もあるでしょう。
G6はJavaScript製のオープンソース・ソフトウェア(MIT License)です。
G6 Graph Visualization Engine | AntV antvis/G6: ♾ A Graph Visualization Framework in JavaScript