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


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





## Node-Link

### force-directed graph

http://bl.ocks.org/mbostock/4062045

![スクリーンショット 2015-06-26 19.58.22.png](https://qiita-image-store.s3.amazonaws.com/0/1417/1c13ec00-bfb7-2feb-d6bf-a0ba10db7c5f.png "スクリーンショット 2015-06-26 19.58.22.png")

```json
// データの構造がわかる程度に一部を抜粋しています。
{
  "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/

![Hive Plots.png](https://qiita-image-store.s3.amazonaws.com/0/1417/0766269b-98fe-6ca0-ee06-5a1cc21d628b.png "Hive Plots.png")

```json
// データの構造がわかる程度に一部を抜粋しています。
[{
    "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

http://bl.ocks.org/mbostock/4063550

![Radial Reingold–Tilford Tree.png](https://qiita-image-store.s3.amazonaws.com/0/1417/06899abb-21d6-b769-3c5d-0ccdb798e13b.png "Radial Reingold–Tilford Tree.png")

```json
// データの構造がわかる程度に一部を抜粋しています。
{
 "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

![Twitter Adjacency Matrix by L Cherny.png](https://qiita-image-store.s3.amazonaws.com/0/1417/873b5a68-7ad1-1636-6784-383ade415aef.png "Twitter Adjacency Matrix by L Cherny.png")


```json
// データの構造がわかる程度に一部を抜粋しています。
{
    "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/

![スクリーンショット 2015-06-26 21.31.46.png](https://qiita-image-store.s3.amazonaws.com/0/1417/49042ee3-f069-193f-c53f-16bbca16d8f7.png "スクリーンショット 2015-06-26 21.31.46.png")


```json
// データの構造がわかる程度に一部を抜粋しています。
{"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}
]}

```