Skip to content

Commit f06b2e7

Browse files
liamjberrisfordliamjberrisford
authored
Merge pull request #300 from coding-for-reproducible-research/subnetworks
Add pre-reqs Subnetworks
2 parents 0143afb + c8b1a9d commit f06b2e7

File tree

41 files changed

+7616
-47
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+7616
-47
lines changed

‎_static/multiple_regression_hyperplane.html

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎_static/multiple_regression_hyperplane_2.html

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎_static/workshop_prereqs_advanced_regression_analysis_with_r_.html

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
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/[email protected]/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/[email protected]/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: 100%;
230+
height: 600px;
231+
background-color: #ffffff;
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": "#B0B0B0", "id": "Introduction to Regression with R", "label": "Introduction to Regression with R", "level": 2, "shape": "dot", "size": 10, "title": "Course Name: Introduction to Regression with R\nCourse Pre-reqs: Introduction to R\nSubsequent Courses: Regression Analysis with R Adapting to Varied Data Types"}, {"color": "#B0B0B0", "id": "Regression Analysis with R Adapting to Varied Data Types", "label": "Regression Analysis with R Adapting to Varied Data Types", "level": 3, "shape": "dot", "size": 10, "title": "Course Name: Regression Analysis with R Adapting to Varied Data Types\nCourse Pre-reqs: Introduction to Regression with R\nSubsequent Courses: Advanced Regression Analysis With R "}, {"color": "#B0B0B0", "id": "Advanced Regression Analysis With R ", "label": "Advanced Regression Analysis With R ", "level": 4, "shape": "dot", "size": 10, "title": "Course Name: Advanced Regression Analysis With R \nCourse Pre-reqs: Regression Analysis with R Adapting to Varied Data Types\nSubsequent Courses: None"}, {"color": "#B0B0B0", "id": "Introduction to R", "label": "Introduction to R", "level": 1, "shape": "dot", "size": 10, "title": "Course Name: Introduction to R\nCourse Pre-reqs: None\nSubsequent Courses: Introduction to Regression with R"}]);
286+
edges = new vis.DataSet([{"arrows": "to", "from": "Introduction to Regression with R", "to": "Regression Analysis with R Adapting to Varied Data Types", "width": 1}, {"arrows": "to", "from": "Regression Analysis with R Adapting to Varied Data Types", "to": "Advanced Regression Analysis With R ", "width": 1}, {"arrows": "to", "from": "Introduction to R", "to": "Introduction to Regression with R", "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 = {"layout": {"hierarchical": {"enabled": true, "levelSeparation": 150, "nodeSpacing": 250, "treeSpacing": 300, "blockShifting": true, "edgeMinimization": true, "parentCentralization": true, "direction": "UD", "sortMethod": "hubsize"}}, "interaction": {"navigationButtons": true, "keyboard": true}, "physics": {"enabled": false}};
298+
299+
300+
301+
302+
303+
304+
network = new vis.Network(container, data, options);
305+
306+
307+
308+
309+
310+
311+
312+
313+
314+
315+
return network;
316+
317+
}
318+
drawGraph();
319+
</script>
320+
</body>
321+
</html>

0 commit comments

Comments
 (0)