D3.jsにおけるネットワーク表現（書きかけ）

現在（2015年6月）D3.jsではネットワーク表現を行うのはあまり得意ではないようです。これは、現状実装されているネットワーク図とそのデータ・フォーマットを概観する目的の文章です。

Node-Link

force-directed graph

// データの構造がわかる程度に一部を抜粋しています。
{
  "nodes":[
    {"name":"Myriel","group":1},
    {"name":"Napoleon","group":1},
    {"name":"Mlle.Baptistine","group":1},
  ],
  "links":[
    {"source":1,"target":0,"value":1},
    {"source":2,"target":0,"value":8},
    {"source":3,"target":0,"value":10}
  ]
}

Hive Plots

http://egweb.bcgsc.ca/
http://bost.ocks.org/mike/hive/
http://bl.ocks.org/saraquigley/raw/2346962/

// データの構造がわかる程度に一部を抜粋しています。
[{
    "name": "flare.analytics.cluster.AgglomerativeCluster",
    "size": 3938,
    "imports": ["flare.animate.Transitioner", "flare.vis.data.DataList", "flare.util.math.IMatrix", "flare.analytics.cluster.MergeEdge", "flare.analytics.cluster.HierarchicalCluster", "flare.vis.data.Data"]
}, {
    "name": "flare.analytics.cluster.CommunityStructure",
    "size": 3812,
    "imports": ["flare.analytics.cluster.HierarchicalCluster", "flare.animate.Transitioner", "flare.vis.data.DataList", "flare.analytics.cluster.MergeEdge", "flare.util.math.IMatrix"]
}, {
    "name": "flare.analytics.cluster.HierarchicalCluster",
    "size": 6714,
    "imports": ["flare.vis.data.EdgeSprite", "flare.vis.data.NodeSprite", "flare.vis.data.DataList", "flare.vis.data.Tree", "flare.util.Arrays", "flare.analytics.cluster.MergeEdge", "flare.util.Sort", "flare.vis.operator.Operator", "flare.util.Property", "flare.vis.data.Data"]
}]

tree

// データの構造がわかる程度に一部を抜粋しています。
{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
        {"name": "AgglomerativeCluster", "size": 3938},
        {"name": "CommunityStructure", "size": 3812},
        {"name": "HierarchicalCluster", "size": 6714}
     ]
    },
    {
     "name": "graph",
     "children": [
        {"name": "BetweennessCentrality", "size": 3534},
        {"name": "LinkDistance", "size": 5731}
     ]
    }
   ]
  },
  {
   "name": "animate",
   "children": [
    {"name": "Easing", "size": 17010},
    {"name": "FunctionSequence", "size": 5842},
    {
     "name": "interpolate",
     "children": [
        {"name": "ArrayInterpolator", "size": 1983},
        {"name": "ColorInterpolator", "size": 2047},
        {"name": "DateInterpolator", "size": 1375}
     ]
    },
    {"name": "ISchedulable", "size": 1041},
    {"name": "Parallel", "size": 5176},
    {"name": "Pause", "size": 449}
   ]
  }
 ]
}

Adjacency matrix

https://en.wikipedia.org/wiki/Adjacency_matrix
http://www.ghostweather.com/essays/talks/networkx/adjacency.html

// データの構造がわかる程度に一部を抜粋しています。
{
    "directed": true,
    "graph": [],
    "nodes": [{
        "betweenness": 0.0018963862892403776,
        "degree": 203,
        "degree_cent": 0.12355447352404139,
        "eigen_cent": 0.07508683678023588,
        "partition": 1,
        "id": "jenstirrup"
    }, {
        "betweenness": 0.0034614665481407896,
        "degree": 332,
        "degree_cent": 0.20206938527084603,
        "eigen_cent": 0.04644826038280537,
        "partition": 1,
        "id": "nbrgraphs"
    }, {
        "betweenness": 0.02804475045020461,
        "degree": 612,
        "degree_cent": 0.3724893487522824,
        "eigen_cent": 0.12359799985924148,
        "partition": 1,
        "id": "krees"
    }],
    "links": [{
        "source": 0,
        "target": 87
    }, {
        "source": 0,
        "target": 12
    }, {
        "source": 0,
        "target": 36
    }],
    "multigraph": false
}

Flow Diagram

Sankey diagram

http://www.sankey-diagrams.com/
https://en.wikipedia.org/wiki/Sankey_diagram
http://bost.ocks.org/mike/sankey/

// データの構造がわかる程度に一部を抜粋しています。
{"nodes":[
    {"name":"Agricultural 'waste'"},
    {"name":"Bio-conversion"},
    {"name":"Liquid"}
],
"links":[
    {"source":0,"target":1,"value":124.729},
    {"source":1,"target":2,"value":0.597},
    {"source":1,"target":3,"value":26.862}
]}