Network Visualizer

これは、D3.jsを使ってグラフを可視化するツールです。index.htmlをブラウザで開くと(グラフ理論で言うところの)グラフが表示されます。折れ線グラフや棒グラフというときの「グラフ」と紛らわしいので、以降「ネットワーク」と呼ぶことにします。

使い方

基本的に、index.htmlさえあれば動くようになっています。D3.jsをベタ張りすればオフライン環境でも使えます。

開けるファイル形式

jsonファイルとcsvファイルを開くことができます。拡張子はそれぞれ.json, .csvでなければならず、それ以外の拡張子は読み込めません。

jsonファイル

次のようなjsonファイルを読み込みます。

{
    "nodes": [
        { "id": "ノード1", "name": "Node 1", "group": 1, "explain": "This is node 1", "x": 100, "y": 100 },
        { "id": "ノード2", "name": "Node 2", "group": 2, "explain": "This is node 2", "x": 200, "y": 200 },
        { "id": "ノード3", "name": "Node 3", "group": 2, "explain": "This is node 3", "x": 300, "y": 300 }
    ],
    "links": [
        { "source": "ノード1", "target": "ノード2", "value": 2 },
        { "source": "ノード2", "target": "ノード3", "value": 1 }
    ]
}

id, source, target以外は任意項目です。

• nameは、ノードの脇に表示される文字列を指定します。存在しない場合はidが表示されます。
• groupは、ノードの色分けをすることができます。
• explainは、ノードのツールチップを追加します。
• x及びyは、ノードの位置を指定します。指定した場合は、グラフが固定されます。
• valueは、エッジのツールチップを追加します。

csvファイル

次のようなcsvファイルを読み込みます。

source,target,value
ノード1,ノード2,2
ノード2,ノード3,1

valueは任意項目です。name, group, explain, x, yは指定できません。

サンプル

無線従事者資格の包含関係を示しています。

東北6県の隣接関係を示しています。