Update index.html

index.html

@@ -100,7 +100,7 @@
             next_button.style("display", curr_scene === 6 ? "none" : "inline");
         }
 
-        // Load data.
+        // Load data. 
         d3.csv("https://raw.githubusercontent.com/MainakRepositor/Datasets/master/top_200_password_2020_by_country.csv")
             .then(function(data) {
                 // Populate all passwords.
@@ -108,6 +108,11 @@
                 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
                 );
@@ -127,7 +132,10 @@
                 // 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)))
@@ -137,6 +145,8 @@
                 });
 
                 // 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 => ({
@@ -151,6 +161,7 @@
                     
                     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]);
                     
@@ -194,6 +205,7 @@
                     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]);
                         
@@ -236,7 +248,8 @@
                     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]);
 
@@ -264,6 +277,7 @@
                     
                     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]);
 
@@ -305,6 +319,9 @@
 
                     // 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);
@@ -383,7 +400,8 @@
 
                     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)`);