-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
65 lines (60 loc) · 2.84 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Depth vs. Breadth</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<main>
<table>
<tr>
<th id ="depth-tab">Depth First Algortithm</th>
<th id="breadth-tab">Breadth First Algorithm</th>
<th id="new-tab">Create New Graph</th>
</tr>
</table>
<div id="code-window">
<p id="depth-function">
function <strong>depthFirst</strong>(node) {
let children = node.children;
highlight(node);
for (let i = 0; i < children.length; i++) {
depthFirst(children[i]);
}
}
</p>
<p id="breadth-function">
function <strong>breadthFirst</strong>(nodeArray) {
siblings = [];
//Top node isn't an array, so put it in an array
if (!Array.isArray(nodeArray)) {
nodeArray = [nodeArray];
}
nodeArray.forEach( (node) => {
highlight(node);
});
nodeArray.forEach( (node) => {
let children = node.children;
for (let i = 0; i < children.length; i++) {
siblings.push(children[i]);
});
breadthFirst(siblings);
)
</p>
</div>
<div id="node-window">
<canvas id="canvas" width="1280px" height="500px"></canvas>
<div class="tree-display" id="tree-display"></div>
</div>
<div id="text-window">
Summary:
<p id="depth-text"> This simple function shows how recursion is naturally conducive to traversing graph structures. In this sequence, each time the recursive function is invoked, it highlights a new node. After a node is highlighted, a loop is executed that invokes all of the node's children. However, these child nodes are not invoked sequentially as it appears in the loop body. Instead, each node invoked will then execute it's own loop invoking all of it's children recursively. Following this recursive pattern, the first child node of each node is invoked, which then invokes it's own first child, all the way to the end of that branch of the graph. This creates the 'Depth First' pattern of this process.
</p>
<p id="breadth-text"> This function doesn't highlight just one node per recursive call. Instead, it executes a loop that highlights a complete layer of nodes sequentially. Upon a node layer's completion, an array of all nodes on the next layer is created and passed to the next recursive call. The new layer of nodes is highlighted in order, and this process is repeated until there no more layers of child nodes left to highlight.
</p>
</div>
</main>
</body>
</html>