-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
102 lines (99 loc) · 3.48 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Example BloomJS</title>
<style type="text/css">
.floater {
float: left;
}
.floatBreak {
clear: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="stitched.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var filters = require("BloomFilter");
var sections = [
{
filter: new filters.BloomFilter(),
name: 'Bloom Filter',
id: 'bloom'
},
{
filter: new filters.StrictBloomFilter(),
name: 'Strict Bloom Filter',
id: 'strictbloom'
},
{
filter: new filters.ScalableBloomFilter(),
name: 'Scalable Bloom Filter',
id: 'scalablebloom'
},
];
$(function() {
// setup the UI for each section, and their filter
$.each(sections, function(i,v) {
$('#filters').append($('#filterUItemplate').html());
$('#filters .filterUI').attr('id',v.id);
$('#'+ v.id).addClass('floatBreak');
$('#'+ v.id).removeClass('filterUI');
$('#'+ v.id +' .filterDesc').text(v.name +": ");
});
// for each button, create 'add 100 keys' functionality:
$('#filters button').click(function () {
// get the id of the particular div.
var myid = $(this).parent().attr('id');
$.each(sections, function(i,v) {
if (v.id === myid) {
// If this section matches the id that the user clicked on, add
// keys and check if there are any false positives in the bloom
// fiter.
var start = v.filter.count;
for (var i=start;i<start+100;i++) {
v.filter.add("key-"+i);
}
// Check for false positives: note that as the size of the bloom
// filters grows the time it takes to check all the filters grows
// O(n) operation. Note that adding a key (and not checking) is an
// O(1) operation!
var falsePositive = 0;
for (var i=0;i<v.filter.count;i++) {
if (v.filter.has("nokey-"+ i)) {
falsePositive = falsePositive + 1;
console.log("["+ v.name +"] False Positive: nokey-"+ i);
}
}
// show the count and false positive rate:
$('#'+ v.id +' .filterCount').text(" Count: "+ v.filter.count +" False Positives: "+ falsePositive);
}
});
});
})
</script>
</head>
<body>
<p>
Here is an example of the three types of bloom filter. Click the buttons to
add 100 keys to a particular bloom filter.
</p>
<p>
Each filter is set to an initial capacity of of 100 keys. As you add more
keys the simpler bloom filters one would expect to start seeing some false
positives, while the scalable bloom filter should maintain a very low error
rate.
</p>
<hr/>
<div id="filters"></div>
<hr/>
<div id="filterUItemplate" style="visibility: hidden;">
<div class="filterUI">
<div class="filterDesc floater">Description</div>
<button class="button floater">Add 100 Keys</button>
<div class="filterCount floater"></div>
</div>
<br/>
</div>
</body>
</html>