Hugging Face's logo

Spaces:
wanwanlin0521
/
D3_Assignment
Running

App Files Community
wanwanlin0521 commited on
Commit
80022b7
·
verified ·
1 Parent(s): 4495766

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +438 -18
index.html CHANGED
@@ -1,19 +1,439 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Password Trends 2020: A Global and U.S. Perspective</title>
6
+ <script src="https://d3js.org/d3.v7.min.js"></script>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.5.1/d3-annotation.min.js"></script>
8
+ <style>
9
+ body {
10
+ font-family: Helvetica;
11
+ text-align: center;
12
+ }
13
+ svg {
14
+ margin: 20px;
15
+ border: 1px solid black;
16
+ }
17
+ .button {
18
+ margin: 10px;
19
+ padding: 10px 20px;
20
+ font-size: 16px;
21
+ cursor: pointer;
22
+ }
23
+ .tooltip {
24
+ position: absolute;
25
+ background: #333333;
26
+ color: white;
27
+ padding: 5px;
28
+ font-size: 12px;
29
+ pointer-events: none;
30
+ }
31
+ .axis .domain {
32
+ stroke: black;
33
+ }
34
+ .median-line {
35
+ stroke: black;
36
+ stroke-width: 2;
37
+ }
38
+ .whisker {
39
+ stroke: black;
40
+ stroke-width: 2;
41
+ }
42
+ .outlier {
43
+ fill: rgb(117, 55, 13);
44
+ }
45
+ .scene-title {
46
+ font-size: 20px;
47
+ text-anchor: middle;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body>
52
+ <h1>Password Trends in 2020: A Global and U.S. Perspective</h1>
53
+ <svg width="1000" height="600"></svg>
54
+ <div>
55
+ <button id="prevButton" class="button" style="display: none;">Previous</button>
56
+ <button id="nextButton" class="button">Next</button>
57
+ </div>
58
+ <script>
59
+
60
+ // Set up some parameters.
61
+ var curr_scene = 1;
62
+ var margin = { top: 50, right: 100, bottom: 120, left: 100 };
63
+ var width = 1000 - margin.left - margin.right;
64
+ var height = 600 - margin.top - margin.bottom;
65
+
66
+ // Set up svg.
67
+ var svg = d3.select("svg").append("g").attr("transform", `translate(${margin.left},${margin.top})`);
68
+
69
+ // Set up color scale for consistent password colors.
70
+ var tot_passwords = new Set();
71
+ var color_scale;
72
+
73
+ // Create the helper functions for cleaning the scene.
74
+ // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-selection-remove-function/
75
+ function delete_scene() {
76
+ svg.selectAll("*").remove();
77
+ }
78
+
79
+ // Set up tooltip and create functions for handling tooltip.
80
+ // Method comes from: https://d3-graph-gallery.com/graph/interactivity_tooltip.html
81
+ // Method comes from: https://d3js.org/d3-transition
82
+ var tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);
83
+
84
+ function handle_tooltip(event, d, content) {
85
+ tooltip.transition().duration(200).style("opacity", 0.9);
86
+ tooltip.html(content).style("left", (event.pageX + 5) + "px").style("top", (event.pageY - 28) + "px");
87
+ }
88
+
89
+ function hide_tooltip() {
90
+ tooltip.transition().duration(500).style("opacity", 0);
91
+ }
92
+
93
+ // Set up buttons and create function to keep buttons to appear at the right scene.
94
+ // Method comes from: https://d3-graph-gallery.com/graph/interactivity_button.html
95
+ var next_button = d3.select("#nextButton");
96
+ var previous_button = d3.select("#prevButton");
97
+
98
+ function update_button() {
99
+ previous_button.style("display", curr_scene === 1 ? "none" : "inline");
100
+ next_button.style("display", curr_scene === 6 ? "none" : "inline");
101
+ }
102
+
103
+ // Load data.
104
+ d3.csv("https://raw.githubusercontent.com/MainakRepositor/Datasets/master/top_200_password_2020_by_country.csv")
105
+ .then(function(data) {
106
+ // Populate all passwords.
107
+ data.forEach(d => tot_passwords.add(d.Password));
108
+ color_scale = d3.scaleOrdinal().domain([...tot_passwords]).range(d3.schemePaired);
109
+
110
+ // Aggregate "Global" data.
111
+ var password_counts = d3.rollup(
112
+ data, v => d3.sum(v, d => parseInt(d.User_count) || 0), d => d.Password
113
+ );
114
+ var global_data = Array.from(password_counts, ([password, count]) => ({
115
+ password,
116
+ count,
117
+ rank: 0
118
+ }))
119
+ .filter(d => !isNaN(d.count) && d.count > 0)
120
+ .sort((a, b) => b.count - a.count).slice(0, 20)
121
+ .map((d, i) => ({
122
+ password: d.password,
123
+ rank: i + 1,
124
+ count: d.count
125
+ }));
126
+
127
+ // Parse data for countries that have top 4 population around the world.
128
+ var countries = ["India", "China", "United States", "Indonesia"];
129
+ var country_data = {};
130
+
131
+ countries.forEach(country => {
132
+ country_data[country] = data
133
+ .filter(d => d.country === country && !isNaN(parseInt(d.User_count)))
134
+ .map(d => ({
135
+ password: d.Password, rank: parseInt(d.Rank), count: parseInt(d.User_count) || 0
136
+ })).sort((a, b) => a.rank - b.rank).slice(0, 20);
137
+ });
138
+
139
+ // Parse USA data for the rest scenes.
140
+ var usa_data = data
141
+ .filter(d => d.country === "United States" && !isNaN(parseInt(d.User_count)) && !isNaN(parseFloat(d.Time_to_crack_in_seconds)))
142
+ .map(d => ({
143
+ password: d.Password,
144
+ rank: parseInt(d.Rank),
145
+ count: parseInt(d.User_count) || 0, time_to_crack: parseFloat(d.Time_to_crack_in_seconds) || 0
146
+ }));
147
+
148
+ // Scene 1: Global Top 20 Passwords.
149
+ function create_scene1() {
150
+ delete_scene();
151
+
152
+ svg.append("text").attr("x", width / 2).attr("y", -20).attr("class", "scene-title").text("Top 20 Passwords Worldwide");
153
+
154
+ var x_scale = d3.scaleBand().domain(global_data.map(d => d.password)).range([0, width]).padding(0.05);
155
+ var y_scale = d3.scaleLinear().domain([0, d3.max(global_data, d => d.count) || 1]).range([height, 0]);
156
+
157
+ // Create the bar chart.
158
+ svg.selectAll(".bar").data(global_data).enter().append("rect").attr("class", "bar")
159
+ .attr("x", d => x_scale(d.password)).attr("y", d => y_scale(d.count))
160
+ .attr("width", x_scale.bandwidth()).attr("height", d => height - y_scale(d.count))
161
+ .attr("fill", d => color_scale(d.password))
162
+ .on("mouseover", function(event, d) {
163
+ handle_tooltip(event, d, `Password: ${d.password}<br>Rank: ${d.rank}<br>Count: ${d.count}`);
164
+ })
165
+ .on("mouseout", hide_tooltip);
166
+
167
+ svg.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x_scale)).selectAll("text").style("text-anchor", "end")
168
+ .attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-45)");
169
+
170
+ svg.append("g").call(d3.axisLeft(y_scale).ticks(5)).append("text").attr("x", -height / 2).attr("y", -60)
171
+ .attr("transform", "rotate(-90)").attr("fill", "black").style("text-anchor", "middle").text("Count");
172
+
173
+ update_button();
174
+ }
175
+
176
+ // Scene 2: Top 20 Passwords for India, China, USA, Indonesia
177
+ function create_scene2() {
178
+ delete_scene();
179
+
180
+ svg.append("text").attr("x", width / 2).attr("y", -20).attr("class", "scene-title").text("Top 20 Passwords in Countries that Have Top 4 Population in the World");
181
+
182
+ // Set up some parameters for bar charts.
183
+ var countries = ["India", "China", "United States", "Indonesia"];
184
+ var plot_width = width * 0.4;
185
+ var plot_height = height * 0.4;
186
+ var padding = 50;
187
+ var positions = [
188
+ { x: (width - 2 * plot_width - padding) / 2, y: 20 }, // India
189
+ { x: (width - 2 * plot_width - padding) / 2 + plot_width + padding, y: 20 }, // China
190
+ { x: (width - 2 * plot_width - padding) / 2, y: 20 + plot_height + padding }, // USA
191
+ { x: (width - 2 * plot_width - padding) / 2 + plot_width + padding, y: 20 + plot_height + padding } // Indonesia
192
+ ];
193
+
194
+ countries.forEach((country, i) => {
195
+ var g = svg.append("g").attr("transform", `translate(${positions[i].x},${positions[i].y})`);
196
+
197
+ var x_scale = d3.scaleBand().domain(country_data[country].map(d => d.password)).range([0, plot_width]).padding(0.05);
198
+ var y_scale = d3.scaleLinear().domain([0, d3.max(country_data[country], d => d.count) || 1]).range([plot_height - 30, 0]);
199
+
200
+ // Create the bar charts.
201
+ g.selectAll(".bar").data(country_data[country]).enter().append("rect").attr("class", "bar")
202
+ .attr("x", d => x_scale(d.password)).attr("y", d => y_scale(d.count))
203
+ .attr("width", x_scale.bandwidth()).attr("height", d => (plot_height - 30) - y_scale(d.count)).attr("fill", d => color_scale(d.password))
204
+
205
+ g.append("g").attr("transform", `translate(0,${plot_height - 30})`).call(d3.axisBottom(x_scale)).selectAll("text").style("text-anchor", "end")
206
+ .attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-45)").style("font-size", "8px");
207
+
208
+ g.append("g").call(d3.axisLeft(y_scale).ticks(3)).selectAll("text").style("font-size", "8px");
209
+
210
+ g.append("text").attr("x", plot_width / 2).attr("y", -10).attr("text-anchor", "middle").style("font-size", "12px").text(country);
211
+
212
+ // Circle USA out.
213
+ if (country === "United States") {
214
+ g.append("rect").attr("x", -50).attr("y", -25).attr("width", plot_width + 55).attr("height", plot_height + 40)
215
+ .attr("fill", "none").attr("stroke", "red").attr("stroke-width", 1.5);
216
+
217
+ // Create annotation.
218
+ // Method comes from: https://d3-annotation.susielu.com/
219
+ var annotations = [{
220
+ note: { label: "Since we are in the USA, we will focus more on it!" },
221
+ x: plot_width / 2.5,
222
+ y: plot_height + 10,
223
+ dy: 60,
224
+ dx: 10
225
+ }];
226
+
227
+ g.append("g").attr("class", "annotation-text").style("font-size", "10px").call(d3.annotation().annotations(annotations));
228
+ }
229
+ });
230
+
231
+ update_button();
232
+ }
233
+
234
+ // Scene 3: U.S. Top 20 Passwords
235
+ function create_scene3() {
236
+ delete_scene();
237
+
238
+ svg.append("text").attr("x", width / 2).attr("y", -20).attr("class", "scene-title").text("Top 20 Passwords in the U.S.");
239
+
240
+ var x_scale = d3.scaleBand().domain(usa_data.slice(0, 20).map(d => d.password)).range([0, width]).padding(0.05);
241
+ var y_scale = d3.scaleLinear().domain([0, d3.max(usa_data.slice(0, 20), d => d.count)]).range([height, 0]);
242
+
243
+ // Create the bar chart.
244
+ svg.selectAll(".bar").data(usa_data.slice(0, 20)).enter().append("rect").attr("class", "bar")
245
+ .attr("x", d => x_scale(d.password)).attr("y", d => y_scale(d.count))
246
+ .attr("width", x_scale.bandwidth()).attr("height", d => height - y_scale(d.count)).attr("fill", d => color_scale(d.password))
247
+ .on("mouseover", function(event, d) {
248
+ handle_tooltip(event, d, `Password: ${d.password}<br>Rank: ${d.rank}<br>Count: ${d.count}<br>Time to Crack: ${d.time_to_crack}s`);
249
+ })
250
+ .on("mouseout", hide_tooltip);
251
+
252
+ svg.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x_scale)).selectAll("text").style("text-anchor", "end")
253
+ .attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-45)");
254
+
255
+ svg.append("g").call(d3.axisLeft(y_scale).ticks(5)).append("text").attr("x", -height / 2).attr("y", -60)
256
+ .attr("transform", "rotate(-90)").attr("fill", "black").style("text-anchor", "middle").text("Count");
257
+
258
+ update_button();
259
+ }
260
+
261
+ // Scene 4: U.S. Password Crack Times Scatter Plot
262
+ function create_scene4() {
263
+ delete_scene();
264
+
265
+ svg.append("text").attr("x", width / 2).attr("y", -20).attr("class", "scene-title").text("Time to Crack for All U.S. Passwords");
266
+
267
+ var x_scale = d3.scaleBand().domain(usa_data.map(d => d.password)).range([0, width]).padding(0.05);
268
+ var y_scale = d3.scaleLinear().domain([0, d3.max(usa_data, d => d.time_to_crack)]).range([height, 0]);
269
+
270
+ // Create scatter plot.
271
+ svg.selectAll(".dot").data(usa_data).enter().append("circle").attr("class", "dot")
272
+ .attr("cx", d => x_scale(d.password) + x_scale.bandwidth() / 2).attr("cy", d => y_scale(d.time_to_crack))
273
+ .attr("r", 3).attr("fill", d => color_scale(d.password))
274
+ .on("mouseover", function(event, d) {
275
+ handle_tooltip(event, d, `Password: ${d.password}<br>Rank: ${d.rank}<br>Time to Crack: ${d.time_to_crack}s`);
276
+ })
277
+ .on("mouseout", hide_tooltip);
278
+
279
+ svg.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x_scale)).selectAll("text").style("text-anchor", "end")
280
+ .attr("dx", "-1.4em").attr("dy", "-0.6em").attr("transform", "rotate(-45)").style("font-size", "3px");
281
+
282
+ svg.append("g").call(d3.axisLeft(y_scale).ticks(5)).append("text").attr("x", -height / 2).attr("y", -60)
283
+ .attr("transform", "rotate(-90)").attr("fill", "black").style("text-anchor", "middle").text("Time to Crack (S)");
284
+
285
+ // Create annotation.
286
+ // Method comes from: https://d3-annotation.susielu.com/
287
+ var annotations = [{
288
+ note: { label: "Relatively strong password!" },
289
+ x: x_scale("snowflake") + x_scale.bandwidth() / 2,
290
+ y: y_scale(usa_data.find(d => d.password === "snowflake")?.time_to_crack || 0),
291
+ dy: 50,
292
+ dx: 25
293
+ }];
294
+
295
+ svg.append("g").attr("class", "annotation-text").call(d3.annotation().annotations(annotations));
296
+
297
+ update_button();
298
+ }
299
+
300
+ // Scene 5: U.S. Password Crack Times Box Plot
301
+ function create_scene5() {
302
+ delete_scene();
303
+
304
+ svg.append("text").attr("x", width / 2).attr("y", -20).attr("class", "scene-title").text("Distribution of Time to Crack for U.S. Passwords");
305
+
306
+ // Set up some parameters for box plot.
307
+ // Method comes from: https://d3-graph-gallery.com/graph/boxplot_basic.html
308
+ var times = usa_data.map(d => d.time_to_crack).sort(d3.ascending);
309
+ var q1 = d3.quantile(times, 0.25);
310
+ var median = d3.quantile(times, 0.5);
311
+ var q3 = d3.quantile(times, 0.75);
312
+ var iqr = q3 - q1;
313
+ var lower_whisker = Math.max(d3.min(times), q1 - 1.5 * iqr);
314
+ var upper_whisker = Math.min(d3.max(times), q3 + 1.5 * iqr);
315
+ var outliers = times.filter(t => t < lower_whisker || t > upper_whisker);
316
+
317
+ var y_scale = d3.scaleLinear().domain([0, d3.max([upper_whisker, ...outliers]) * 1.1]).range([height, 0]);
318
+ var x_scale = d3.scaleBand().domain(["U.S. Passwords"]).range([0, 3 * width / 4]).padding(0.1);
319
+
320
+ var boxWidth = x_scale.bandwidth();
321
+
322
+ // Create box plot.
323
+ svg.append("rect").attr("class", "box").attr("x", x_scale("U.S. Passwords")).attr("y", y_scale(q3))
324
+ .attr("width", boxWidth).attr("height", y_scale(q1) - y_scale(q3));
325
+
326
+ svg.append("line").attr("class", "median-line").attr("x1", x_scale("U.S. Passwords")).attr("x2", x_scale("U.S. Passwords") + boxWidth)
327
+ .attr("y1", y_scale(median)).attr("y2", y_scale(median));
328
+
329
+ svg.append("line").attr("class", "whisker").attr("x1", x_scale("U.S. Passwords") + boxWidth / 2).attr("x2", x_scale("U.S. Passwords") + boxWidth / 2)
330
+ .attr("y1", y_scale(lower_whisker)).attr("y2", y_scale(q1));
331
+
332
+ svg.append("line").attr("class", "whisker").attr("x1", x_scale("U.S. Passwords") + boxWidth / 2).attr("x2", x_scale("U.S. Passwords") + boxWidth / 2)
333
+ .attr("y1", y_scale(q3)).attr("y2", y_scale(upper_whisker));
334
+
335
+ svg.append("line").attr("class", "whisker").attr("x1", x_scale("U.S. Passwords")).attr("x2", x_scale("U.S. Passwords") + boxWidth)
336
+ .attr("y1", y_scale(lower_whisker)).attr("y2", y_scale(lower_whisker));
337
+
338
+ svg.append("line").attr("class", "whisker").attr("x1", x_scale("U.S. Passwords")).attr("x2", x_scale("U.S. Passwords") + boxWidth)
339
+ .attr("y1", y_scale(upper_whisker)).attr("y2", y_scale(upper_whisker));
340
+
341
+ svg.selectAll(".outlier").data(outliers).enter().append("circle").attr("class", "outlier")
342
+ .attr("cx", x_scale("U.S. Passwords") + boxWidth / 2).attr("cy", d => y_scale(d))
343
+ .attr("r", 3)
344
+ .on("mouseover", function(event, d) {
345
+ handle_tooltip(event, d, `Time to Crack: ${d}s`);
346
+ })
347
+ .on("mouseout", hide_tooltip);
348
+
349
+ svg.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x_scale))
350
+
351
+ svg.append("g").call(d3.axisLeft(y_scale).ticks(5)).append("text").attr("x", -height / 2).attr("y", -60)
352
+ .attr("transform", "rotate(-90)").attr("fill", "black").style("text-anchor", "middle").text("Time to Crack(Seconds)");
353
+
354
+ // Create annotation.
355
+ // Method comes from: https://d3-annotation.susielu.com/
356
+ var annotations = [{
357
+ note: { label: "Median crack time", title: `${median.toFixed(2)}s` },
358
+ x: x_scale("U.S. Passwords") + boxWidth / 2,
359
+ y: y_scale(median),
360
+ dy: -50,
361
+ dx: 75
362
+ }];
363
+
364
+ svg.append("g").attr("class", "annotation-text").call(d3.annotation().annotations(annotations));
365
+
366
+ update_button();
367
+ }
368
+
369
+ // Scene 6: Conclusions and Exploration
370
+ function create_scene6() {
371
+ delete_scene();
372
+
373
+ svg.append("text").attr("x", width / 2).attr("y", -20).attr("class", "scene-title").text("Some Conclusions");
374
+
375
+ svg.append("text").attr("x", width / 2).attr("y", 50).attr("text-anchor", "middle").style("font-size", "16px")
376
+ .text("1. Most passwords can be cracked in seconds which will pose security risks.");
377
+
378
+ svg.append("text").attr("x", width / 2).attr("y", 80).attr("text-anchor", "middle").style("font-size", "16px")
379
+ .text("2. Weak passwords like '123456' dominate globally and in the U.S.");
380
+
381
+ svg.append("text").attr("x", width / 2).attr("y", 110).attr("text-anchor", "middle").style("font-size", "16px")
382
+ .text("3. The top 5 passwords in the U.S. are '123456', 'password', '12345', '123456789', and 'password1'.");
383
+
384
+ svg.append("text").attr("x", width / 2).attr("y", 380).attr("text-anchor", "middle").style("font-size", "16px")
385
+ .text("4. If you really want to use these popular passwords, try to put them into combinations to reduce security risk.");
386
+
387
+ var x_scale = d3.scaleBand().domain(usa_data.slice(0, 5).map(d => d.password)).range([0, width / 2]).padding(0.05);
388
+ var y_scale = d3.scaleLinear().domain([0, d3.max(usa_data.slice(0, 5), d => d.count)]).range([height - 150, 150]);
389
+ var new_svg = svg.append("g").attr("transform", `translate(${(width - (width / 2)) / 2}, 0)`);
390
+
391
+ new_svg.selectAll(".bar").data(usa_data.slice(0, 5)).enter().append("rect").attr("class", "bar")
392
+ .attr("x", d => x_scale(d.password)).attr("y", d => y_scale(d.count))
393
+ .attr("width", x_scale.bandwidth()).attr("height", d => (height - 150) - y_scale(d.count)).attr("fill", d => color_scale(d.password))
394
+ .on("mouseover", function(event, d) {
395
+ handle_tooltip(event, d, `Password: ${d.password}<br>Rank: ${d.rank}<br>Frequency: ${d.count}<br>Time to Crack: ${d.time_to_crack}s`);
396
+ })
397
+ .on("mouseout", hide_tooltip);
398
+
399
+ var x_axis = d3.axisBottom(x_scale);
400
+ var y_axis = d3.axisLeft(y_scale).ticks(5);
401
+
402
+ new_svg.append("g").attr("transform", `translate(0,${y_scale(0)})`).call(x_axis).selectAll("text").style("text-anchor", "end")
403
+ .attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-45)");
404
+
405
+ new_svg.append("g").call(y_axis).append("text").attr("x", -height / 2).attr("y", -60).attr("transform", "rotate(-90)").attr("fill", "black")
406
+ .style("text-anchor", "middle").text("Count");
407
+
408
+ update_button();
409
+ }
410
+
411
+ // Triggers when clicking the buttons.
412
+ next_button.on("click", function() {
413
+ if (curr_scene < 6) {
414
+ curr_scene++;
415
+ if (curr_scene === 2) create_scene2();
416
+ else if (curr_scene === 3) create_scene3();
417
+ else if (curr_scene === 4) create_scene4();
418
+ else if (curr_scene === 5) create_scene5();
419
+ else if (curr_scene === 6) create_scene6();
420
+ }
421
+ });
422
+
423
+ previous_button.on("click", function() {
424
+ if (curr_scene > 1) {
425
+ curr_scene--;
426
+ if (curr_scene === 1) create_scene1();
427
+ else if (curr_scene === 2) create_scene2();
428
+ else if (curr_scene === 3) create_scene3();
429
+ else if (curr_scene === 4) create_scene4();
430
+ else if (curr_scene === 5) create_scene5();
431
+ }
432
+ });
433
+
434
+ // Initialize the first scene.
435
+ create_scene1();
436
+ })
437
+ </script>
438
+ </body>
439
  </html>