viz = d3.select(svgContainer)
{
// 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("difficulty"));
// btns.select("#length-on").on("click", () => layerOn("length"));
// btns.select("#length-off").on("click", () => layerOff("length"));
btns.select("#length-only").on("click", () => layerOnlyOn("length"));
// 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));
}
// layerOff = (id) => {
// viz.select("#" + id).style("visibility","hidden")
// }
// layerOn = (id) => {
// viz.select("#" + id).style("visibility","visible")
// }
// layerToggleOnOff = (id) => {
// let layer = viz.select("#" + id);
// if (layer.style("visibility") == "hidden") {
// layer.style("visibility","visible");
// } else {
// layer.style("visibility","hidden");
// }
// }
// allOn = () => {
// viz.selectAll("g").style("visibility","visible")
// }
allOff = () => {
//viz.selectAll("g").style("visibility","hidden")
viz.select("#allpasswords").style("visibility","hidden");
viz.select("#difficulty").style("visibility","hidden");
viz.select("#length").style("visibility","hidden");
}
layerOnlyOn = (id) => {
allOff();
viz.select("#" + id).style("visibility","visible")
}
// viewof dataAggregationSelected = Inputs.radio(new Map([["All Passwords", allDataSorted], ["Group by Password Type", rollupData], ["Count by Crack Difficulty", rollupDataByDifficulty]]), {value: allDataSorted, label: "Select one:"})
// Grouping Fields --> char upper, char_digit, char_symbol
// want to group by password type then crack difficulty
viewof sortField = Inputs.select(["length", "password_type", "crack_difficulty"], {label: "Sort By:", value: "password_type"}) //delete later if figure out on-screen sliders
UvaPasswords = FileAttachment("testpass.csv").csv()
// UvaPasswords.forEach(d => {
// if (d.alphabet_size == "10") {d.password_type = "numeric"}
// else if (d.alphabet_size == "26") {d.password_type = "alphabetic"}
// else if (d.alphabet_size == "36") {d.password_type = "alphanumeric"}
// else if (d.alphabet_size == "43") {d.password_type = "numeric-symbolic"}
// else if (d.alphabet_size == "59") {d.password_type = "alphabetic-symbolic"}
// else if (d.alphabet_size == "69") {d.password_type = "alphanumeric-symbolic"}
// })
//slicedData = d3.shuffle(UvaPasswords).slice(0,1000)
UvaPasswords.forEach(d => {
delete d[""]; //column name is an empty string, so "" will match it
})
sortedData = d3.sort(UvaPasswords, (a,b) => d3.ascending(a[sortField],b[sortField]))
import {layoutChildren} from "@emfielduva/dvlib_layout"
dataLayout = layoutChildren("passwords", sortedData);
allDataSorted = d3.sort(UvaPasswords, (a,b) => d3.ascending(a[sortField], b[sortField])) //sorts passwords in ascending order
//sortField created above (select from drop-down menu)
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]))
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
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
import {dvPackCircles} from "@emfielduva/dvlib_layout"
pcElem = d3.select(svgContainer).select('#allpasswords')
pc = dvPackCircles(pcElem,dataLayout,600,600,"alphabet_size",options); // alphabet_size works fine
//pc = dvPackCircles(pcElem,dataLayout,600,600,"search_space_count",options); // for some reason doesn't like search_space_count
options = ({
transitionMS: 1000,
padding: 1,
classField: "password_type",
textLabelField: "password"
})
pc2Elem2 = d3.select(svgContainer).select("#allpasswords")
pc3Elem2 = d3.select(svgContainer).select("#difficulty")
pc4Elem2 = d3.select(svgContainer).select("#length")
import {toNum} from "@emfielduva/dvlib_layout"
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
//.sort(a,b) --> compares each a and b value and sorts them
//a[1] --> sorts by column 1 (numeric 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]))
//don't think length is "showing" anything in terms of telling a story
viewof tableRollup = Inputs.table(rollupData)
dataLayoutFullSum = layoutChildren("passwords",rollupData);
pc2Elem = d3.select(svgContainer2).select("#layer1")
pc2 = dvPackCircles(pc2Elem,dataLayoutFullSum,600,600,'',options)
//maybe want to switch order --> group by difficulty then type?
dataLayoutByDifficulty = layoutChildren("passwords", rollupDataByDifficulty);
pc3Elem = d3.select(svgContainer3).select("#difficulty")
pc3 = dvPackCircles(pc3Elem2,dataLayoutByDifficulty,600,600,'',options)
dataLayoutByLength = layoutChildren("passwords", rollupDataByLength);
pc4Elem = d3.select(svgContainer4).select("#length")
pc4 = dvPackCircles(pc4Elem2, dataLayoutByLength,600,600, '',options)
groupDifficulty = d3.groups(UvaPasswords, d => d["crack_difficulty"]) // groups passwords by crack_difficulty (4 categories - easy, moderate, challenging, difficult)
dataLayoutGroupDifficulty= layoutChildren("passwords", groupDifficulty);
pc5Elem = d3.select(svgContainer5).select("#groupdifficulty")
pc5 = dvPackCircles(pc5Elem,dataLayoutGroupDifficulty,1050,600,"length",options)
// options2 = ({
// transitionMS: 1000,
// padding: 1,
// classField: "password_type",
// textLabelField: "password"
// })
groupLength = d3.groups(UvaPasswords, d => d["length"])
dataLayoutGroupLength = layoutChildren("passwords", groupLength);
pc6Elem = d3.select(svgContainer6).select("#grouplength")
pc6 = dvPackCircles(pc6Elem,dataLayoutGroupLength,900,600,"alphabet_size",options)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
