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"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.