描画できるもの
vis-networkというライブラリを使うと，例えばこんなネットワークグラフが描ける。
このグラフ，マウスによる操作もできる。
- 線でつながれた楕円形をドラッグすると，その楕円形を好きな場所に移動できる。つながっている他のノードもバネでつながっているかのようにくっついて移動してくる。
- 楕円形以外の場所をドラッグすると，グラフ全体を移動できる。
- マウスホイールを回すと，グラフ全体の拡大/縮小ができる。
描画に必要なもの
2019年11月15日現在，vis-networkライブラリのCDNはかなり古いバージョンしか公開されていないため，自前で最新のライブラリを用意する方法がおすすめだ。
公式のGitHubではビルド済のパッケージが公開されていないため，自分でビルドしてライブラリを取得する必要がある。
ビルドするためには最低限，npmと呼ばれるパッケージ管理ソフトが必要だ。
以下では，ビルド環境の構築からライブラリの利用まで，ステップを追って説明する。
ビルド環境を構築する
次のものを，それぞれインストールする。手順は各サイトの説明に従おう。
- Visual Studio Code
- npm
- Node.jsをインストールすることで，npmも自動的にインストールされる。
- https://nodejs.org/ja/
vis-networkのソースコードを入手する
GitHubのvis-networkページからソースコードをダウンロードしよう。
Git環境がある人はリポジトリをクローンすればよい。
Git環境が無い人は緑色の「Clone or download」ボタンを押し，Download ZIPを押すことでダウンロードできる。（下図）
ライブラリを入手する
取得したソースコードのルートディレクトリ（「package.json」というファイルがあるフォルダ）を，Visual Studio Codeで開く。
Visual Studio Codeの画面の上にあるメニューから Terminal -> New Terminal を選択する。
画面下部でカーソルが点滅するので，キーボードで
npm iと入力してEnterキーを押す。
何分間か処理が走るので，処理が終わるまで待つ。
処理が終わったら，画面の上のメニューから Terminal -> Run Task を選択し，表示されるタスク一覧から npm: build を選択する。
Continue without scanning the task output を選択する。
ソースコードのビルド処理が始まるので，処理が終わるまで待つ。
処理が無事に終わったら，standalone/umd フォルダに vis-network.min.js というファイルができているはずだ。
このファイルがネットワークグラフの描画に必要なものだ。
ネットワークグラフを描画する
HTML
ネットワークグラフを表示させたい場所に，id または class を指定しておく。
<div id="mynetwork"></div>CSS
ネットワークグラフを表示させる領域のスタイルを定義する。
次の例では領域のサイズと，枠線の太さ・色などを指定している。
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}JavaScript
最後に，ネットワークグラフのデータの定義と，ライブラリの呼び出しを行うコードを記述する。
ライブラリを呼び出すためには次のデータが必要となる。
- 各ノードを識別するための番号
- 各ノードに表示する文字列
- ノード間のつながりと方向
- ライブラリ利用のオプション（詳しくはライブラリのRead meを参照すること）
これらをコードの中でどのように表現するのかについては以下のコード例を参考にして欲しい。
必ず以下のコードの前に，先ほど取得した vis-network.min.js を参照するためのコードをHTMLファイルに記述しておく。
// 各ノードを識別するための番号(id)と，各ノードに表示する文字列を定義する。
var nodes = new vis.DataSet([
{ id: 1, label: "Node 1" },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" }
]);
// ノード間のつながりと方向を定義する。数字は各ノードのidを意味している。
var edges = new vis.DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 }
]);
// ネットワークグラフを表示するHTML要素を取得する。
var container = document.getElementById("mynetwork");
// ライブラリに渡すためのデータを用意する。
var data = {
nodes: nodes,
edges: edges
};
var options = {};
// ライブラリを呼び出し，ネットワークグラフを描画する。
var network = new vis.Network(container, data, options);