-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathex.html
More file actions
187 lines (132 loc) · 15.2 KB
/
Copy pathex.html
File metadata and controls
187 lines (132 loc) · 15.2 KB
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
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graph Page</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&family=Konkhmer+Sleokchher&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styling.css">
<script src="script.js"></script>
<meta charset="utf-8">
<script src="lib/bindings/utils.js"></script>
<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" />
<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>
<center>
</center>
<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"
></script>
<center>
</center>
<style type="text/css">
#mynetwork {
width: 100%;
height: 600px;
background-color: #ffffff;
border: 1px solid lightgray;
position: relative;
float: left;
}
</style>
</head>
<body>
<div class="header">
<div>
<input class="filter" id="filter" type="text" placeholder="Search...">
<input class="checkbox" id="checkbox" type="checkbox">
<label for="checkbox" class="switch">Include Completed Courses</label>
</div>
<div>
<div class="header-button">
<a href="faq.html">FAQ</a>
</div>
<div class="header-button">
<a href="profile.html">Profile</a>
</div>
</div>
</div>
<div class="card" style="width: 100%">
<div id="mynetwork" class="card-body"></div>
</div>
<script type="text/javascript">
// initialize global variables.
var edges;
var nodes;
var allNodes;
var allEdges;
var nodeColors;
var originalNodes;
var network;
var container;
var options, data;
var filter = {
item : '',
property : '',
value : []
};
// This method is responsible for drawing the graph, returns the drawn network
function drawGraph() {
var container = document.getElementById('mynetwork');
// parsing and collecting nodes and edges from the python
nodes = new vis.DataSet([{"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ANTH 1101", "label": "ANTH 1101", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "BUSN 1101", "label": "BUSN 1101", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ECGR 2103", "label": "ECGR 2103", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ECGR 2104", "label": "ECGR 2104", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ECGR 2181", "label": "ECGR 2181", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ESCI 1101", "label": "ESCI 1101", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "INFO 2130", "label": "INFO 2130", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITCS 3153", "label": "ITCS 3153", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITCS 3156", "label": "ITCS 3156", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITCS 3160", "label": "ITCS 3160", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITCS 3162", "label": "ITCS 3162", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITCS 3190", "label": "ITCS 3190", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITCS 4122", "label": "ITCS 4122", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITCS 4152", "label": "ITCS 4152", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITIS 3135", "label": "ITIS 3135", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITIS 3246", "label": "ITIS 3246", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITIS 4340", "label": "ITIS 4340", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITSC 1212", "label": "ITSC 1212", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITSC 1213", "label": "ITSC 1213", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITSC 2175", "label": "ITSC 2175", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITSC 2181", "label": "ITSC 2181", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITSC 218121", "label": "ITSC 2181", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITSC 2214", "label": "ITSC 2214", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITSC 2600", "label": "ITSC 2600", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITSC 3146", "label": "ITSC 3146", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITSC 3155", "label": "ITSC 3155", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITSC 3688", "label": "ITSC 3688", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "ITSC 4155", "label": "ITSC 4155", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "LBST 1103", "label": "LBST 1103", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "LBST 2213", "label": "LBST 2213", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "LBST 2301", "label": "LBST 2301", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "MATH 1120", "label": "MATH 1120", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "MATH 1241", "label": "MATH 1241", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "MATH 1242", "label": "MATH 1242", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "MATH 2164", "label": "MATH 2164", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "MATH 216435", "label": "MATH 2164", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "METR 1102", "label": "METR 1102", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "METR 1102L", "label": "METR 1102L", "shape": "box", "width": 120}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "MUPF 1114", "label": "MUPF 1114", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "PHIL 1001", "label": "PHIL 1001", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "RELS 1502", "label": "RELS 1502", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "SPAN 1201", "label": "SPAN 1201", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "SPAN 1202", "label": "SPAN 1202", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "STAT 2122", "label": "STAT 2122", "shape": "box", "width": 110}, {"color": "#808080", "font": {"color": "white", "size": 20}, "height": 50, "id": "UWRT 1103", "label": "UWRT 1103", "shape": "box", "width": 110}]);
edges = new vis.DataSet([{"arrows": "to", "dashes": false, "from": "STAT 2122", "title": "", "to": "MATH 1242", "width": 1}, {"arrows": "to", "dashes": false, "from": "SPAN 1202", "title": "", "to": "SPAN 1201", "width": 1}, {"arrows": "to", "dashes": false, "from": "MATH 2164", "title": "", "to": "MATH 1120", "width": 1}, {"arrows": "to", "dashes": false, "from": "MATH 1242", "title": "", "to": "MATH 1241", "width": 1}, {"arrows": "to", "dashes": false, "from": "LBST 2301", "title": "", "to": "UWRT 1103", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITSC 4155", "title": "", "to": "ITSC 2214", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITSC 4155", "title": "", "to": "ITSC 3155", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITSC 3155", "title": "", "to": "ITSC 2214", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITSC 3146", "title": "", "to": "ITSC 2214", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITSC 3146", "title": "", "to": "ITSC 2181", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITSC 2214", "title": "", "to": "ITSC 1213", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITSC 2181", "title": "", "to": "ITSC 1212", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITSC 2175", "title": "", "to": "ITSC 1212", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITSC 2175", "title": "", "to": "MATH 1120", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITSC 1213", "title": "", "to": "ITSC 1212", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITSC 1213", "title": "", "to": "MATH 1120", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITIS 4340", "title": "", "to": "ITSC 2214", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITIS 3246", "title": "", "to": "ITSC 3146", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITIS 3135", "title": "", "to": "ITSC 2214", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITCS 4152", "title": "", "to": "ITCS 3156", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITCS 4122", "title": "", "to": "STAT 2122", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITCS 3190", "title": "", "to": "ITSC 2214", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITCS 3162", "title": "", "to": "ITSC 2214", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITCS 3160", "title": "", "to": "ITSC 1213", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITCS 3156", "title": "", "to": "ITSC 2214", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITCS 3156", "title": "", "to": "STAT 2122", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITCS 3156", "title": "", "to": "MATH 2164", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITCS 3153", "title": "", "to": "STAT 2122", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITCS 3153", "title": "", "to": "MATH 2164", "width": 1}, {"arrows": "to", "dashes": false, "from": "ITCS 3153", "title": "", "to": "ITSC 2214", "width": 1}, {"arrows": "to", "dashes": false, "from": "ECGR 2181", "title": "", "to": "ECGR 2103", "width": 1}, {"arrows": "to", "dashes": false, "from": "ECGR 2104", "title": "", "to": "ECGR 2103", "width": 1}]);
nodeColors = {};
allNodes = nodes.get({ returnType: "Object" });
for (nodeId in allNodes) {
nodeColors[nodeId] = allNodes[nodeId].color;
}
allEdges = edges.get({ returnType: "Object" });
// adding nodes and edges to the graph
data = {nodes: nodes, edges: edges};
var options = {
"configure": {
"enabled": false
},
"edges": {
"color": {
"inherit": true
},
"smooth": {
"enabled": true,
"type": "dynamic"
}
},
"interaction": {
"dragNodes": true,
"hideEdgesOnDrag": false,
"hideNodesOnDrag": false
},
"physics": {
"barnesHut": {
"avoidOverlap": 0.05,
"centralGravity": 0.1,
"damping": 0.09,
"gravitationalConstant": -2000,
"springConstant": 0.01,
"springLength": 100
},
"enabled": true,
"stabilization": {
"enabled": true,
"fit": true,
"iterations": 1000,
"onlyDynamicEdges": false,
"updateInterval": 50
}
}
};
network = new vis.Network(container, data, options);
return network;
}
drawGraph();
</script>
</body>
</html>