ネットワーク表示ライブラリ Vis.jsで遊んでみた

javascriptでネットワークグラフを書いてくれるライブラリを色々と試している。ノードなどの書き方が楽そうなvis.jsを試してみた。ネットワークグラフのサンプルがいくつか提供されている。その一つをcodepenでちょっといじったが、かなり面白い。ノード(丸いやつ)はマウスでドラッグ可能。びよんびよんと面白く動く。javascriptだけでこんなに簡単に速く動くなんて驚き。昔actionscriptでこんなのをゼロから作ろうと挫折したことがあるので、ライブラリという叡智の結晶のありがたさを痛感。

See the Pen
Vis Network | ためしに作ってみた by SANO Akira (@onakaponpon)
on CodePen.

ライブラリを使うには、SettingのJSで、このライブラリへの読み込み設定をしておくだけ。簡単。

javascriptで、配列にノードとエッジを設定する。その時に数値を設定すると、その大きさによってグラフにも影響を受ける。ノード記述はこんな感じ。エッジも同じ感じ。すごくシンプル。

nodes = [
    { id: 1, value: 10, label: "波平" },
    { id: 2, value: 5, label: "舟" },
(以下省略)

ネットワークグラフ以外にも色々なグラフが描けるみたいだ。すごく楽しい。時間が溶ける。
あ、マスオさんを書き忘れていた……。ごめんなさい。今度あったら謝っておこう。