31:T449,{ const container = d3.select( html`

` ); 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(); }32:[] 2f:{"title":"Hamming Distance Visualized","cells":[{"id":0,"value":"md`# Hamming Distance Visualized\n\nHamming distance is the number of bits that are different between two binary things. So \\`001\\` and \\`100\\` have 2 bits that are different while \\`000\\` and \\`010\\` only have 1 bit difference. \n\nIn the visualization below, I've plotted a 128x128 grid of Hamming Distances. The square at (20,20) for example is a dark square because a number has 0 different bits from itself, but the square at (20, 107) = 7.\n\n\n\\`${toBinArr(20)}\\` (20)\n\n\\`${toBinArr(107)}\\` (107)\n\nSo every possible bit is different\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"charToBinArr = (s) => {\n if (s.length > 1) {\n throw 'must be string of length 1';\n }\n \n return toBinArr(s.charCodeAt(0))\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"toBinArr = (c) => { \n if (c > 255) {\n throw 'must be 8 bit byte';\n }\n \n let result = [];\n \n result[7] = (c & 1) > 0 ? 1 : 0; \n result[6] = (c & 2) > 0 ? 1 : 0; \n result[5] = (c & 4) > 0 ? 1 : 0; \n result[4] = (c & 8) > 0 ? 1 : 0; \n result[3] = (c & 16) > 0 ? 1 : 0; \n result[2] = (c & 32) > 0 ? 1 : 0; \n result[1] = (c & 64) > 0 ? 1 : 0; \n result[0] = (c & 128) > 0 ? 1 : 0; \n \n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"fromBinArr = (x) => {\n let result = 0;\n \n for (let i = 0; i < 8; i += 1) {\n result |= x[7 - i] << i\n }\n \n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"charFromBinArr = (a) => {\n return String.fromCharCode(fromBinArr(a));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"count1s = (x) => {\n return toBinArr(x).reduce((acc, x) => acc + x, 0);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"chr = (x) => String.fromCharCode(x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"hammingDist = (a, b) => {\n return count1s(a ^ b);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"gridSize = 128","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"side = 700 / gridSize;","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"data.reduce((acc, x) => {return Math.max(acc, x.z)}, 0);","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"data = {\n let r = [];\n for (let i = 0; i < gridSize; i += 1) {\n for (let j = 0; j < gridSize; j += 1) {\n r.push({\n x: i,\n y: j,\n z: hammingDist(i, j),\n });\n }\n }\n \n// let r = [];\n// for (let i = start; i <= end; i += 1) {\n// r.push(hammingDist(97, i));\n// }\n return r\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"charFromBinArr(charToBinArr('a'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"magma = d3.scaleSequential(function (t) {\n return d3.interpolateReds(t/7);\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\n# Resources\n\n* [Cryptopals Problem 1.6](https://cryptopals.com/sets/1/challenges/6)\n* [Cryptography FAQ 8.2](http://www.faqs.org/faqs/cryptography-faq/part8/)\n* [Cryptanalysis A Study of Ciphers and their Solutions](https://archive.org/details/1956Cryptanalysis-AStudyOfCiphersAndTheirSolution/page/n1/mode/2up) by Helen Fouche Gaines (1944)\n* [Elementary Cryptanalysis](https://archive.org/details/elementarycrypta0000sink/page/n7/mode/2up) Sinkov 1966\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}