{
const container = d3.select(
html`<div style="position:relative;"><div id="tooltip" style="position: absolute; opacity: 0;"></div></div>`
);
const svg = container.append("svg").attr("viewBox", `0 0 ${700} ${700}`);
// let svg = d3.create('svg');
svg
.attr("width", 700 + "px")
.attr("height", 700 + "px");
svg.append('div').attr('id', 'tooltip').attr('style', 'position: absolute; opacity: 0;');
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', function(d) { return d.x * side })
.attr('y', function(d) { return 700 - side - d.y * side })
.attr('height', side)
.attr('width', side)
.attr('fill', function(d) { return magma(d.z) })
.on('mouseover', function(d, i) {
d3.select('#tooltip').style('opacity', 1).text(`(${i.x}, ${i.y}) = ${i.z}`)
})
.on('mouseout', function() {
d3.select('#tooltip').style('opacity', 0)
})
.on('mousemove', function() {
d3.select('#tooltip').style('left', (d3.event.pageX+10) + 'px').style('top', (d3.event.pageY+10) + 'px')
})
return container.node();
}
count1s = (x) => {
return toBinArr(x).reduce((acc, x) => acc + x, 0);
}
chr = (x) => String.fromCharCode(x)
hammingDist = (a, b) => {
return count1s(a ^ b);
}
gridSize = 128
side = 700 / gridSize;
data.reduce((acc, x) => {return Math.max(acc, x.z)}, 0);
data = {
let r = [];
for (let i = 0; i < gridSize; i += 1) {
for (let j = 0; j < gridSize; j += 1) {
r.push({
x: i,
y: j,
z: hammingDist(i, j),
});
}
}
// let r = [];
// for (let i = start; i <= end; i += 1) {
// r.push(hammingDist(97, i));
// }
return r
}
charFromBinArr(charToBinArr('a'))
magma = d3.scaleSequential(function (t) {
return d3.interpolateReds(t/7);
});
d3 = require('d3')
md`
# Resources
* [Cryptopals Problem 1.6](https://cryptopals.com/sets/1/challenges/6)
* [Cryptography FAQ 8.2](http://www.faqs.org/faqs/cryptography-faq/part8/)
* [Cryptanalysis A Study of Ciphers and their Solutions](https://archive.org/details/1956Cryptanalysis-AStudyOfCiphersAndTheirSolution/page/n1/mode/2up) by Helen Fouche Gaines (1944)
* [Elementary Cryptanalysis](https://archive.org/details/elementarycrypta0000sink/page/n7/mode/2up) Sinkov 1966
`
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.
