Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
viewof sortField = Inputs.select(["length", "password_type"], {label: "Sort By:", value: "password_type"})
UvaPasswords = FileAttachment("pass1000.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 = "alphabetic-symbolic"}
})
//slicedData = d3.shuffle(UvaPasswords).slice(0,1000)
sortedData = d3.sort(UvaPasswords, (a,b) => d3.ascending(a[sortField],b[sortField]))
sortedData
Type Table, then Shift-Enter. Ctrl-space for more options.
import {layoutChildren} from "@emfielduva/dvlib_layout"
dataLayout = layoutChildren("passwords", sortedData);
import {dvPackCircles} from "@emfielduva/dvlib_layout"
pcElem = d3.select(svgContainer).select('#layer1')
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
// sizing by ridiculously large numbers seems to be a problem, at least with also very small ones.
rollup_SSCount = d3.rollups(UvaPasswords, v => d3.count(v, d=> toNum(d["search_space_count"])), d=>d["search_space_count"])
options = ({
transitionMS: 1000,
padding: 1,
classField: "password_type",
textLabelField: "password"
})
import {toNum} from "@emfielduva/dvlib_layout"
rollupData = d3.rollups(UvaPasswords, v => d3.count(v, d => toNum(d["search_space_count"])), d => +d["search_space_count"]).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)
// rollupData = d3.rollups(UvaPasswords, v=> d3.sum(v,
// d => d["password"]),
// d => d["length"]),
// d => d["alphabet_size"]),
// d => d["search_space_count"]).sort((a,b,c,d) => d3.ascending(a[1],b[1]),c[1],d[1])
viewof tableRollup = Inputs.table(rollupData)
dataLayoutFullSum = layoutChildren("passwords",rollupData);
pc2Elem = d3.select(svgContainer2).select("#layer1")
pc2 = dvPackCircles(pc2Elem,dataLayoutFullSum,600,600,'',options)
dvPackCircles
origdata = FileAttachment("pass1000@2.csv").csv()
origdata.forEach(d => {
delete d[""]; // the key name is an empty string, so the "" will match it.
})
<svg width=${scaleFactor} height="300">
<g id="beeswarm">
<line x1="150" y1="150" x2=${scaleFactor} y2="150" style="stroke: #bbb; stroke-dasharray: 2,5;"></line>
</g>
<style>
.numeric {fill:#000000; background-color:#000000; color: #dddddd;} /* black */
.alphabetic {fill:#00ff00; background-color:#00ff00;} /* green */
.alphanumeric {fill:#0000ff; background-color:#0000ff; color: #dddddd;} /* blue */
.numeric-symbolic {fill:#777700; background-color:#777700;} /* brown */
.alphabetic-symbolic {fill:#E8BD0C; background-color:#E8BD0C;} /* orange */
.alphanumeric-symbolic {fill:#00ffff; background-color:#00ffff;} /* cyan */
</style>
</svg>
viewof position = Inputs.radio(jumpPositions, {label: "Move to", value: 0})
bsElem.transition().duration(3000).attr("transform", "translate(-" + (position - 450) + ",0)")
//viewof range = Inputs.range([0, scaleFactor-1000], {label: "Pan", step: 500, width: 1000, value: 0})
//viewof scaleFactor = Inputs.range([1000, 10000000000000000000000], {label: "Scale Factor", step: 1000, value: 1000})
//scaleFactor = 1000
//scaleFactor = 100000000000000
scaleFactor = 1000000000000000000
sizes = d3.rollups(UvaPasswords, v => d3.count(v, d => toNum(d["search_space_count"])), d => toNum(d["search_space_count"])).sort((a,b) => d3.ascending(a[0],b[0]))
jumpPositions = {
let positions = [0];
sizes.forEach(d => {
let thisPos = Math.round(scaleAxis(d[0]));
if (!positions.find(p => p == thisPos)) {positions.push(thisPos);}
});
return positions;
}
nodes = []
bsElem = d3.select(beeswarmContainer).select("#beeswarm")
beeswarm = dvBeeswarmForce(bsElem,UvaPasswords,scaleFactor,300,"alphabet_size",bsoptions)
maxSSCount = d3.max(UvaPasswords, d => +d.search_space_count)
minSSCount = d3.min(UvaPasswords, d => +d.search_space_count)
scaleAxis = d3.scaleLinear().domain([0,maxSSCount]).range([150,scaleFactor-50])
bsoptions = ({
classField: "password_type", // to set their class/color
strength: -2,
alphaTarget: 0.04,
alphaMin: 0.05,
//direction: "vertical", // default is horizontal
axisField: "search_space_count", // distributes elements along the axis using this field
axisScaleFunction: scaleAxis,
dotScaleFactor: 1
//fociPositions: {}, // default is centered in height
//fociField: ""
})
UvaPasswords // just so I can see the data again without scrolling all the way up.
import {Sunburst} from "@d3/sunburst"
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.
