-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
86 lines (77 loc) · 3.21 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
<!DOCTYPE html>
<html>
<head>
<title>Safe Cracker: Password Safety</title>
<meta charset="UTF-8" />
<link rel="icon" href="data:;base64,iVBORwOKGO=" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body text-align: center;>
<!-- Add HTML content, SVG drawing area, ... -->
<div class="header">
<h1>
🔒 Safe Cracker: Mapping the Security of the Top 200 Most Used Passwords
per Country
</h1>
<p>
Data is taken from NordVPN's 2021 Report on top 200 Passwords Per
Country And Their Assessment of Time To Crack
</p>
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div id="map-container" class="vis" style="margin: auto;display: block">
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="lightstripe" patternUnits="userSpaceOnUse" width="5" height="5">
<image
xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9J3doaXRlJy8+CiAgPHBhdGggZD0nTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVonIHN0cm9rZT0nIzg4OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg=="
x="0" y="0" width="5" height="5"></image>
</pattern>
</defs>
</svg>
<div id="tooltip"></div>
</div>
<blockquote>
Power Scale is used on "User Count" and "Time to Crack" for the visualizations below in order to highlight the drastic differences between passwords and emphasize the large volume of passwords with low time to crack or high users<Br>
<span>The "Time To Crack" is an estimate based on private cybersecurity research done by NordVPN, <br>
more information can be found
<a href="https://nordpass.com/most-common-passwords-list/" target="_blank">
here
</a></span>
</blockquote>
<div id="div-mid" class="divMid" style="margin: auto;">
<div id="lollipop-container" class="vis">
<div id=displayDataType>
Display Top:
<select id="numberselect">
<option value="50">50</option>
<option value="25">25</option>
<option value="10">10</option>
</select>
</div>
</div>
<div id="boxplot-container" class="vis"></div>
</div>
</div>
<div id="scatterplot-container" class="vis" style="margin: auto;"></div>
<div id="beeswarm-container" class="vis" style="margin: auto;">
<div class="beeswarm-info-container">
<p class="beeswarm-info">
Hover over the chart to highlight a bin, which contains passwords with time to crack within that bin's range. <br><br>
Hover over a dot to see the password it represents, with the time to crack and user count. Dots can be selected.<br><br>
The x-axis denotes the range of the bin, and not the time to crack for each password dot. <br><br>
</p>
</div>
</div>
<!-- D3 bundle -->
<script src="js/d3.v6.min.js"></script>
<!-- Our JS code -->
<script src="js/beeswarm.js"></script>
<script src="js/main.js"></script>
<script src="js/chloroplethMap.js"></script>
<script src="js/lollipop.js"></script>
<script src="js/boxplot.js"></script>
</body>
</html>