This repository has been archived by the owner on Feb 23, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
/
sigma_network_example.html
197 lines (164 loc) · 5.03 KB
/
sigma_network_example.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html>
<head>
<title>Sigma Network</title>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src="assets/js/sigma.min.js"></script>
<script src="assets/js/sigma.parsers.json.min.js"></script>
<script src="assets/js/sigma.forceAtlas2.worker.js"></script>
<script src="assets/js/sigma.forceAtlas2.supervisor.js"></script>
<script src="assets/js/sigma.pathfinding.astar.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
#network-graph {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
</style>
</head>
<body>
<div id="network-graph"></div>
<script>
//Disable right click context menu in network-graph div
//Right click is used to make all nodes and edges visible
document.getElementById('network-graph').oncontextmenu = function (e) {
e.preventDefault();
};
//Add a method to the graph that returns all neighbors of a node
sigma.classes.graph.addMethod('neighbors', function(nodeId) {
var k,
neighbors = {},
index = this.allNeighborsIndex[nodeId] || {};
for (k in index)
neighbors[k] = this.nodesIndex[k];
return neighbors;
});
//Import JSON network as object and initiate a sigma network graph,
//run other functions that require a sequential order
var jnet, s;
$.getJSON("assets/data/user_network.json", function(response){
jnet = response;
s = new sigma({
graph: jnet,
container: 'network-graph'
});
buildNetwork();
});
//---------------------Network section-------------------------//
//Create a function to optimize network layout with forceAtlas2
function layoutOptimize(s) {
//Start the ForceAtlas2 algorithm to optimize network layout
s.startForceAtlas2({worker: false, barnesHutOptimize: false, slowDown: 1000, iterationsPerRender: 1000});
//Set time interval to allow layout algorithm to converge on a good state
var t = 0;
var interval = setInterval(function() {
t += 1;
if (t >= 5) {
clearInterval(interval);
s.stopForceAtlas2();
}
}, 100);
}
//Create the function to build the network graph
function buildNetwork() {
//Save the initial colors of the nodes and edges
s.graph.nodes().forEach(function(n) {
n.originalColor = n.color;
});
s.graph.edges().forEach(function(e) {
e.originalColor = e.color;
});
//Override initial edge colors
s.settings({
edgeColor: 'default',
defaultEdgeColor: '#999'
});
// Refresh the graph to see the changes:
s.refresh();
//When a node is hovered, check all nodes to see which are neighbors.
//Set neighbor nodes to dark blue, else keep node as original color.
//Do the same for the edges, coloring connections to neighbors blue.
s.bind('overNode', function(e) {
var nodeId = e.data.node.id,
toKeep = s.graph.neighbors(nodeId);
toKeep[nodeId] = e.data.node;
s.graph.nodes().forEach(function(n) {
if (toKeep[n.id])
n.color = '#36648B';
else
n.color = n.originalColor;
});
s.graph.edges().forEach(function(e) {
if (toKeep[e.source] && toKeep[e.target])
e.color = '#0099CC';
else
e.color = e.originalColor;
});
//Refresh graph to update colors
s.refresh();
});
//Return nodes and edges to original color after mose moves off a node (stops hovering)
s.bind('outNode', function(e) {
s.graph.nodes().forEach(function(n) {
n.color = n.originalColor;
});
s.graph.edges().forEach(function(e) {
e.color = e.originalColor;
});
//Refresh graph to update colors
s.refresh();
});
//When a node is clicked, check all nodes to see which are neighbors.
//Set all non-neighbors to grey and hide them, else set node to original color.
//Change the clicked node's original color to green.
//Do the same for the edges, keeping the ones with both endpoints colored.
//Clicking consecutive nodes will show the joint network all clicked nodes.
s.bind('clickNode', function(e) {
var nodeId = e.data.node.id,
toKeep = s.graph.neighbors(nodeId);
toKeep[nodeId] = e.data.node;
s.graph.nodes().forEach(function(n) {
if (toKeep[n.id] == toKeep[nodeId])
n.originalColor = '#008000';
else if (toKeep[n.id])
n.color = n.originalColor;
else
n.color = '#eee',
n.hidden = true;
});
s.graph.edges().forEach(function(e) {
if (toKeep[e.source] && toKeep[e.target])
e.color = e.originalColor;
else
e.color = '#eee',
e.hidden = true;
});
//Refresh graph to update colors
s.refresh();
});
//When the stage is right-clicked, return nodes and edges to original colors
s.bind('rightClickStage', function(e) {
s.graph.nodes().forEach(function(n) {
n.originalColor = "#2d2d3c",
n.color = n.originalColor,
n.hidden = false;
});
s.graph.edges().forEach(function(e) {
e.color = e.originalColor,
e.hidden = false;
});
//Refresh graph to update colors
s.refresh();
});
//Start the ForceAtlas2 algorithm to optimize network layout
//s.startForceAtlas2({worker: true, barnesHutOptimize: false});
//Execute network graph layout optimizer
layoutOptimize(s);
}
</script>
</body>
</html>