【JavaScript】D3.jsのforcesimulationですごい”動く”ネットワーク図が作れる【紹介編】

JavaScriptのビジュアライゼーションライブラリの一つである、D3.js、今回はその中でもforcesimulation（重力制御）という機能で作成できる”動く”ネットワーク図について語っていきたいと思います。次の【入門編】では実際に実装していきますのでぜひ見てみてください。

JavaScriptにはデータをビジュアライズ（可視化）するライブラリがvis.js、Chart.jsなどたくさんあります。その中でも特にデザイン性、柔軟性に特化したものであるD3.jsを今回は紹介します。

D3.jsとは？

JavaScriptで実装するデータビジュアライゼーション用のライブラリです。
D3.jsは本当に柔軟性が高く、オシャレなグラフが作れるということで最近人気があります。JavaScriptの開発者なら覚えておいて絶対損にはならないでしょう。

オシャレってどういうこと？と思うかもしれません。いくつか例を見てみましょう。

画像をクリックすると元リンクに飛ぶことができます。

グラフ自体はベーシックな散布図ですが、色合いなどがとてもオシャレですね！

画像をクリックすると元リンクに飛ぶことができます。

「なにこれ？」って思うでしょう？これもD3.jsで実装されたグラフです。何を表しているかはいまいちわかりませんが・・・とにかくグラフなのです。

他にもたくさん例があります。以下のURLから見てみてください。

https://github.com/d3/d3/wiki/Gallery

棒グラフ、折れ線グラフ、円グラフなどといったベーシックなものからネットワーク図や地図までとにかく用途は幅広く、私もまだ全然使いきれていません。それでは、今回のテーマであるforcesimulationでは一体何が作れるのでしょうか？

私の中で、D3.jsがおすすめである最大の理由はこのforcesimulationという機能にあります。一体なぜかというと・・・こんなものが作れるからです！

画像をクリックすると元リンクに飛ぶことができます。

画像をクリックして動かしてみてください。動く動く！
ノード（丸のオブジェクト）を追加したり削除したりできるのですが、これがまた面白い動きをします。

こういったものを自分でも作ってみたくはありませんか？

「D3.jsのforcesimulationですごい”動く”ネットワーク図が作れる【紹介編】」については以上です。
D3.jsのforcesimulationですごい”動く”ネットワーク図が作れる【入門編】に続きます。よろしければ以下をご覧ください。