treevis/index.html at master · kasrak/treevis · GitHub

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
<!doctype html>
<html>
    <head>
        <title>Tree Algorithm Visualizer</title>
        <script src="build/main.bundle.js"></script>
    </head>
    <body>
        <div class="loading"
            style="position: absolute; background: #eee;
            top: 0; bottom: 0; left: 0; right: 0; text-align: center;
            color: #555; z-index: 999; font: 14pt sans-serif">
            Loading...
        </div>

        <div class="toolbar">
            <button id="run-button" data-bind="click: run">
                Run
            </button>
            <span data-bind="visible: didRun">
                <button id="step-button" data-bind="click: stepPrev">
                    Prev
                </button>
                <button id="step-button" data-bind="click: stepNext">
                    Next
                </button>
                <span class="step-slider">
                    <input type="range" data-bind="value: curStep, attr: { min: 1, max: numSteps }">
                </span>
                <span class="step-label">
                    Step <span data-bind="text: curStep"></span>
                    of <span data-bind="text: numSteps"></span>
                </span>
            </span>
        </div>

        <div class="editor-container">
<textarea id="code-editor">
/************************************************

Hello! This is a playground for binary trees.

Write JavaScript here, then click the "Run" button
to step through your code. On the right hand side,
you'll see any trees that are in scope.

For it to work, you must build your trees using
the provided TreeNode constructor. You can also
use the convenience buildTree function. See the
code below for usage.

Note: this is an alpha version, and a lot of things
don't work. Notably, only one binary tree at a time
will be displayed.

The code is on GitHub:
http://github.com/kasrak/treevis

************************************************/

function binarySearch(node, value) {
  if (!node || node.value == value) {
    return node;
  } else if (node.value < value) {
    return binarySearch(node.right, value);
  } else {
    return binarySearch(node.left, value);
  }
}

function addNode(tree, value) {
  if (!tree) {
    return TreeNode(value);
  } else if (tree.value &lt; value) {
    tree.right = addNode(tree.right, value);
  } else {
    tree.left = addNode(tree.left, value);
  }

  return tree;
}

var root = buildTree([10, [5, [2], [7]],
                          [18, [17], [87]]]);

root = addNode(root, 75);
binarySearch(root, 75);
</textarea>
        </div>

        <div class="tree-container" id="tree-container">
        </div>
    </body>
</html>