2f:T55c,

View:

30:T55a,{ // then we attach an .on("click", () => doSomething) to each of the buttons or control inputs above. const btns = d3.select(svgContainer).select("#controls"); // register event listeners // btns.select("#allpasswords-on").on("click", () => layerOn("allpasswords")); // btns.select("#allpasswords-off").on("click", () => layerOff("allpasswords")); btns.select("#allpasswords-only").on("click", () => layerOnlyOn("allpasswords")); // btns.select("#difficulty-on").on("click", () => layerOn("difficulty")); // btns.select("#difficulty-off").on("click", () => layerOff("difficulty")); btns.select("#difficulty-only").on("click", () => layerOnlyOn("groupdifficulty")); // btns.select("#length-on").on("click", () => layerOn("length")); // btns.select("#length-off").on("click", () => layerOff("length")); btns.select("#length-only").on("click", () => layerOnlyOn("grouplength")); // btns.select("#btn-allOn").on("click", allOn); //btns.select("#btn-allOff").on("click", allOff); // btns.select("#allpasswords-toggle").on("click", () => layerToggleOnOff("allpasswords")); // btns.select("#difficulty-toggle").on("click", () => layerToggleOnOff("difficulty")); // btns.select("#length-toggle").on("click", () => layerToggleOnOff("length")); // btns.select("#slider").on("input", (evt) => layerOnlyOn("layer" + evt.target.value)); }31:T52a,32:T4c8, 33:[{"id":"f6e6db943c4b18ca75460ea8fd93909d7f0be1b4ac6745814fa3f447317cc68ca0ef9be60400b09a32b796b19c5f8e784addf1296ad9ca48bd071605b99eee21","href":"https://static.observableusercontent.com/files/f6e6db943c4b18ca75460ea8fd93909d7f0be1b4ac6745814fa3f447317cc68ca0ef9be60400b09a32b796b19c5f8e784addf1296ad9ca48bd071605b99eee21","name":"testpass.csv","type":"text/csv","lastModified":1683733207262.715,"size":83432},{"id":"33b730e5cf727c314df6bc5e4d07c60a984d69f0f239c0feec64131dc3ee9a3c3003e581b3d4208852b35e4467e27878cf1c7a8c255a42f629c08b0355ab0fa0","href":"https://static.observableusercontent.com/files/33b730e5cf727c314df6bc5e4d07c60a984d69f0f239c0feec64131dc3ee9a3c3003e581b3d4208852b35e4467e27878cf1c7a8c255a42f629c08b0355ab0fa0","name":"pass_di_cleaned_metrics.csv","type":"text/csv","lastModified":1683733291247.532,"size":40032591}] 2d:{"title":"Gmail Passwords Data Visualization - Random Slice","cells":[{"id":0,"value":"# Gmail Passwords Data Visualization - Random Slice","pinned":false,"hidden":false,"mode":"md"},{"id":639,"value":"Observing type, length, and crack difficulty of 1,000 passwords from a dataset containing 760,000+ passwords. Dataset provided by UVA Information Security. Each data point sized by total string length of the password.","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"$2f","pinned":false,"hidden":false,"mode":"html"},{"id":683,"value":"## Legend","pinned":false,"hidden":false,"mode":"md"},{"id":687,"value":"- Numeric: numbers (10 character options)\n- Alphabetic: letters (26 character options)\n- Alphanumeric: numbers and letters (36 character options)\n- Numeric-symbolic: numbers and symbols (43 character options)\n- Alphabetic-symbolic: letters and symbols (59 character options)\n- Alphanumeric-symbolic: numbers, letters, and symbols (69 character options)","pinned":false,"hidden":false,"mode":"md"},{"id":651,"value":"## View Field ","pinned":false,"hidden":false,"mode":"md"},{"id":678,"value":"#### All Passwords","pinned":false,"hidden":false,"mode":"md"},{"id":681,"value":"All passwords colored according to composition given by legend.","pinned":false,"hidden":false,"mode":"md"},{"id":663,"value":"#### Crack Difficulty","pinned":false,"hidden":false,"mode":"md"},{"id":655,"value":"Crack Difficulty, or crack_difficulty, has 4 categories: easy, moderate, challenging, and difficult. The categories were created from examining the distribution of the search_space_count variable in R. search_space_count is the number of total guesses it would take to \"crack\" a password, or all the total possible combinations of numbers, letters, or characters in the password. 'Easy' refers to values below Q1, 'moderate' refers to values in between Q1 and the median, 'challenging' refers to values in between the median and Q3, and 'difficult' refers to values above Q3. \n\nThe 5-number summary of the entire dataset is included below for reference.\n- Min: 1.000e+01 \n- Q1: 2.172e+11\n- Median: 1.045e+14\n- Q3: 8.812e+15\n- Max: 6.334e+106\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":669,"value":"#### Length","pinned":false,"hidden":false,"mode":"md"},{"id":675,"value":"Length of the character string for each password. In the sample of 1,000 passwords modeled above, length ranges from 1 to 17, allowing me to cluster based on length.","pinned":false,"hidden":false,"mode":"md"},{"id":689,"value":"## Visualization Code","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":481,"value":"viz = d3.select(svgContainer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"connect layers with buttons","pinned":false,"hidden":false,"mode":"md"},{"id":475,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"Create individual commands for buttons","pinned":false,"hidden":false,"mode":"md"},{"id":483,"value":"layerOff = (id) => {\n viz.select(\"#\" + id).style(\"visibility\",\"hidden\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"// layerOn = (id) => {\n// viz.select(\"#\" + id).style(\"visibility\",\"visible\")\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"// layerToggleOnOff = (id) => {\n// let layer = viz.select(\"#\" + id);\n// if (layer.style(\"visibility\") == \"hidden\") {\n// layer.style(\"visibility\",\"visible\");\n// } else {\n// layer.style(\"visibility\",\"hidden\");\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"// allOn = () => {\n// viz.selectAll(\"g\").style(\"visibility\",\"visible\")\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"allOff = () => {\n //viz.selectAll(\"g\").style(\"visibility\",\"hidden\")\n viz.select(\"#allpasswords\").style(\"visibility\",\"hidden\");\n viz.select(\"#groupdifficulty\").style(\"visibility\",\"hidden\");\n viz.select(\"#grouplength\").style(\"visibility\",\"hidden\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"layerOnlyOn = (id) => {\n allOff();\n viz.select(\"#\" + id).style(\"visibility\",\"visible\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"viewof sortField = Inputs.select([\"length\", \"password_type\", \"crack_difficulty\"], {label: \"Sort By:\", value: \"password_type\"}) //must keep this so below code runs","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"### Import and sort the data","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"UvaPasswords = FileAttachment(\"pass_di_cleaned_metrics.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"testpass = await FileAttachment(\"testpass.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"//slicedData = d3.shuffle(UvaPasswords).slice(0,1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"UvaPasswords.forEach(d => {\n delete d[\"\"]; //column name is an empty string, so \"\" will match it\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"sortedData = d3.sort(UvaPasswords, (a,b) => d3.ascending(a[sortField],b[sortField]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"layoutChildren function (imported from Prof. Field's library) preps format for pack circles - creating hierarchies.","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"import {layoutChildren} from \"@emfielduva/dvlib_layout\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"dataLayout = layoutChildren(\"passwords\", sortedData);","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"allDataSorted = d3.sort(UvaPasswords, (a,b) => d3.ascending(a[sortField], b[sortField])) //sorts passwords in ascending order \n//sortField created above (select from drop-down menu)","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"rollupData = d3.rollups(UvaPasswords, v => d3.count(v, d => toNum(d[\"search_space_count\"])), d => d[\"password_type\"]).sort((a,b) => d3.ascending(a[1],b[1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"rollupDataByDifficulty = d3.rollups(UvaPasswords, v => d3.count(v, d => toNum(d[\"search_space_count\"])), d => d[\"crack_difficulty\"], d => d[\"password_type\"]); //sorts data by crack difficulty and then password type ","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"rollupDataByLength = d3.rollups(UvaPasswords, v => d3.count(v, d => toNum(d[\"search_space_count\"])), d => d[\"length\"], d => d[\"password_type\"]); ////sorts data by length and then password type ","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"### Draw the circles","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"Use the dvPackCircles function from Prof. Field's library","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"import {dvPackCircles} from \"@emfielduva/dvlib_layout\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"pcElem = d3.select(svgContainer).select('#allpasswords') ","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"pc = dvPackCircles(pcElem,dataLayout,600,600,\"alphabet_size\",options); // alphabet_size works fine","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"//pc = dvPackCircles(pcElem,dataLayout,600,600,\"search_space_count\",options); // for some reason doesn't like search_space_count","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"options contains properties that control the layout and visual encoding","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"options = ({\n transitionMS: 1000, \n padding: 1, \n classField: \"password_type\",\n textLabelField: \"password\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":583,"value":"Draw circles for on/off pieces","pinned":false,"hidden":false,"mode":"md"},{"id":587,"value":"pc2Elem2 = d3.select(svgContainer).select(\"#allpasswords\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"pc5Elem2 = d3.select(svgContainer).select(\"#groupdifficulty\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"value":"pc6Elem2 = d3.select(svgContainer).select(\"#grouplength\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"pc3Elem2 = d3.select(svgContainer).select(\"#difficulty\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"pc4Elem2 = d3.select(svgContainer).select(\"#length\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"### Creating and testing different methods of grouping","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"import {toNum} from \"@emfielduva/dvlib_layout\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"rollupData2 = d3.rollups(UvaPasswords, v => d3.count(v, d => toNum(d[\"search_space_count\"])), d => d[\"password_type\"]).sort((a,b) => d3.ascending(a[1],b[1])) //use d3.count to count how many of each type of password\n//.sort(a,b) --> compares each a and b value and sorts them \n//a[1] --> sorts by column 1 (numeric value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"//rollupDataByLength = d3.rollups(UvaPasswords, v => d3.count(v, d => toNum(d[\"search_space_count\"])), d => d[\"length\"]).sort((a,b) => d3.ascending(a[1],b[1]))\n\n//don't think length is \"showing\" anything in terms of telling a story","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"view sorted data","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"viewof tableRollup = Inputs.table(rollupData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"dataLayoutFullSum = layoutChildren(\"passwords\",rollupData); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"pc2Elem = d3.select(svgContainer2).select(\"#layer1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"pc2 = dvPackCircles(pc2Elem,dataLayoutFullSum,600,600,'',options)\n\n//maybe want to switch order --> group by difficulty then type?","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":273,"value":"dataLayoutByDifficulty = layoutChildren(\"passwords\", rollupDataByDifficulty);","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"pc3Elem = d3.select(svgContainer3).select(\"#difficulty\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"pc3 = dvPackCircles(pc3Elem2,dataLayoutByDifficulty,600,600,'',options)","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":393,"value":"dataLayoutByLength = layoutChildren(\"passwords\", rollupDataByLength);","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"pc4Elem = d3.select(svgContainer4).select(\"#length\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"pc4 = dvPackCircles(pc4Elem2, dataLayoutByLength,800,600, '',options)","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":504,"value":"groupDifficulty = d3.groups(UvaPasswords, d => d[\"crack_difficulty\"]) // groups passwords by crack_difficulty (4 categories - easy, moderate, challenging, difficult)","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"dataLayoutGroupDifficulty= layoutChildren(\"passwords\", groupDifficulty);","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"pc5Elem = d3.select(svgContainer5).select(\"#groupdifficulty\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"pc5 = dvPackCircles(pc5Elem2,dataLayoutGroupDifficulty,600,600,\"length\",options)","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"// options2 = ({\n// transitionMS: 1000, \n// padding: 1, \n// classField: \"password_type\",\n// textLabelField: \"password\"\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":539,"value":"groupLength = d3.groups(UvaPasswords, d => d[\"length\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"dataLayoutGroupLength = layoutChildren(\"passwords\", groupLength);","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"pc6Elem = d3.select(svgContainer6).select(\"#grouplength\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":562,"value":"pc6 = dvPackCircles(pc6Elem2,dataLayoutGroupLength,600,600,\"alphabet_size\",options)","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"$32","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}