-
Notifications
You must be signed in to change notification settings - Fork 18
/
NetworkGraph6A8Jt.html
102 lines (88 loc) · 18.2 KB
/
NetworkGraph6A8Jt.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
.link {
stroke: #666;
opacity: 0.4;
stroke-width: 1.5px;
}
.node circle {
stroke: #fff;
opacity: 0.4;
stroke-width: 1.5px;
}
.node:not(:hover) .nodetext {
display: none;
}
text {
font: 7px serif;
opacity: 0.4;
pointer-events: none;
}
</style>
<script src=http://d3js.org/d3.v3.min.js></script>
<script>
var links = [ { "source" : "1", "target" : "0", "value" : "1" }, { "source" : "2", "target" : "0", "value" : "8" }, { "source" : "3", "target" : "0", "value" : "10" }, { "source" : "3", "target" : "2", "value" : "6" }, { "source" : "4", "target" : "0", "value" : "1" }, { "source" : "5", "target" : "0", "value" : "1" }, { "source" : "6", "target" : "0", "value" : "1" }, { "source" : "7", "target" : "0", "value" : "1" }, { "source" : "8", "target" : "0", "value" : "2" }, { "source" : "9", "target" : "0", "value" : "1" }, { "source" : "11", "target" : "10", "value" : "1" }, { "source" : "11", "target" : "3", "value" : "3" }, { "source" : "11", "target" : "2", "value" : "3" }, { "source" : "11", "target" : "0", "value" : "5" }, { "source" : "12", "target" : "11", "value" : "1" }, { "source" : "13", "target" : "11", "value" : "1" }, { "source" : "14", "target" : "11", "value" : "1" }, { "source" : "15", "target" : "11", "value" : "1" }, { "source" : "17", "target" : "16", "value" : "4" }, { "source" : "18", "target" : "16", "value" : "4" }, { "source" : "18", "target" : "17", "value" : "4" }, { "source" : "19", "target" : "16", "value" : "4" }, { "source" : "19", "target" : "17", "value" : "4" }, { "source" : "19", "target" : "18", "value" : "4" }, { "source" : "20", "target" : "16", "value" : "3" }, { "source" : "20", "target" : "17", "value" : "3" }, { "source" : "20", "target" : "18", "value" : "3" }, { "source" : "20", "target" : "19", "value" : "4" }, { "source" : "21", "target" : "16", "value" : "3" }, { "source" : "21", "target" : "17", "value" : "3" }, { "source" : "21", "target" : "18", "value" : "3" }, { "source" : "21", "target" : "19", "value" : "3" }, { "source" : "21", "target" : "20", "value" : "5" }, { "source" : "22", "target" : "16", "value" : "3" }, { "source" : "22", "target" : "17", "value" : "3" }, { "source" : "22", "target" : "18", "value" : "3" }, { "source" : "22", "target" : "19", "value" : "3" }, { "source" : "22", "target" : "20", "value" : "4" }, { "source" : "22", "target" : "21", "value" : "4" }, { "source" : "23", "target" : "16", "value" : "3" }, { "source" : "23", "target" : "17", "value" : "3" }, { "source" : "23", "target" : "18", "value" : "3" }, { "source" : "23", "target" : "19", "value" : "3" }, { "source" : "23", "target" : "20", "value" : "4" }, { "source" : "23", "target" : "21", "value" : "4" }, { "source" : "23", "target" : "22", "value" : "4" }, { "source" : "23", "target" : "12", "value" : "2" }, { "source" : "23", "target" : "11", "value" : "9" }, { "source" : "24", "target" : "23", "value" : "2" }, { "source" : "24", "target" : "11", "value" : "7" }, { "source" : "25", "target" : "24", "value" : "13" }, { "source" : "25", "target" : "23", "value" : "1" }, { "source" : "25", "target" : "11", "value" : "12" }, { "source" : "26", "target" : "24", "value" : "4" }, { "source" : "26", "target" : "11", "value" : "31" }, { "source" : "26", "target" : "16", "value" : "1" }, { "source" : "26", "target" : "25", "value" : "1" }, { "source" : "27", "target" : "11", "value" : "17" }, { "source" : "27", "target" : "23", "value" : "5" }, { "source" : "27", "target" : "25", "value" : "5" }, { "source" : "27", "target" : "24", "value" : "1" }, { "source" : "27", "target" : "26", "value" : "1" }, { "source" : "28", "target" : "11", "value" : "8" }, { "source" : "28", "target" : "27", "value" : "1" }, { "source" : "29", "target" : "23", "value" : "1" }, { "source" : "29", "target" : "27", "value" : "1" }, { "source" : "29", "target" : "11", "value" : "2" }, { "source" : "30", "target" : "23", "value" : "1" }, { "source" : "31", "target" : "30", "value" : "2" }, { "source" : "31", "target" : "11", "value" : "3" }, { "source" : "31", "target" : "23", "value" : "2" }, { "source" : "31", "target" : "27", "value" : "1" }, { "source" : "32", "target" : "11", "value" : "1" }, { "source" : "33", "target" : "11", "value" : "2" }, { "source" : "33", "target" : "27", "value" : "1" }, { "source" : "34", "target" : "11", "value" : "3" }, { "source" : "34", "target" : "29", "value" : "2" }, { "source" : "35", "target" : "11", "value" : "3" }, { "source" : "35", "target" : "34", "value" : "3" }, { "source" : "35", "target" : "29", "value" : "2" }, { "source" : "36", "target" : "34", "value" : "2" }, { "source" : "36", "target" : "35", "value" : "2" }, { "source" : "36", "target" : "11", "value" : "2" }, { "source" : "36", "target" : "29", "value" : "1" }, { "source" : "37", "target" : "34", "value" : "2" }, { "source" : "37", "target" : "35", "value" : "2" }, { "source" : "37", "target" : "36", "value" : "2" }, { "source" : "37", "target" : "11", "value" : "2" }, { "source" : "37", "target" : "29", "value" : "1" }, { "source" : "38", "target" : "34", "value" : "2" }, { "source" : "38", "target" : "35", "value" : "2" }, { "source" : "38", "target" : "36", "value" : "2" }, { "source" : "38", "target" : "37", "value" : "2" }, { "source" : "38", "target" : "11", "value" : "2" }, { "source" : "38", "target" : "29", "value" : "1" }, { "source" : "39", "target" : "25", "value" : "1" }, { "source" : "40", "target" : "25", "value" : "1" }, { "source" : "41", "target" : "24", "value" : "2" }, { "source" : "41", "target" : "25", "value" : "3" }, { "source" : "42", "target" : "41", "value" : "2" }, { "source" : "42", "target" : "25", "value" : "2" }, { "source" : "42", "target" : "24", "value" : "1" }, { "source" : "43", "target" : "11", "value" : "3" }, { "source" : "43", "target" : "26", "value" : "1" }, { "source" : "43", "target" : "27", "value" : "1" }, { "source" : "44", "target" : "28", "value" : "3" }, { "source" : "44", "target" : "11", "value" : "1" }, { "source" : "45", "target" : "28", "value" : "2" }, { "source" : "47", "target" : "46", "value" : "1" }, { "source" : "48", "target" : "47", "value" : "2" }, { "source" : "48", "target" : "25", "value" : "1" }, { "source" : "48", "target" : "27", "value" : "1" }, { "source" : "48", "target" : "11", "value" : "1" }, { "source" : "49", "target" : "26", "value" : "3" }, { "source" : "49", "target" : "11", "value" : "2" }, { "source" : "50", "target" : "49", "value" : "1" }, { "source" : "50", "target" : "24", "value" : "1" }, { "source" : "51", "target" : "49", "value" : "9" }, { "source" : "51", "target" : "26", "value" : "2" }, { "source" : "51", "target" : "11", "value" : "2" }, { "source" : "52", "target" : "51", "value" : "1" }, { "source" : "52", "target" : "39", "value" : "1" }, { "source" : "53", "target" : "51", "value" : "1" }, { "source" : "54", "target" : "51", "value" : "2" }, { "source" : "54", "target" : "49", "value" : "1" }, { "source" : "54", "target" : "26", "value" : "1" }, { "source" : "55", "target" : "51", "value" : "6" }, { "source" : "55", "target" : "49", "value" : "12" }, { "source" : "55", "target" : "39", "value" : "1" }, { "source" : "55", "target" : "54", "value" : "1" }, { "source" : "55", "target" : "26", "value" : "21" }, { "source" : "55", "target" : "11", "value" : "19" }, { "source" : "55", "target" : "16", "value" : "1" }, { "source" : "55", "target" : "25", "value" : "2" }, { "source" : "55", "target" : "41", "value" : "5" }, { "source" : "55", "target" : "48", "value" : "4" }, { "source" : "56", "target" : "49", "value" : "1" }, { "source" : "56", "target" : "55", "value" : "1" }, { "source" : "57", "target" : "55", "value" : "1" }, { "source" : "57", "target" : "41", "value" : "1" }, { "source" : "57", "target" : "48", "value" : "1" }, { "source" : "58", "target" : "55", "value" : "7" }, { "source" : "58", "target" : "48", "value" : "7" }, { "source" : "58", "target" : "27", "value" : "6" }, { "source" : "58", "target" : "57", "value" : "1" }, { "source" : "58", "target" : "11", "value" : "4" }, { "source" : "59", "target" : "58", "value" : "15" }, { "source" : "59", "target" : "55", "value" : "5" }, { "source" : "59", "target" : "48", "value" : "6" }, { "source" : "59", "target" : "57", "value" : "2" }, { "source" : "60", "target" : "48", "value" : "1" }, { "source" : "60", "target" : "58", "value" : "4" }, { "source" : "60", "target" : "59", "value" : "2" }, { "source" : "61", "target" : "48", "value" : "2" }, { "source" : "61", "target" : "58", "value" : "6" }, { "source" : "61", "target" : "60", "value" : "2" }, { "source" : "61", "target" : "59", "value" : "5" }, { "source" : "61", "target" : "57", "value" : "1" }, { "source" : "61", "target" : "55", "value" : "1" }, { "source" : "62", "target" : "55", "value" : "9" }, { "source" : "62", "target" : "58", "value" : "17" }, { "source" : "62", "target" : "59", "value" : "13" }, { "source" : "62", "target" : "48", "value" : "7" }, { "source" : "62", "target" : "57", "value" : "2" }, { "source" : "62", "target" : "41", "value" : "1" }, { "source" : "62", "target" : "61", "value" : "6" }, { "source" : "62", "target" : "60", "value" : "3" }, { "source" : "63", "target" : "59", "value" : "5" }, { "source" : "63", "target" : "48", "value" : "5" }, { "source" : "63", "target" : "62", "value" : "6" }, { "source" : "63", "target" : "57", "value" : "2" }, { "source" : "63", "target" : "58", "value" : "4" }, { "source" : "63", "target" : "61", "value" : "3" }, { "source" : "63", "target" : "60", "value" : "2" }, { "source" : "63", "target" : "55", "value" : "1" }, { "source" : "64", "target" : "55", "value" : "5" }, { "source" : "64", "target" : "62", "value" : "12" }, { "source" : "64", "target" : "48", "value" : "5" }, { "source" : "64", "target" : "63", "value" : "4" }, { "source" : "64", "target" : "58", "value" : "10" }, { "source" : "64", "target" : "61", "value" : "6" }, { "source" : "64", "target" : "60", "value" : "2" }, { "source" : "64", "target" : "59", "value" : "9" }, { "source" : "64", "target" : "57", "value" : "1" }, { "source" : "64", "target" : "11", "value" : "1" }, { "source" : "65", "target" : "63", "value" : "5" }, { "source" : "65", "target" : "64", "value" : "7" }, { "source" : "65", "target" : "48", "value" : "3" }, { "source" : "65", "target" : "62", "value" : "5" }, { "source" : "65", "target" : "58", "value" : "5" }, { "source" : "65", "target" : "61", "value" : "5" }, { "source" : "65", "target" : "60", "value" : "2" }, { "source" : "65", "target" : "59", "value" : "5" }, { "source" : "65", "target" : "57", "value" : "1" }, { "source" : "65", "target" : "55", "value" : "2" }, { "source" : "66", "target" : "64", "value" : "3" }, { "source" : "66", "target" : "58", "value" : "3" }, { "source" : "66", "target" : "59", "value" : "1" }, { "source" : "66", "target" : "62", "value" : "2" }, { "source" : "66", "target" : "65", "value" : "2" }, { "source" : "66", "target" : "48", "value" : "1" }, { "source" : "66", "target" : "63", "value" : "1" }, { "source" : "66", "target" : "61", "value" : "1" }, { "source" : "66", "target" : "60", "value" : "1" }, { "source" : "67", "target" : "57", "value" : "3" }, { "source" : "68", "target" : "25", "value" : "5" }, { "source" : "68", "target" : "11", "value" : "1" }, { "source" : "68", "target" : "24", "value" : "1" }, { "source" : "68", "target" : "27", "value" : "1" }, { "source" : "68", "target" : "48", "value" : "1" }, { "source" : "68", "target" : "41", "value" : "1" }, { "source" : "69", "target" : "25", "value" : "6" }, { "source" : "69", "target" : "68", "value" : "6" }, { "source" : "69", "target" : "11", "value" : "1" }, { "source" : "69", "target" : "24", "value" : "1" }, { "source" : "69", "target" : "27", "value" : "2" }, { "source" : "69", "target" : "48", "value" : "1" }, { "source" : "69", "target" : "41", "value" : "1" }, { "source" : "70", "target" : "25", "value" : "4" }, { "source" : "70", "target" : "69", "value" : "4" }, { "source" : "70", "target" : "68", "value" : "4" }, { "source" : "70", "target" : "11", "value" : "1" }, { "source" : "70", "target" : "24", "value" : "1" }, { "source" : "70", "target" : "27", "value" : "1" }, { "source" : "70", "target" : "41", "value" : "1" }, { "source" : "70", "target" : "58", "value" : "1" }, { "source" : "71", "target" : "27", "value" : "1" }, { "source" : "71", "target" : "69", "value" : "2" }, { "source" : "71", "target" : "68", "value" : "2" }, { "source" : "71", "target" : "70", "value" : "2" }, { "source" : "71", "target" : "11", "value" : "1" }, { "source" : "71", "target" : "48", "value" : "1" }, { "source" : "71", "target" : "41", "value" : "1" }, { "source" : "71", "target" : "25", "value" : "1" }, { "source" : "72", "target" : "26", "value" : "2" }, { "source" : "72", "target" : "27", "value" : "1" }, { "source" : "72", "target" : "11", "value" : "1" }, { "source" : "73", "target" : "48", "value" : "2" }, { "source" : "74", "target" : "48", "value" : "2" }, { "source" : "74", "target" : "73", "value" : "3" }, { "source" : "75", "target" : "69", "value" : "3" }, { "source" : "75", "target" : "68", "value" : "3" }, { "source" : "75", "target" : "25", "value" : "3" }, { "source" : "75", "target" : "48", "value" : "1" }, { "source" : "75", "target" : "41", "value" : "1" }, { "source" : "75", "target" : "70", "value" : "1" }, { "source" : "75", "target" : "71", "value" : "1" }, { "source" : "76", "target" : "64", "value" : "1" }, { "source" : "76", "target" : "65", "value" : "1" }, { "source" : "76", "target" : "66", "value" : "1" }, { "source" : "76", "target" : "63", "value" : "1" }, { "source" : "76", "target" : "62", "value" : "1" }, { "source" : "76", "target" : "48", "value" : "1" }, { "source" : "76", "target" : "58", "value" : "1" } ] ;
var nodes = [ { "name" : "Myriel", "group" : "1" }, { "name" : "Napoleon", "group" : "1" }, { "name" : "Mlle.Baptistine", "group" : "1" }, { "name" : "Mme.Magloire", "group" : "1" }, { "name" : "CountessdeLo", "group" : "1" }, { "name" : "Geborand", "group" : "1" }, { "name" : "Champtercier", "group" : "1" }, { "name" : "Cravatte", "group" : "1" }, { "name" : "Count", "group" : "1" }, { "name" : "OldMan", "group" : "1" }, { "name" : "Labarre", "group" : "2" }, { "name" : "Valjean", "group" : "2" }, { "name" : "Marguerite", "group" : "3" }, { "name" : "Mme.deR", "group" : "2" }, { "name" : "Isabeau", "group" : "2" }, { "name" : "Gervais", "group" : "2" }, { "name" : "Tholomyes", "group" : "3" }, { "name" : "Listolier", "group" : "3" }, { "name" : "Fameuil", "group" : "3" }, { "name" : "Blacheville", "group" : "3" }, { "name" : "Favourite", "group" : "3" }, { "name" : "Dahlia", "group" : "3" }, { "name" : "Zephine", "group" : "3" }, { "name" : "Fantine", "group" : "3" }, { "name" : "Mme.Thenardier", "group" : "4" }, { "name" : "Thenardier", "group" : "4" }, { "name" : "Cosette", "group" : "5" }, { "name" : "Javert", "group" : "4" }, { "name" : "Fauchelevent", "group" : "0" }, { "name" : "Bamatabois", "group" : "2" }, { "name" : "Perpetue", "group" : "3" }, { "name" : "Simplice", "group" : "2" }, { "name" : "Scaufflaire", "group" : "2" }, { "name" : "Woman1", "group" : "2" }, { "name" : "Judge", "group" : "2" }, { "name" : "Champmathieu", "group" : "2" }, { "name" : "Brevet", "group" : "2" }, { "name" : "Chenildieu", "group" : "2" }, { "name" : "Cochepaille", "group" : "2" }, { "name" : "Pontmercy", "group" : "4" }, { "name" : "Boulatruelle", "group" : "6" }, { "name" : "Eponine", "group" : "4" }, { "name" : "Anzelma", "group" : "4" }, { "name" : "Woman2", "group" : "5" }, { "name" : "MotherInnocent", "group" : "0" }, { "name" : "Gribier", "group" : "0" }, { "name" : "Jondrette", "group" : "7" }, { "name" : "Mme.Burgon", "group" : "7" }, { "name" : "Gavroche", "group" : "8" }, { "name" : "Gillenormand", "group" : "5" }, { "name" : "Magnon", "group" : "5" }, { "name" : "Mlle.Gillenormand", "group" : "5" }, { "name" : "Mme.Pontmercy", "group" : "5" }, { "name" : "Mlle.Vaubois", "group" : "5" }, { "name" : "Lt.Gillenormand", "group" : "5" }, { "name" : "Marius", "group" : "8" }, { "name" : "BaronessT", "group" : "5" }, { "name" : "Mabeuf", "group" : "8" }, { "name" : "Enjolras", "group" : "8" }, { "name" : "Combeferre", "group" : "8" }, { "name" : "Prouvaire", "group" : "8" }, { "name" : "Feuilly", "group" : "8" }, { "name" : "Courfeyrac", "group" : "8" }, { "name" : "Bahorel", "group" : "8" }, { "name" : "Bossuet", "group" : "8" }, { "name" : "Joly", "group" : "8" }, { "name" : "Grantaire", "group" : "8" }, { "name" : "MotherPlutarch", "group" : "9" }, { "name" : "Gueulemer", "group" : "4" }, { "name" : "Babet", "group" : "4" }, { "name" : "Claquesous", "group" : "4" }, { "name" : "Montparnasse", "group" : "4" }, { "name" : "Toussaint", "group" : "5" }, { "name" : "Child1", "group" : "10" }, { "name" : "Child2", "group" : "10" }, { "name" : "Brujon", "group" : "4" }, { "name" : "Mme.Hucheloup", "group" : "8" } ] ;
var width = 900
height = 600;
var color = d3.scale.category20();
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-120)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("fill", function(d) { return color(d.group); })
.style("opacity", 0.4)
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);
node.append("circle")
.attr("r", 6)
node.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
function tick() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 13)
.style("stroke-width", ".5px")
.style("font", "17.5px serif")
.style("opacity", 1);
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}
</script>
</body>