vis.jsを使ってネットワークグラフを作ったらめちゃ簡単でした

ネットワークグラフを何使って描画するのか問題というものがありまして。

一昔前にD3.jsにチャレンジしたことがあったのですが、めちゃくちゃ高機能なので使い方がとにかく難しい。一つ作っただけで挫折しました。

それから2年が経ち…そろそろなにかあるだろうと思って見つけたvis.js。これがかなり良かった。

ネットワークマップのsampleはこちら。

アップした動画の中でやっていることは

・組織がチームに対して投票を行う
・組織とチームをノードとして取り扱う
・投票は◎と◯の2種類がある
・投票した結果をエッジ(ノード間のネットワーク)として表現する
・◎と◯でエッジをフィルタする
・ノード名で関連ノード以外をフィルタする

という形になっています。

何が簡単？

・複数ライブラリを呼ばなくても実現可能。
・sample読めば理解できるJSON記述

はぁ…なんてこった最高かよ。ありがとうございます作者の皆様。ありがたく使わせていただきます。

開発環境

Salesforce上。Visualforce Pageに実装。

後日談

社内のネットワークを可視化したものを作ってみた。