-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
118 lines (109 loc) · 7.69 KB
/
Copy pathindex.html
File metadata and controls
118 lines (109 loc) · 7.69 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
<!DOCTYPE html>
<html>
<head>
<title>My B+ Tree Visualization</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="working.js"></script>
</head>
<body>
<div id="bodyTitle" class="content">
<h1>B+ Tree Visualization<br><br>
<font size="3px"><p>This page visualizes the methods of a B+ Tree, based on the algorithms from the book<br>
<i>Database System Concepts, 7<sup> th</sup> Edition</i> by Avi Silberschatz, Henry F. Korth and S. Sudarshan,
published by McGraw-Hill</p></font>
</h1>
<p align="center"> Scroll down for more! <div class="arrow arrow-first"></div>
<div class="arrow arrow-second"></div></p>
</div>
<div id="bodyMain" class="content">
<div id="info">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><p class="left"><i><font size="4px">What is a B+ Tree?</font></i><br><br>
A B+ Tree is a self-balancing, ordered tree data structure that allows searches, sequential access, insertions and deletions in O(logn). In a B+
Tree, data pointers are stored only at the leaf nodes of the tree, resulting in a very high fanout (number of pointers to child nodes in a node,
typically on the order of 100 or more), which reduces the number of I/O operations required to find an element in the tree.</p><br><br>
<p class="more"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20240217104748/1.png" height="200" width="700"><br>
An example of a B+ Tree</p><br><br>
<p class="rightTitle"><i><font size="4px">Why should I use a B+ Tree?</font></i></p>
<p class="right">A B+ Tree is an
optimal selection for systems that read and write large blocks of data, e.x. filesystems, since it automatically reorganizes itself with small,
local changes in the face of insertions and deletions, while reorganization of the entire file is not required in order to maintain performance.
In a B+ Tree file organization, leaf nodes store records instead of pointers. This type of file organization helps keep data records clustered
even when there are insertions, deletions or updates.</p><br><br>
<p class="more"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20230623132658/ezgifcom-gif-maker-(14)-768.webp" height="320" width="670"><br>
How a disk saves data from a file using a B+ Tree</p><br><br>
<p class="more">For more information, you can visit
<a href="https://www.geeksforgeeks.org/introduction-of-b-tree/" target="_blank"><i>this site</i></a>.</p><br>
<font size="1"><sup>*</sup>The images above were used from <a href="https://www.geeksforgeeks.org/introduction-of-b-tree/" target="_blank">
<i>this site</i></a>. </font><br><br><br><br><br><br><br><br>
</div>
<div id="controls">
<p align="center">
Here, this visualization can not only help you understand but also test the basic operations(insert, delete and find value or range of values) of a B+ Tree.
</p><br><br>
<table id="controlsTable" cellpadding="6" cellspacing="2">
<tr>
<td colspan="3">
<form id="inputType">
Are the values in the B+ Tree numbers or characters?
<input type="radio" name="valueType" value="C" id="Char" checked="checked">Characters
<input type="radio" name="valueType" value="N" id="Num">Numbers
</form>
<form id="maxDegree">
Maximum Degree of the B+ Tree:
<input type="radio" name="degree" value="3" id="degree3" checked="checked">3
<input type="radio" name="degree" value="4" id="degree4">4
<input type="radio" name="degree" value="5" id="degree5">5
<input type="radio" name="degree" value="6" id="degree6">6
<input type="radio" name="degree" value="7" id="degree7">7
</form>
</td>
</tr>
<tr>
<td>
<input type="text" size="4" id="insertInput">
<button id="insertButton">Insert Value</button>
</td>
<td>
<input type="text" size="4" id="deleteInput">
<button type="button" id="deleteButton">Delete Value</button>
</td>
<td>
<input type="text" size="4" id="findInput">
<button type="button" id="findButton">Find Value</button>
</td>
<td>
Range from: <input type="text" size="4" id="findInputRangeLower"> to: <input type="text" size="4" id="findInputRangeUpper">
<button type="button" id="findRangeButton">Find Range</button>
</td>
<td>
<button type="button" id="clearButton">Clear Tree</button>
</td>
</tr>
</table>
</div><br>
<div id="canvas">
<span>The B+ Tree elements will be depicted here!</span>
</div><br><br>
<script type="text/javascript" src="events.js"></script>
</div>
<footer>
<p>
<br><br><br><font size="3">Made by: <i>Vasilis Kiouris</i> ,
Undergraduate Student at the School of Applied Mathematics and Physical Sciences (<a href="http://semfe.ntua.gr/el/" target="_blank"><i>SAMPS</i></a>)
of the National Technical University of Athens (<a href="https://www.ntua.gr/el/" target="_blank"><i>NTUA</i></a>)<br>
Find me at:
</font>
<ul>
<p class="pfooter">
<span><i class="fa fa-github" ></i>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbqj9Ii13d6hx5a9kyLnC5A8A96LDSaSZv_w&s" width="20px" height="20px" align="center">
Github : <a href="https://github.com/vkiou?tab=repositories" target="_blank">vkiou</a>
<img src="https://cdn-icons-png.flaticon.com/512/281/281769.png" width="20px" height="20px" align="center">
Gmail : <a href="mailto:vkiouris@gmail.com" target="_blank">vkiouris@gmail.com</a></span>
<span><font size="2">© 2024 Vasilis Kiouris, All Rights Reserved.</font></span>
</p>
</ul>
</p>
</footer>
</body>
</html>