Rmarkdown_JSviz/ForceNetwork.html at master · al2na/Rmarkdown_JSviz · GitHub

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<meta charset="utf-8">
<body>
 <style>
.link {
stroke: #666;
opacity: 0.7;
stroke-width: 1.5px;
}
.node circle {
stroke: #fff;
opacity: 0.7;
stroke-width: 1.5px;
}
.node:not(:hover) .nodetext {
display: none;
}
text {
font: 7px serif;
opacity: 0.7;
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)
.attr("pointer-events", "all")
.call(d3.behavior.zoom().on("zoom", redraw));

var vis = svg
.append("svg:g");

vis.append("svg:rect")
.attr("width", width)
.attr("height", height)
.attr("fill", 'white');

function redraw() {
vis.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}

var link = vis.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = vis.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("fill", function(d) { return color(d.group); })
.style("opacity", 0.7)
.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>