RedT4nK.github.io/bPlusTree.html at main · RedT4nk/RedT4nK.github.io · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>B+ Tree Visualization</title>
  <link rel="stylesheet" href="style.css"/>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
  <div class="nav-back">
    <a href="index.html">← Back to Index</a>
  </div>

  <div class="settingBox">
    <!-- Maybe no "speed" if not needed, or keep it if you want animations -->
    Animation Speed (1-5):
    <input
      type="number"
      value="2"
      placeholder="1-5"
      max="5" min="1"
      id="speedBtn"
      onchange="speedChange()"
    />
  </div>

  <div class="layout d-flex">
    <div class="binaryBox">
      <h1>B+ Tree Visualization</h1>

      <!-- Area to display the B+ Tree structure. Could be a simple HTML container
           or a canvas (if you want to draw lines/nodes). -->
      <div id="bPlusTreeContainer" style="border:1px solid #333; min-height:200px; padding:10px;">
        <!-- The JS will dynamically update this or draw on it. -->
      </div>

      <div class="d-flex mt-3">
        <!-- For demonstration, maybe we insert one key at a time. -->
        <p class="p-3">Insert Key:</p>
        <input type="number" id="bplusKey"/>
        <button onclick="insertKey()" class="ml-3">Insert</button>
      </div>

      <div class="d-flex mt-3">
        <!-- Searching in B+Tree -->
        <p class="p-3">Search Key:</p>
        <input type="number" id="searchKey"/>
        <button onclick="searchKey()" class="ml-3">Search</button>
        <p class="p-3">Result:</p>
        <span class="p-3" id="searchResult"></span>
      </div>

      <div class="mt-3">
        <button id="showBtnBPlus">Concept of B+ Tree</button>
      </div>
      <div class="mt-3" id="bplusContent" style="display:none;">
        <!-- Explanation / theory -->
        <p>
          <strong>B+ Tree</strong> is a type of multi-level index tree commonly used in databases
          and filesystems. All values (records) are stored in the leaf nodes in a linked manner,
          while internal nodes act as guides. The branching factor determines how many children
          each node can have, allowing very efficient range queries and disk-based access.
        </p>
      </div>
    </div>

    <!-- Show pseudocode or a simplified code snippet for B+ Tree insert / search. -->
    <div>
      <div class="codeBox">
        <div class="code">// B+ Tree Insert (simplified pseudocode)</div>
        <div class="code">function insert(node, key) {</div>
        <div class="code tab-1">// 1. Find correct leaf node</div>
        <div class="code tab-1">// 2. Insert key into leaf</div>
        <div class="code tab-1">// 3. If overflow, split and propagate up</div>
        <div class="code">}</div>

        <div class="code mt-3">// B+ Tree Search (simplified pseudocode)</div>
        <div class="code">function search(node, key) {</div>
        <div class="code tab-1">// 1. Traverse internal nodes to find leaf</div>
        <div class="code tab-1">// 2. Check leaf for key</div>
        <div class="code">}</div>
      </div>
    </div>
  </div>

  <script src="js/bPlusTree.js"></script>
</body>
</html>