Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Password Trends 2020: A Global and U.S. Perspective</title> | |
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.5.1/d3-annotation.min.js"></script> | |
| <style> | |
| body { | |
| font-family: Helvetica; | |
| text-align: center; | |
| } | |
| svg { | |
| margin: 20px; | |
| border: 1px solid black; | |
| } | |
| .button { | |
| margin: 10px; | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| background: #333333; | |
| color: white; | |
| padding: 5px; | |
| font-size: 12px; | |
| pointer-events: none; | |
| } | |
| .axis .domain { | |
| stroke: black; | |
| } | |
| .median-line { | |
| stroke: black; | |
| stroke-width: 2; | |
| } | |
| .whisker { | |
| stroke: black; | |
| stroke-width: 2; | |
| } | |
| .outlier { | |
| fill: rgb(117, 55, 13); | |
| } | |
| .scene-title { | |
| font-size: 20px; | |
| text-anchor: middle; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Password Trends in 2020: A Global and U.S. Perspective</h1> | |
| <svg width="1000" height="600"></svg> | |
| <div> | |
| <button id="prevButton" class="button" style="display: none;">Previous</button> | |
| <button id="nextButton" class="button">Next</button> | |
| </div> | |
| <script> | |
| // Set up some parameters. | |
| var curr_scene = 1; | |
| var margin = { top: 50, right: 100, bottom: 120, left: 100 }; | |
| var width = 1000 - margin.left - margin.right; | |
| var height = 600 - margin.top - margin.bottom; | |
| // Set up svg. | |
| var svg = d3.select("svg").append("g").attr("transform", `translate(${margin.left},${margin.top})`); | |
| // Set up color scale for consistent password colors. | |
| var tot_passwords = new Set(); | |
| var color_scale; | |
| // Create the helper functions for cleaning the scene. | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-selection-remove-function/ | |
| function delete_scene() { | |
| svg.selectAll("*").remove(); | |
| } | |
| // Set up tooltip and create functions for handling tooltip. | |
| // Method comes from: https://d3-graph-gallery.com/graph/interactivity_tooltip.html | |
| // Method comes from: https://d3js.org/d3-transition | |
| var tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0); | |
| function handle_tooltip(event, d, content) { | |
| tooltip.transition().duration(200).style("opacity", 0.9); | |
| tooltip.html(content).style("left", (event.pageX + 5) + "px").style("top", (event.pageY - 28) + "px"); | |
| } | |
| function hide_tooltip() { | |
| tooltip.transition().duration(500).style("opacity", 0); | |
| } | |
| // Set up buttons and create function to keep buttons to appear at the right scene. | |
| // Method comes from: https://d3-graph-gallery.com/graph/interactivity_button.html | |
| var next_button = d3.select("#nextButton"); | |
| var previous_button = d3.select("#prevButton"); | |
| function update_button() { | |
| previous_button.style("display", curr_scene === 1 ? "none" : "inline"); | |
| next_button.style("display", curr_scene === 6 ? "none" : "inline"); | |
| } | |
| // Load data. | |
| d3.csv("https://raw.githubusercontent.com/MainakRepositor/Datasets/master/top_200_password_2020_by_country.csv") | |
| .then(function(data) { | |
| // Populate all passwords. | |
| data.forEach(d => tot_passwords.add(d.Password)); | |
| color_scale = d3.scaleOrdinal().domain([...tot_passwords]).range(d3.schemePaired); | |
| // Aggregate "Global" data. | |
| // Method comes from: https://observablehq.com/@d3/d3-group | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-array-from-method/ | |
| // Method comes from: https://d3js.org/d3-selection/selecting | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-node-sort-function/ | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-d3-map-values-function/ | |
| var password_counts = d3.rollup( | |
| data, v => d3.sum(v, d => parseInt(d.User_count) || 0), d => d.Password | |
| ); | |
| var global_data = Array.from(password_counts, ([password, count]) => ({ | |
| password, | |
| count, | |
| rank: 0 | |
| })) | |
| .filter(d => !isNaN(d.count) && d.count > 0) | |
| .sort((a, b) => b.count - a.count).slice(0, 20) | |
| .map((d, i) => ({ | |
| password: d.password, | |
| rank: i + 1, | |
| count: d.count | |
| })); | |
| // Parse data for countries that have top 4 population around the world. | |
| var countries = ["India", "China", "United States", "Indonesia"]; | |
| var country_data = {}; | |
| // Method comes from: https://d3js.org/d3-selection/selecting | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-d3-map-values-function/ | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-node-sort-function/ | |
| countries.forEach(country => { | |
| country_data[country] = data | |
| .filter(d => d.country === country && !isNaN(parseInt(d.User_count))) | |
| .map(d => ({ | |
| password: d.Password, rank: parseInt(d.Rank), count: parseInt(d.User_count) || 0 | |
| })).sort((a, b) => a.rank - b.rank).slice(0, 20); | |
| }); | |
| // Parse USA data for the rest scenes. | |
| // Method comes from: https://d3js.org/d3-selection/selecting | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-d3-map-values-function/ | |
| var usa_data = data | |
| .filter(d => d.country === "United States" && !isNaN(parseInt(d.User_count)) && !isNaN(parseFloat(d.Time_to_crack_in_seconds))) | |
| .map(d => ({ | |
| password: d.Password, | |
| rank: parseInt(d.Rank), | |
| count: parseInt(d.User_count) || 0, time_to_crack: parseFloat(d.Time_to_crack_in_seconds) || 0 | |
| })); | |
| // Scene 1: Global Top 20 Passwords. | |
| function create_scene1() { | |
| delete_scene(); | |
| svg.append("text").attr("x", width / 2).attr("y", -20).attr("class", "scene-title").text("Top 20 Passwords Worldwide"); | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-d3-map-values-function/ | |
| var x_scale = d3.scaleBand().domain(global_data.map(d => d.password)).range([0, width]).padding(0.05); | |
| var y_scale = d3.scaleLinear().domain([0, d3.max(global_data, d => d.count) || 1]).range([height, 0]); | |
| // Create the bar chart. | |
| svg.selectAll(".bar").data(global_data).enter().append("rect").attr("class", "bar") | |
| .attr("x", d => x_scale(d.password)).attr("y", d => y_scale(d.count)) | |
| .attr("width", x_scale.bandwidth()).attr("height", d => height - y_scale(d.count)) | |
| .attr("fill", d => color_scale(d.password)) | |
| .on("mouseover", function(event, d) { | |
| handle_tooltip(event, d, `Password: ${d.password}<br>Rank: ${d.rank}<br>Count: ${d.count}`); | |
| }) | |
| .on("mouseout", hide_tooltip); | |
| svg.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x_scale)).selectAll("text").style("text-anchor", "end") | |
| .attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-45)"); | |
| svg.append("g").call(d3.axisLeft(y_scale).ticks(5)).append("text").attr("x", -height / 2).attr("y", -60) | |
| .attr("transform", "rotate(-90)").attr("fill", "black").style("text-anchor", "middle").text("Count"); | |
| update_button(); | |
| } | |
| // Scene 2: Top 20 Passwords for India, China, USA, Indonesia | |
| function create_scene2() { | |
| delete_scene(); | |
| 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"); | |
| // Set up some parameters for bar charts. | |
| var countries = ["India", "China", "United States", "Indonesia"]; | |
| var plot_width = width * 0.4; | |
| var plot_height = height * 0.4; | |
| var padding = 50; | |
| var positions = [ | |
| { x: (width - 2 * plot_width - padding) / 2, y: 20 }, // India | |
| { x: (width - 2 * plot_width - padding) / 2 + plot_width + padding, y: 20 }, // China | |
| { x: (width - 2 * plot_width - padding) / 2, y: 20 + plot_height + padding }, // USA | |
| { x: (width - 2 * plot_width - padding) / 2 + plot_width + padding, y: 20 + plot_height + padding } // Indonesia | |
| ]; | |
| countries.forEach((country, i) => { | |
| var g = svg.append("g").attr("transform", `translate(${positions[i].x},${positions[i].y})`); | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-d3-map-values-function/ | |
| var x_scale = d3.scaleBand().domain(country_data[country].map(d => d.password)).range([0, plot_width]).padding(0.05); | |
| var y_scale = d3.scaleLinear().domain([0, d3.max(country_data[country], d => d.count) || 1]).range([plot_height - 30, 0]); | |
| // Create the bar charts. | |
| g.selectAll(".bar").data(country_data[country]).enter().append("rect").attr("class", "bar") | |
| .attr("x", d => x_scale(d.password)).attr("y", d => y_scale(d.count)) | |
| .attr("width", x_scale.bandwidth()).attr("height", d => (plot_height - 30) - y_scale(d.count)).attr("fill", d => color_scale(d.password)) | |
| g.append("g").attr("transform", `translate(0,${plot_height - 30})`).call(d3.axisBottom(x_scale)).selectAll("text").style("text-anchor", "end") | |
| .attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-45)").style("font-size", "8px"); | |
| g.append("g").call(d3.axisLeft(y_scale).ticks(3)).selectAll("text").style("font-size", "8px"); | |
| g.append("text").attr("x", plot_width / 2).attr("y", -10).attr("text-anchor", "middle").style("font-size", "12px").text(country); | |
| // Circle USA out. | |
| if (country === "United States") { | |
| g.append("rect").attr("x", -50).attr("y", -25).attr("width", plot_width + 55).attr("height", plot_height + 40) | |
| .attr("fill", "none").attr("stroke", "red").attr("stroke-width", 1.5); | |
| // Create annotation. | |
| // Method comes from: https://d3-annotation.susielu.com/ | |
| var annotations = [{ | |
| note: { label: "Since we are in the USA, we will focus more on it!" }, | |
| x: plot_width / 2.5, | |
| y: plot_height + 10, | |
| dy: 60, | |
| dx: 10 | |
| }]; | |
| g.append("g").attr("class", "annotation-text").style("font-size", "10px").call(d3.annotation().annotations(annotations)); | |
| } | |
| }); | |
| update_button(); | |
| } | |
| // Scene 3: U.S. Top 20 Passwords | |
| function create_scene3() { | |
| delete_scene(); | |
| svg.append("text").attr("x", width / 2).attr("y", -20).attr("class", "scene-title").text("Top 20 Passwords in the U.S."); | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-d3-map-values-function/ | |
| var x_scale = d3.scaleBand().domain(usa_data.slice(0, 20).map(d => d.password)).range([0, width]).padding(0.05); | |
| var y_scale = d3.scaleLinear().domain([0, d3.max(usa_data.slice(0, 20), d => d.count)]).range([height, 0]); | |
| // Create the bar chart. | |
| svg.selectAll(".bar").data(usa_data.slice(0, 20)).enter().append("rect").attr("class", "bar") | |
| .attr("x", d => x_scale(d.password)).attr("y", d => y_scale(d.count)) | |
| .attr("width", x_scale.bandwidth()).attr("height", d => height - y_scale(d.count)).attr("fill", d => color_scale(d.password)) | |
| .on("mouseover", function(event, d) { | |
| handle_tooltip(event, d, `Password: ${d.password}<br>Rank: ${d.rank}<br>Count: ${d.count}<br>Time to Crack: ${d.time_to_crack}s`); | |
| }) | |
| .on("mouseout", hide_tooltip); | |
| svg.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x_scale)).selectAll("text").style("text-anchor", "end") | |
| .attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-45)"); | |
| svg.append("g").call(d3.axisLeft(y_scale).ticks(5)).append("text").attr("x", -height / 2).attr("y", -60) | |
| .attr("transform", "rotate(-90)").attr("fill", "black").style("text-anchor", "middle").text("Count"); | |
| update_button(); | |
| } | |
| // Scene 4: U.S. Password Crack Times Scatter Plot | |
| function create_scene4() { | |
| delete_scene(); | |
| svg.append("text").attr("x", width / 2).attr("y", -20).attr("class", "scene-title").text("Time to Crack for All U.S. Passwords"); | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-d3-map-values-function/ | |
| var x_scale = d3.scaleBand().domain(usa_data.map(d => d.password)).range([0, width]).padding(0.05); | |
| var y_scale = d3.scaleLinear().domain([0, d3.max(usa_data, d => d.time_to_crack)]).range([height, 0]); | |
| // Create scatter plot. | |
| svg.selectAll(".dot").data(usa_data).enter().append("circle").attr("class", "dot") | |
| .attr("cx", d => x_scale(d.password) + x_scale.bandwidth() / 2).attr("cy", d => y_scale(d.time_to_crack)) | |
| .attr("r", 3).attr("fill", d => color_scale(d.password)) | |
| .on("mouseover", function(event, d) { | |
| handle_tooltip(event, d, `Password: ${d.password}<br>Rank: ${d.rank}<br>Time to Crack: ${d.time_to_crack}s`); | |
| }) | |
| .on("mouseout", hide_tooltip); | |
| svg.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x_scale)).selectAll("text").style("text-anchor", "end") | |
| .attr("dx", "-1.4em").attr("dy", "-0.6em").attr("transform", "rotate(-45)").style("font-size", "3px"); | |
| svg.append("g").call(d3.axisLeft(y_scale).ticks(5)).append("text").attr("x", -height / 2).attr("y", -60) | |
| .attr("transform", "rotate(-90)").attr("fill", "black").style("text-anchor", "middle").text("Time to Crack (S)"); | |
| // Create annotation. | |
| // Method comes from: https://d3-annotation.susielu.com/ | |
| var annotations = [{ | |
| note: { label: "Relatively strong password!" }, | |
| x: x_scale("snowflake") + x_scale.bandwidth() / 2, | |
| y: y_scale(usa_data.find(d => d.password === "snowflake")?.time_to_crack || 0), | |
| dy: 50, | |
| dx: 25 | |
| }]; | |
| svg.append("g").attr("class", "annotation-text").call(d3.annotation().annotations(annotations)); | |
| update_button(); | |
| } | |
| // Scene 5: U.S. Password Crack Times Box Plot | |
| function create_scene5() { | |
| delete_scene(); | |
| svg.append("text").attr("x", width / 2).attr("y", -20).attr("class", "scene-title").text("Distribution of Time to Crack for U.S. Passwords"); | |
| // Set up some parameters for box plot. | |
| // Method comes from: https://d3-graph-gallery.com/graph/boxplot_basic.html | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-d3-map-values-function/ | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-node-sort-function/ | |
| // Method comes from: https://d3js.org/d3-selection/selecting | |
| var times = usa_data.map(d => d.time_to_crack).sort(d3.ascending); | |
| var q1 = d3.quantile(times, 0.25); | |
| var median = d3.quantile(times, 0.5); | |
| var q3 = d3.quantile(times, 0.75); | |
| var iqr = q3 - q1; | |
| var lower_whisker = Math.max(d3.min(times), q1 - 1.5 * iqr); | |
| var upper_whisker = Math.min(d3.max(times), q3 + 1.5 * iqr); | |
| var outliers = times.filter(t => t < lower_whisker || t > upper_whisker); | |
| var y_scale = d3.scaleLinear().domain([0, d3.max([upper_whisker, ...outliers]) * 1.1]).range([height, 0]); | |
| var x_scale = d3.scaleBand().domain(["U.S. Passwords"]).range([0, 3 * width / 4]).padding(0.1); | |
| var boxWidth = x_scale.bandwidth(); | |
| // Create box plot. | |
| svg.append("rect").attr("class", "box").attr("x", x_scale("U.S. Passwords")).attr("y", y_scale(q3)) | |
| .attr("width", boxWidth).attr("height", y_scale(q1) - y_scale(q3)); | |
| svg.append("line").attr("class", "median-line").attr("x1", x_scale("U.S. Passwords")).attr("x2", x_scale("U.S. Passwords") + boxWidth) | |
| .attr("y1", y_scale(median)).attr("y2", y_scale(median)); | |
| svg.append("line").attr("class", "whisker").attr("x1", x_scale("U.S. Passwords") + boxWidth / 2).attr("x2", x_scale("U.S. Passwords") + boxWidth / 2) | |
| .attr("y1", y_scale(lower_whisker)).attr("y2", y_scale(q1)); | |
| svg.append("line").attr("class", "whisker").attr("x1", x_scale("U.S. Passwords") + boxWidth / 2).attr("x2", x_scale("U.S. Passwords") + boxWidth / 2) | |
| .attr("y1", y_scale(q3)).attr("y2", y_scale(upper_whisker)); | |
| svg.append("line").attr("class", "whisker").attr("x1", x_scale("U.S. Passwords")).attr("x2", x_scale("U.S. Passwords") + boxWidth) | |
| .attr("y1", y_scale(lower_whisker)).attr("y2", y_scale(lower_whisker)); | |
| svg.append("line").attr("class", "whisker").attr("x1", x_scale("U.S. Passwords")).attr("x2", x_scale("U.S. Passwords") + boxWidth) | |
| .attr("y1", y_scale(upper_whisker)).attr("y2", y_scale(upper_whisker)); | |
| svg.selectAll(".outlier").data(outliers).enter().append("circle").attr("class", "outlier") | |
| .attr("cx", x_scale("U.S. Passwords") + boxWidth / 2).attr("cy", d => y_scale(d)) | |
| .attr("r", 3) | |
| .on("mouseover", function(event, d) { | |
| handle_tooltip(event, d, `Time to Crack: ${d}s`); | |
| }) | |
| .on("mouseout", hide_tooltip); | |
| svg.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x_scale)) | |
| svg.append("g").call(d3.axisLeft(y_scale).ticks(5)).append("text").attr("x", -height / 2).attr("y", -60) | |
| .attr("transform", "rotate(-90)").attr("fill", "black").style("text-anchor", "middle").text("Time to Crack(Seconds)"); | |
| // Create annotation. | |
| // Method comes from: https://d3-annotation.susielu.com/ | |
| var annotations = [{ | |
| note: { label: "Median crack time", title: `${median.toFixed(2)}s` }, | |
| x: x_scale("U.S. Passwords") + boxWidth / 2, | |
| y: y_scale(median), | |
| dy: -50, | |
| dx: 75 | |
| }]; | |
| svg.append("g").attr("class", "annotation-text").call(d3.annotation().annotations(annotations)); | |
| update_button(); | |
| } | |
| // Scene 6: Conclusions and Exploration | |
| function create_scene6() { | |
| delete_scene(); | |
| svg.append("text").attr("x", width / 2).attr("y", -20).attr("class", "scene-title").text("Some Conclusions"); | |
| svg.append("text").attr("x", width / 2).attr("y", 50).attr("text-anchor", "middle").style("font-size", "16px") | |
| .text("1. Most passwords can be cracked in seconds which will pose security risks."); | |
| svg.append("text").attr("x", width / 2).attr("y", 80).attr("text-anchor", "middle").style("font-size", "16px") | |
| .text("2. Weak passwords like '123456' dominate globally and in the U.S."); | |
| svg.append("text").attr("x", width / 2).attr("y", 110).attr("text-anchor", "middle").style("font-size", "16px") | |
| .text("3. The top 5 passwords in the U.S. are '123456', 'password', '12345', '123456789', and 'password1'."); | |
| svg.append("text").attr("x", width / 2).attr("y", 380).attr("text-anchor", "middle").style("font-size", "16px") | |
| .text("4. If you really want to use these popular passwords, try to put them into combinations to reduce security risk."); | |
| // Method comes from: https://www.geeksforgeeks.org/javascript/d3-js-d3-map-values-function/ | |
| var x_scale = d3.scaleBand().domain(usa_data.slice(0, 5).map(d => d.password)).range([0, width / 2]).padding(0.05); | |
| var y_scale = d3.scaleLinear().domain([0, d3.max(usa_data.slice(0, 5), d => d.count)]).range([height - 150, 150]); | |
| var new_svg = svg.append("g").attr("transform", `translate(${(width - (width / 2)) / 2}, 0)`); | |
| new_svg.selectAll(".bar").data(usa_data.slice(0, 5)).enter().append("rect").attr("class", "bar") | |
| .attr("x", d => x_scale(d.password)).attr("y", d => y_scale(d.count)) | |
| .attr("width", x_scale.bandwidth()).attr("height", d => (height - 150) - y_scale(d.count)).attr("fill", d => color_scale(d.password)) | |
| .on("mouseover", function(event, d) { | |
| handle_tooltip(event, d, `Password: ${d.password}<br>Rank: ${d.rank}<br>Frequency: ${d.count}<br>Time to Crack: ${d.time_to_crack}s`); | |
| }) | |
| .on("mouseout", hide_tooltip); | |
| var x_axis = d3.axisBottom(x_scale); | |
| var y_axis = d3.axisLeft(y_scale).ticks(5); | |
| new_svg.append("g").attr("transform", `translate(0,${y_scale(0)})`).call(x_axis).selectAll("text").style("text-anchor", "end") | |
| .attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-45)"); | |
| new_svg.append("g").call(y_axis).append("text").attr("x", -height / 2).attr("y", -60).attr("transform", "rotate(-90)").attr("fill", "black") | |
| .style("text-anchor", "middle").text("Count"); | |
| update_button(); | |
| } | |
| // Triggers when clicking the buttons. | |
| next_button.on("click", function() { | |
| if (curr_scene < 6) { | |
| curr_scene++; | |
| if (curr_scene === 2) create_scene2(); | |
| else if (curr_scene === 3) create_scene3(); | |
| else if (curr_scene === 4) create_scene4(); | |
| else if (curr_scene === 5) create_scene5(); | |
| else if (curr_scene === 6) create_scene6(); | |
| } | |
| }); | |
| previous_button.on("click", function() { | |
| if (curr_scene > 1) { | |
| curr_scene--; | |
| if (curr_scene === 1) create_scene1(); | |
| else if (curr_scene === 2) create_scene2(); | |
| else if (curr_scene === 3) create_scene3(); | |
| else if (curr_scene === 4) create_scene4(); | |
| else if (curr_scene === 5) create_scene5(); | |
| } | |
| }); | |
| // Initialize the first scene. | |
| create_scene1(); | |
| }) | |
| </script> | |
| </body> | |
| </html> | |