akshatsanghvi commited on
Commit
531b844
·
1 Parent(s): 70a65c2

Create himym.html

Browse files
Files changed (1) hide show
  1. characters/himym.html +349 -0
characters/himym.html ADDED
@@ -0,0 +1,349 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html>
2
+ <head>
3
+ <meta charset="utf-8">
4
+
5
+ <script>function neighbourhoodHighlight(params) {
6
+ // console.log("in nieghbourhoodhighlight");
7
+ allNodes = nodes.get({ returnType: "Object" });
8
+ // originalNodes = JSON.parse(JSON.stringify(allNodes));
9
+ // if something is selected:
10
+ if (params.nodes.length > 0) {
11
+ highlightActive = true;
12
+ var i, j;
13
+ var selectedNode = params.nodes[0];
14
+ var degrees = 2;
15
+
16
+ // mark all nodes as hard to read.
17
+ for (let nodeId in allNodes) {
18
+ // nodeColors[nodeId] = allNodes[nodeId].color;
19
+ allNodes[nodeId].color = "rgba(200,200,200,0.5)";
20
+ if (allNodes[nodeId].hiddenLabel === undefined) {
21
+ allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
22
+ allNodes[nodeId].label = undefined;
23
+ }
24
+ }
25
+ var connectedNodes = network.getConnectedNodes(selectedNode);
26
+ var allConnectedNodes = [];
27
+
28
+ // get the second degree nodes
29
+ for (i = 1; i < degrees; i++) {
30
+ for (j = 0; j < connectedNodes.length; j++) {
31
+ allConnectedNodes = allConnectedNodes.concat(
32
+ network.getConnectedNodes(connectedNodes[j])
33
+ );
34
+ }
35
+ }
36
+
37
+ // all second degree nodes get a different color and their label back
38
+ for (i = 0; i < allConnectedNodes.length; i++) {
39
+ // allNodes[allConnectedNodes[i]].color = "pink";
40
+ allNodes[allConnectedNodes[i]].color = "rgba(150,150,150,0.75)";
41
+ if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
42
+ allNodes[allConnectedNodes[i]].label =
43
+ allNodes[allConnectedNodes[i]].hiddenLabel;
44
+ allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
45
+ }
46
+ }
47
+
48
+ // all first degree nodes get their own color and their label back
49
+ for (i = 0; i < connectedNodes.length; i++) {
50
+ // allNodes[connectedNodes[i]].color = undefined;
51
+ allNodes[connectedNodes[i]].color = nodeColors[connectedNodes[i]];
52
+ if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
53
+ allNodes[connectedNodes[i]].label =
54
+ allNodes[connectedNodes[i]].hiddenLabel;
55
+ allNodes[connectedNodes[i]].hiddenLabel = undefined;
56
+ }
57
+ }
58
+
59
+ // the main node gets its own color and its label back.
60
+ // allNodes[selectedNode].color = undefined;
61
+ allNodes[selectedNode].color = nodeColors[selectedNode];
62
+ if (allNodes[selectedNode].hiddenLabel !== undefined) {
63
+ allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
64
+ allNodes[selectedNode].hiddenLabel = undefined;
65
+ }
66
+ } else if (highlightActive === true) {
67
+ // console.log("highlightActive was true");
68
+ // reset all nodes
69
+ for (let nodeId in allNodes) {
70
+ // allNodes[nodeId].color = "purple";
71
+ allNodes[nodeId].color = nodeColors[nodeId];
72
+ // delete allNodes[nodeId].color;
73
+ if (allNodes[nodeId].hiddenLabel !== undefined) {
74
+ allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
75
+ allNodes[nodeId].hiddenLabel = undefined;
76
+ }
77
+ }
78
+ highlightActive = false;
79
+ }
80
+
81
+ // transform the object into an array
82
+ var updateArray = [];
83
+ if (params.nodes.length > 0) {
84
+ for (let nodeId in allNodes) {
85
+ if (allNodes.hasOwnProperty(nodeId)) {
86
+ // console.log(allNodes[nodeId]);
87
+ updateArray.push(allNodes[nodeId]);
88
+ }
89
+ }
90
+ nodes.update(updateArray);
91
+ } else {
92
+ // console.log("Nothing was selected");
93
+ for (let nodeId in allNodes) {
94
+ if (allNodes.hasOwnProperty(nodeId)) {
95
+ // console.log(allNodes[nodeId]);
96
+ // allNodes[nodeId].color = {};
97
+ updateArray.push(allNodes[nodeId]);
98
+ }
99
+ }
100
+ nodes.update(updateArray);
101
+ }
102
+ }
103
+
104
+ function filterHighlight(params) {
105
+ allNodes = nodes.get({ returnType: "Object" });
106
+ // if something is selected:
107
+ if (params.nodes.length > 0) {
108
+ filterActive = true;
109
+ let selectedNodes = params.nodes;
110
+
111
+ // hiding all nodes and saving the label
112
+ for (let nodeId in allNodes) {
113
+ allNodes[nodeId].hidden = true;
114
+ if (allNodes[nodeId].savedLabel === undefined) {
115
+ allNodes[nodeId].savedLabel = allNodes[nodeId].label;
116
+ allNodes[nodeId].label = undefined;
117
+ }
118
+ }
119
+
120
+ for (let i=0; i < selectedNodes.length; i++) {
121
+ allNodes[selectedNodes[i]].hidden = false;
122
+ if (allNodes[selectedNodes[i]].savedLabel !== undefined) {
123
+ allNodes[selectedNodes[i]].label = allNodes[selectedNodes[i]].savedLabel;
124
+ allNodes[selectedNodes[i]].savedLabel = undefined;
125
+ }
126
+ }
127
+
128
+ } else if (filterActive === true) {
129
+ // reset all nodes
130
+ for (let nodeId in allNodes) {
131
+ allNodes[nodeId].hidden = false;
132
+ if (allNodes[nodeId].savedLabel !== undefined) {
133
+ allNodes[nodeId].label = allNodes[nodeId].savedLabel;
134
+ allNodes[nodeId].savedLabel = undefined;
135
+ }
136
+ }
137
+ filterActive = false;
138
+ }
139
+
140
+ // transform the object into an array
141
+ var updateArray = [];
142
+ if (params.nodes.length > 0) {
143
+ for (let nodeId in allNodes) {
144
+ if (allNodes.hasOwnProperty(nodeId)) {
145
+ updateArray.push(allNodes[nodeId]);
146
+ }
147
+ }
148
+ nodes.update(updateArray);
149
+ } else {
150
+ for (let nodeId in allNodes) {
151
+ if (allNodes.hasOwnProperty(nodeId)) {
152
+ updateArray.push(allNodes[nodeId]);
153
+ }
154
+ }
155
+ nodes.update(updateArray);
156
+ }
157
+ }
158
+
159
+ function selectNode(nodes) {
160
+ network.selectNodes(nodes);
161
+ neighbourhoodHighlight({ nodes: nodes });
162
+ return nodes;
163
+ }
164
+
165
+ function selectNodes(nodes) {
166
+ network.selectNodes(nodes);
167
+ filterHighlight({nodes: nodes});
168
+ return nodes;
169
+ }
170
+
171
+ function highlightFilter(filter) {
172
+ let selectedNodes = []
173
+ let selectedProp = filter['property']
174
+ if (filter['item'] === 'node') {
175
+ let allNodes = nodes.get({ returnType: "Object" });
176
+ for (let nodeId in allNodes) {
177
+ if (allNodes[nodeId][selectedProp] && filter['value'].includes((allNodes[nodeId][selectedProp]).toString())) {
178
+ selectedNodes.push(nodeId)
179
+ }
180
+ }
181
+ }
182
+ else if (filter['item'] === 'edge'){
183
+ let allEdges = edges.get({returnType: 'object'});
184
+ // check if the selected property exists for selected edge and select the nodes connected to the edge
185
+ for (let edge in allEdges) {
186
+ if (allEdges[edge][selectedProp] && filter['value'].includes((allEdges[edge][selectedProp]).toString())) {
187
+ selectedNodes.push(allEdges[edge]['from'])
188
+ selectedNodes.push(allEdges[edge]['to'])
189
+ }
190
+ }
191
+ }
192
+ selectNodes(selectedNodes)
193
+ }</script>
194
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
195
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
196
+
197
+
198
+
199
+
200
+
201
+
202
+
203
+
204
+ <center>
205
+ <h1></h1>
206
+ </center>
207
+
208
+ <!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
209
+ <script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
210
+ <link
211
+ href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
212
+ rel="stylesheet"
213
+ integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
214
+ crossorigin="anonymous"
215
+ />
216
+ <script
217
+ src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
218
+ integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
219
+ crossorigin="anonymous"
220
+ ></script>
221
+
222
+
223
+ <center>
224
+ <h1></h1>
225
+ </center>
226
+ <style type="text/css">
227
+
228
+ #mynetwork {
229
+ width: 1000px;
230
+ height: 700px;
231
+ background-color: #222222;
232
+ border: 1px solid lightgray;
233
+ position: relative;
234
+ float: left;
235
+ }
236
+
237
+
238
+
239
+
240
+
241
+
242
+ </style>
243
+ </head>
244
+
245
+
246
+ <body>
247
+ <div class="card" style="width: 100%">
248
+
249
+
250
+ <div id="mynetwork" class="card-body"></div>
251
+ </div>
252
+
253
+
254
+
255
+
256
+ <script type="text/javascript">
257
+
258
+ // initialize global variables.
259
+ var edges;
260
+ var nodes;
261
+ var allNodes;
262
+ var allEdges;
263
+ var nodeColors;
264
+ var originalNodes;
265
+ var network;
266
+ var container;
267
+ var options, data;
268
+ var filter = {
269
+ item : '',
270
+ property : '',
271
+ value : []
272
+ };
273
+
274
+
275
+
276
+
277
+
278
+ // This method is responsible for drawing the graph, returns the drawn network
279
+ function drawGraph() {
280
+ var container = document.getElementById('mynetwork');
281
+
282
+
283
+
284
+ // parsing and collecting nodes and edges from the python
285
+ nodes = new vis.DataSet([{"color": "#97c2fc", "font": {"color": "white"}, "id": "Robin", "label": "Robin", "shape": "dot", "size": 25}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Ted", "label": "Ted", "shape": "dot", "size": 37}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Lily", "label": "Lily", "shape": "dot", "size": 25}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Marshall", "label": "Marshall", "shape": "dot", "size": 35}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Victoria", "label": "Victoria", "shape": "dot", "size": 9}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Barney", "label": "Barney", "shape": "dot", "size": 21}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Sandy", "label": "Sandy", "shape": "dot", "size": 9}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Carlos", "label": "Carlos", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Mary", "label": "Mary", "shape": "dot", "size": 7}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Derek", "label": "Derek", "shape": "dot", "size": 5}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Mike", "label": "Mike", "shape": "dot", "size": 5}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Carl", "label": "Carl", "shape": "dot", "size": 5}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Elvis", "label": "Elvis", "shape": "dot", "size": 5}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Amanda", "label": "Amanda", "shape": "dot", "size": 4}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Trudy", "label": "Trudy", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Brian", "label": "Brian", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Claudia", "label": "Claudia", "shape": "dot", "size": 7}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Gatsby", "label": "Gatsby", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Booger", "label": "Booger", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Denise", "label": "Denise", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Natalie", "label": "Natalie", "shape": "dot", "size": 5}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Ellen", "label": "Ellen", "shape": "dot", "size": 3}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Stuart", "label": "Stuart", "shape": "dot", "size": 5}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Rivers", "label": "Rivers", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Ranjit", "label": "Ranjit", "shape": "dot", "size": 7}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Lou", "label": "Lou", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Valerie", "label": "Valerie", "shape": "dot", "size": 4}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Walter", "label": "Walter", "shape": "dot", "size": 3}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Tony", "label": "Tony", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Buttercup", "label": "Buttercup", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Kelly", "label": "Kelly", "shape": "dot", "size": 4}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Van", "label": "Van", "shape": "dot", "size": 4}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Billy", "label": "Billy", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Lando", "label": "Lando", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Yasmine", "label": "Yasmine", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Janice", "label": "Janice", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Shannon", "label": "Shannon", "shape": "dot", "size": 7}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Gabrielle", "label": "Gabrielle", "shape": "dot", "size": 5}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Katie", "label": "Katie", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Stepford", "label": "Stepford", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Tracey", "label": "Tracey", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Gretel", "label": "Gretel", "shape": "dot", "size": 3}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Emilio", "label": "Emilio", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Sergei", "label": "Sergei", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "O\u0027Brien", "label": "O\u0027Brien", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Marcus", "label": "Marcus", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Judy", "label": "Judy", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Sascha", "label": "Sascha", "shape": "dot", "size": 3}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Austin", "label": "Austin", "shape": "dot", "size": 3}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Vampire", "label": "Vampire", "shape": "dot", "size": 3}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Janet", "label": "Janet", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Matson", "label": "Matson", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Mayo", "label": "Mayo", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Bilson", "label": "Bilson", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Bong", "label": "Bong", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Chung", "label": "Chung", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Claire", "label": "Claire", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Blauman", "label": "Blauman", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Julia", "label": "Julia", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Norah", "label": "Norah", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Svetlana", "label": "Svetlana", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Ray", "label": "Ray", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Marybeth", "label": "Marybeth", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Luke", "label": "Luke", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Kendall", "label": "Kendall", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Misty", "label": "Misty", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Greg", "label": "Greg", "shape": "dot", "size": 3}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Heather", "label": "Heather", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Punky", "label": "Punky", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "John", "label": "John", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Sharon", "label": "Sharon", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Samantha", "label": "Samantha", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Windjammer", "label": "Windjammer", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Max", "label": "Max", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Barnacle", "label": "Barnacle", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Cher", "label": "Cher", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Ewoks", "label": "Ewoks", "shape": "dot", "size": 3}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Sonny", "label": "Sonny", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Kit", "label": "Kit", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Belle", "label": "Belle", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Krav", "label": "Krav", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Laura", "label": "Laura", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Erica", "label": "Erica", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Keith", "label": "Keith", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Hansel", "label": "Hansel", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Kim", "label": "Kim", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Otis", "label": "Otis", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Ictor", "label": "Ictor", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Tori", "label": "Tori", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Vicky", "label": "Vicky", "shape": "dot", "size": 2}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Ethel", "label": "Ethel", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Sadie", "label": "Sadie", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Rufus", "label": "Rufus", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Troofus", "label": "Troofus", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Louise", "label": "Louise", "shape": "dot", "size": 1}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "Thelma", "label": "Thelma", "shape": "dot", "size": 1}]);
286
+ edges = new vis.DataSet([{"from": "Robin", "to": "Ted", "value": 7, "width": 1}, {"from": "Robin", "to": "Lily", "value": 3, "width": 1}, {"from": "Robin", "to": "Marshall", "value": 4, "width": 1}, {"from": "Robin", "to": "Victoria", "value": 30, "width": 1}, {"from": "Robin", "to": "Barney", "value": 27, "width": 1}, {"from": "Robin", "to": "Sandy", "value": 24, "width": 1}, {"from": "Robin", "to": "Carlos", "value": 16, "width": 1}, {"from": "Robin", "to": "Mary", "value": 12, "width": 1}, {"from": "Robin", "to": "Derek", "value": 8, "width": 1}, {"from": "Robin", "to": "Mike", "value": 7, "width": 1}, {"from": "Robin", "to": "Carl", "value": 7, "width": 1}, {"from": "Robin", "to": "Elvis", "value": 6, "width": 1}, {"from": "Robin", "to": "Amanda", "value": 6, "width": 1}, {"from": "Robin", "to": "Trudy", "value": 6, "width": 1}, {"from": "Robin", "to": "Brian", "value": 4, "width": 1}, {"from": "Robin", "to": "Claudia", "value": 4, "width": 1}, {"from": "Robin", "to": "Gatsby", "value": 3, "width": 1}, {"from": "Robin", "to": "Booger", "value": 3, "width": 1}, {"from": "Robin", "to": "Denise", "value": 3, "width": 1}, {"from": "Robin", "to": "Natalie", "value": 2, "width": 1}, {"from": "Robin", "to": "Ellen", "value": 3, "width": 1}, {"from": "Robin", "to": "Stuart", "value": 2, "width": 1}, {"from": "Robin", "to": "Rivers", "value": 2, "width": 1}, {"from": "Robin", "to": "Ranjit", "value": 2, "width": 1}, {"from": "Robin", "to": "Lou", "value": 2, "width": 1}, {"from": "Ted", "to": "Barney", "value": 3, "width": 1}, {"from": "Ted", "to": "Lily", "value": 5, "width": 1}, {"from": "Ted", "to": "Marshall", "value": 2, "width": 1}, {"from": "Ted", "to": "Victoria", "value": 64, "width": 1}, {"from": "Ted", "to": "Mary", "value": 30, "width": 1}, {"from": "Ted", "to": "Claudia", "value": 23, "width": 1}, {"from": "Ted", "to": "Valerie", "value": 16, "width": 1}, {"from": "Ted", "to": "Ellen", "value": 15, "width": 1}, {"from": "Ted", "to": "Sandy", "value": 14, "width": 1}, {"from": "Ted", "to": "Carlos", "value": 12, "width": 1}, {"from": "Ted", "to": "Ranjit", "value": 10, "width": 1}, {"from": "Ted", "to": "Walter", "value": 12, "width": 1}, {"from": "Ted", "to": "Tony", "value": 11, "width": 1}, {"from": "Ted", "to": "Buttercup", "value": 10, "width": 1}, {"from": "Ted", "to": "Carl", "value": 8, "width": 1}, {"from": "Ted", "to": "Amanda", "value": 8, "width": 1}, {"from": "Ted", "to": "Kelly", "value": 8, "width": 1}, {"from": "Ted", "to": "Stuart", "value": 8, "width": 1}, {"from": "Ted", "to": "Van", "value": 7, "width": 1}, {"from": "Ted", "to": "Billy", "value": 6, "width": 1}, {"from": "Ted", "to": "Lando", "value": 6, "width": 1}, {"from": "Ted", "to": "Yasmine", "value": 5, "width": 1}, {"from": "Ted", "to": "Derek", "value": 5, "width": 1}, {"from": "Ted", "to": "Janice", "value": 5, "width": 1}, {"from": "Ted", "to": "Elvis", "value": 4, "width": 1}, {"from": "Ted", "to": "Shannon", "value": 4, "width": 1}, {"from": "Ted", "to": "Natalie", "value": 2, "width": 1}, {"from": "Ted", "to": "Gabrielle", "value": 3, "width": 1}, {"from": "Ted", "to": "Katie", "value": 3, "width": 1}, {"from": "Ted", "to": "Stepford", "value": 3, "width": 1}, {"from": "Ted", "to": "Lou", "value": 3, "width": 1}, {"from": "Ted", "to": "Tracey", "value": 2, "width": 1}, {"from": "Ted", "to": "Gretel", "value": 2, "width": 1}, {"from": "Ted", "to": "Emilio", "value": 2, "width": 1}, {"from": "Ted", "to": "Sergei", "value": 2, "width": 1}, {"from": "Ted", "to": "O\u0027Brien", "value": 2, "width": 1}, {"from": "Lily", "to": "Marshall", "value": 3, "width": 1}, {"from": "Lily", "to": "Barney", "value": 3, "width": 1}, {"from": "Lily", "to": "Mary", "value": 10, "width": 1}, {"from": "Lily", "to": "Van", "value": 9, "width": 1}, {"from": "Lily", "to": "Sandy", "value": 9, "width": 1}, {"from": "Lily", "to": "Valerie", "value": 7, "width": 1}, {"from": "Lily", "to": "Claudia", "value": 6, "width": 1}, {"from": "Lily", "to": "Gabrielle", "value": 5, "width": 1}, {"from": "Lily", "to": "Ranjit", "value": 5, "width": 1}, {"from": "Lily", "to": "Mike", "value": 4, "width": 1}, {"from": "Lily", "to": "Stuart", "value": 4, "width": 1}, {"from": "Lily", "to": "Marcus", "value": 4, "width": 1}, {"from": "Lily", "to": "Kelly", "value": 4, "width": 1}, {"from": "Lily", "to": "Elvis", "value": 3, "width": 1}, {"from": "Lily", "to": "Judy", "value": 3, "width": 1}, {"from": "Lily", "to": "Shannon", "value": 3, "width": 1}, {"from": "Lily", "to": "Sascha", "value": 3, "width": 1}, {"from": "Lily", "to": "Victoria", "value": 3, "width": 1}, {"from": "Lily", "to": "Austin", "value": 3, "width": 1}, {"from": "Lily", "to": "Vampire", "value": 2, "width": 1}, {"from": "Lily", "to": "Janet", "value": 2, "width": 1}, {"from": "Lily", "to": "Matson", "value": 2, "width": 1}, {"from": "Lily", "to": "Mayo", "value": 2, "width": 1}, {"from": "Marshall", "to": "Barney", "value": 3, "width": 1}, {"from": "Marshall", "to": "Victoria", "value": 11, "width": 1}, {"from": "Marshall", "to": "Sandy", "value": 9, "width": 1}, {"from": "Marshall", "to": "Van", "value": 6, "width": 1}, {"from": "Marshall", "to": "Stuart", "value": 6, "width": 1}, {"from": "Marshall", "to": "Claudia", "value": 6, "width": 1}, {"from": "Marshall", "to": "Amanda", "value": 6, "width": 1}, {"from": "Marshall", "to": "Sascha", "value": 5, "width": 1}, {"from": "Marshall", "to": "Mary", "value": 5, "width": 1}, {"from": "Marshall", "to": "Bilson", "value": 4, "width": 1}, {"from": "Marshall", "to": "Tracey", "value": 4, "width": 1}, {"from": "Marshall", "to": "Bong", "value": 4, "width": 1}, {"from": "Marshall", "to": "Austin", "value": 4, "width": 1}, {"from": "Marshall", "to": "Valerie", "value": 4, "width": 1}, {"from": "Marshall", "to": "Carl", "value": 4, "width": 1}, {"from": "Marshall", "to": "Derek", "value": 3, "width": 1}, {"from": "Marshall", "to": "Chung", "value": 3, "width": 1}, {"from": "Marshall", "to": "Claire", "value": 3, "width": 1}, {"from": "Marshall", "to": "Blauman", "value": 3, "width": 1}, {"from": "Marshall", "to": "Julia", "value": 3, "width": 1}, {"from": "Marshall", "to": "Kelly", "value": 3, "width": 1}, {"from": "Marshall", "to": "Denise", "value": 3, "width": 1}, {"from": "Marshall", "to": "Norah", "value": 3, "width": 1}, {"from": "Marshall", "to": "Shannon", "value": 3, "width": 1}, {"from": "Marshall", "to": "Judy", "value": 2, "width": 1}, {"from": "Marshall", "to": "Marcus", "value": 2, "width": 1}, {"from": "Marshall", "to": "Svetlana", "value": 2, "width": 1}, {"from": "Marshall", "to": "Ray", "value": 2, "width": 1}, {"from": "Marshall", "to": "Ranjit", "value": 2, "width": 1}, {"from": "Marshall", "to": "Matson", "value": 2, "width": 1}, {"from": "Marshall", "to": "Marybeth", "value": 2, "width": 1}, {"from": "Marshall", "to": "Luke", "value": 2, "width": 1}, {"from": "Barney", "to": "Mary", "value": 24, "width": 1}, {"from": "Barney", "to": "Shannon", "value": 13, "width": 1}, {"from": "Barney", "to": "Victoria", "value": 9, "width": 1}, {"from": "Barney", "to": "Sandy", "value": 8, "width": 1}, {"from": "Barney", "to": "Claudia", "value": 8, "width": 1}, {"from": "Barney", "to": "Ranjit", "value": 5, "width": 1}, {"from": "Barney", "to": "Elvis", "value": 5, "width": 1}, {"from": "Barney", "to": "Walter", "value": 4, "width": 1}, {"from": "Barney", "to": "Kendall", "value": 4, "width": 1}, {"from": "Barney", "to": "Misty", "value": 3, "width": 1}, {"from": "Barney", "to": "Carl", "value": 3, "width": 1}, {"from": "Barney", "to": "Sascha", "value": 3, "width": 1}, {"from": "Barney", "to": "Marybeth", "value": 3, "width": 1}, {"from": "Barney", "to": "Derek", "value": 3, "width": 1}, {"from": "Barney", "to": "Greg", "value": 3, "width": 1}, {"from": "Barney", "to": "Heather", "value": 3, "width": 1}, {"from": "Barney", "to": "Sergei", "value": 3, "width": 1}, {"from": "Victoria", "to": "Elvis", "value": 5, "width": 1}, {"from": "Victoria", "to": "Shannon", "value": 4, "width": 1}, {"from": "Victoria", "to": "Claudia", "value": 3, "width": 1}, {"from": "Victoria", "to": "Punky", "value": 2, "width": 1}, {"from": "Mary", "to": "Sandy", "value": 22, "width": 1}, {"from": "Mary", "to": "Vampire", "value": 3, "width": 1}, {"from": "Sandy", "to": "Rivers", "value": 5, "width": 1}, {"from": "Sandy", "to": "Vampire", "value": 3, "width": 1}, {"from": "Sandy", "to": "Mike", "value": 2, "width": 1}, {"from": "Claudia", "to": "Stuart", "value": 23, "width": 1}, {"from": "Valerie", "to": "Van", "value": 7, "width": 1}, {"from": "Ellen", "to": "John", "value": 3, "width": 1}, {"from": "Shannon", "to": "Greg", "value": 7, "width": 1}, {"from": "Shannon", "to": "Sharon", "value": 3, "width": 1}, {"from": "Ranjit", "to": "Derek", "value": 5, "width": 1}, {"from": "Ranjit", "to": "Natalie", "value": 2, "width": 1}, {"from": "Walter", "to": "Samantha", "value": 3, "width": 1}, {"from": "Carl", "to": "Windjammer", "value": 4, "width": 1}, {"from": "Amanda", "to": "Kendall", "value": 4, "width": 1}, {"from": "Kelly", "to": "Gabrielle", "value": 2, "width": 1}, {"from": "Greg", "to": "Max", "value": 2, "width": 1}, {"from": "Mike", "to": "Barnacle", "value": 6, "width": 1}, {"from": "Mike", "to": "Gretel", "value": 4, "width": 1}, {"from": "Cher", "to": "Ewoks", "value": 6, "width": 1}, {"from": "Cher", "to": "Sonny", "value": 5, "width": 1}, {"from": "Ewoks", "to": "Sonny", "value": 3, "width": 1}, {"from": "Ewoks", "to": "Kit", "value": 2, "width": 1}, {"from": "Belle", "to": "Natalie", "value": 6, "width": 1}, {"from": "Natalie", "to": "Krav", "value": 3, "width": 1}, {"from": "Gabrielle", "to": "Laura", "value": 2, "width": 1}, {"from": "Gabrielle", "to": "Erica", "value": 2, "width": 1}, {"from": "Brian", "to": "Keith", "value": 3, "width": 1}, {"from": "Austin", "to": "Claire", "value": 3, "width": 1}, {"from": "Gretel", "to": "Hansel", "value": 2, "width": 1}, {"from": "Kim", "to": "Otis", "value": 3, "width": 1}, {"from": "Misty", "to": "Heather", "value": 2, "width": 1}, {"from": "Ictor", "to": "Tori", "value": 2, "width": 1}, {"from": "Ictor", "to": "Vicky", "value": 2, "width": 1}, {"from": "Tori", "to": "Vicky", "value": 2, "width": 1}, {"from": "Ethel", "to": "Sadie", "value": 2, "width": 1}, {"from": "Rufus", "to": "Troofus", "value": 2, "width": 1}, {"from": "Louise", "to": "Thelma", "value": 2, "width": 1}]);
287
+
288
+ nodeColors = {};
289
+ allNodes = nodes.get({ returnType: "Object" });
290
+ for (nodeId in allNodes) {
291
+ nodeColors[nodeId] = allNodes[nodeId].color;
292
+ }
293
+ allEdges = edges.get({ returnType: "Object" });
294
+ // adding nodes and edges to the graph
295
+ data = {nodes: nodes, edges: edges};
296
+
297
+ var options = {
298
+ "configure": {
299
+ "enabled": false
300
+ },
301
+ "edges": {
302
+ "color": {
303
+ "inherit": true
304
+ },
305
+ "smooth": {
306
+ "enabled": true,
307
+ "type": "dynamic"
308
+ }
309
+ },
310
+ "interaction": {
311
+ "dragNodes": true,
312
+ "hideEdgesOnDrag": false,
313
+ "hideNodesOnDrag": false
314
+ },
315
+ "physics": {
316
+ "enabled": true,
317
+ "stabilization": {
318
+ "enabled": true,
319
+ "fit": true,
320
+ "iterations": 1000,
321
+ "onlyDynamicEdges": false,
322
+ "updateInterval": 50
323
+ }
324
+ }
325
+ };
326
+
327
+
328
+
329
+
330
+
331
+
332
+ network = new vis.Network(container, data, options);
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
343
+ return network;
344
+
345
+ }
346
+ drawGraph();
347
+ </script>
348
+ </body>
349
+ </html>