Edited at

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

More than 3 years have passed since last update.

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


Node-Link


force-directed graph

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

// データの構造がわかる程度に一部を抜粋しています。

{
"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

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

// データの構造がわかる程度に一部を抜粋しています。

{
"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}
]}