31:T97f,viz = { d3.select("svg").selectAll("g").remove(); let zoom = d3.select("svg") .attr("width", width) .attr("height", 500) .append("g") .attr("transform", `translate(${width/2 - 50}, 250)`); let vis = zoom .append("g") .call(d3.zoom().on("zoom", (event) => { vis.attr("transform", event.transform) })) var drawArc = d3.arc() .innerRadius((patch) => patch.innerRadius) .outerRadius((patch) => patch.outerRadius) .startAngle((patch) => patch.startAngle) .endAngle((patch) => patch.endAngle); // draw arcs for new data vis.selectAll("path.arc-path").data(dataset) .enter().append("path") .attr("class", "arc-path") .attr("fill", (patch) => patch.color) .attr("d", drawArc) // draw the arc .attr("fill-opacity", (patch) => patch.opacity) // lol, what a hack beyond here let norm = (x) => typeof(x) == typeof("") ? x : x.join(" "); let renderall = highlight == " "; let spans = [to_letter(BANDS[3]), to_letter(BANDS[2], 20), to_letter(BANDS[1]), to_coords(BANDS[0]).split(" ")] let lengths = [4, 6, 6, 0]; let chars = highlight.index; let i = 0; for (; i < spans.length && chars >= 0; i++) { vis.append("text") .attr("class", i < 3 ? "pretty" : "gps") .attr("transform", `translate(${arcWidth * 4.1}, ${30 - arcWidth*(3.5-i)})`) .append("tspan") .text(() => renderall ? spans[i] : norm(spans[i].slice(0, chars))) if (!renderall) chars -= lengths[i]; } if (highlight.index == 25) { vis.append("path") .attr("d", `M${150 + arcWidth * 4},${arcWidth * 2} T${160 + arcWidth * 4.1},100 T${175 + arcWidth * 4.1},${40 - arcWidth*0.5}`) .attr("stroke", "black") .attr("fill", "none") .attr("stroke-width", 2) .attr("marker-end", "url(#arrow)"); vis.append("text") .attr("class", "coords") .attr("transform", `translate(${arcWidth * 4.1}, ${45 + arcWidth*(1.5)})`) .append("tspan") .text("NASA Jet Propulsion Lab coordinates") } else if (highlight.index > 0) { let v = (1 + abcs.indexOf(highlight.value)); if (v == 0) v = (highlight.value | 0); v = v.toString(16).toUpperCase(); if (v.length == 1) v = "0" + v; v = "0x" + v vis.append("text") .attr("class", "hex") .attr("transform", `translate(-${arcWidth * 5.5}, ${30 - arcWidth*(3)})`) .append("tspan") .text(v) } return md`## d3 vis code` }32:T4d6,class Patch { constructor(index, row) { this.red = BANDS[row][index]; this.index = (index + arcOffset) % patches_per; this.row = 3 - row; } get outerRadius (){return (this.row + 1) * arcWidth}; get innerRadius(){return this.row * arcWidth + arcPad;} get startAngle(){return 2 * PI * (this.index / patches_per + 1/(invSectionPad * 2))} get endAngle(){return this.startAngle + 2 * PI * (1 / patches_per - 1 / (invSectionPad * 2))} get color(){ let shift_green = this.opacity == 1 ? 0: 40; let shift_blue = this.opacity == 1 ? 0: 45; return this.red ? `rgb(255, ${shift_green}, ${shift_blue})` : `rgb(255, ${200 - shift_green}, ${200 - shift_blue})`} get symbol(){ let nums = to_numbers(BANDS[3 - this.row]); let index = ((4 + ((this.index / 10) | 0)) % 8); if (this.row == 3) return `${nums[index]}`; return `${abcs[nums[index] - 1]}`; } get opacity(){ let current = highlight.value; if (current == " ") return 1; if (highlight.index < 16 && this.row == 3) return 0.1; if (highlight.index < 10 && this.row == 2) return 0.1; if (highlight.index > 10 && this.row == 1) return 0.1; if (current == this.symbol) { return 1; } return 0.1; } }33:[] 2f:{"title":"Perseverance Parachute","cells":[{"id":583,"value":"md`# Perseverance Parachute`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`## Decoding the Parachute\n\nAl Chen the Perseverance Entry Descent and Landing lead, during the NASA live stream, said that there was a message encoded in the parachute of the Perseverance Rover.\n\n\n\n### Cracked !\n${tweet(\"1363992051734478852\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`## Cracking the code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"chute = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"viewof highlight = Keyframer(SOLUTION, { delay: 10, keyframes: 25, autoplay: false, loop: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"viewof arcOffset = slider({min: 0, max: 80, value:60, step: 1, description: \"Rotatation Offset\", title:\"Offset\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"viewof arcPad = slider({min: 0, max: 10, value:1, step: 1, description: \"Padding on sections\", title:\"Padding\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"viewof invSectionPad = slider({min: 160, max: 1600, value:1600, step: 1, description: \"Padding between sections\", title:\"Inverse Padding\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"viewof arcWidth = slider({min: 15, max: 150, value:60, step: 5, description: \"Size of rings\", title:\"Ring size\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"viewof innerColor = color({\n value: \"#FFC8C8\",\n title: \"Inner Color\",\n description: \"The whitish areas\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"viewof outerColor = color({\n value: \"#FF0000\",\n title: \"Outer Color\",\n description: \"The redish areas\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"md`## Solution\n\n\\`\\`\\`javascript\n\"${to_letter(BANDS[3])}\"\n\"${to_letter(BANDS[2], 20)}\"\n\"${to_letter(BANDS[1])}\"\n\"${to_coords(BANDS[0])}\"\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`## constants (thanks /u/Tharbie for the data)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"BANDS = [\n[0,0,0,0,1,1,1,0,1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,1,1,1,0,1,1,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,1,0,1,1,1,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,0,1,1],[0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,1,0,0,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,1,1,0,0,1],[0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"dataset = {\n highlight;\n let bands = [];\n BANDS.forEach((_, row)=>BANDS[row].forEach((_, index)=>bands[row * patches_per + index] = new Patch(index, row)));\n return bands;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"SOLUTION = ((\" \" + to_letter(BANDS[3]) + to_letter(BANDS[2], 20) + to_letter(BANDS[1])).split(\"\") + \",\" + to_numbers(BANDS[0]) + \", \").split(\",\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"PI = Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"patches_per = BANDS[0].length","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"abcs = \"ABCDEFGHIJKLMNOPQRSTUVWXYZXYZ\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"to_numbers = (band, extra_offset) => {\n const extra = extra_offset | 0;\n let numbers = []\n for (var i = 0; i < (band.length/10); i++) {\n let start = (arcOffset + extra + i * 10) % patches_per;\n let end = (start) % patches_per + 10;\n let slice = [];\n // Translate to binary index\n band.slice(start, end).map((bit, idx) => slice[idx] = bit * Math.pow(2 * bit, 9 - idx));\n numbers[i] = slice.reduce((a, b) => a + b, 0);\n }\n return numbers;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"to_letter = (band, extra_offset) => {\n const extra = extra_offset | 0;\n const chars = to_numbers(band, extra_offset);\n\n \n let sentence = \"\";\n chars.forEach((num)=>num < 28 ? sentence += abcs[num - 1]: \"\")\n\n return sentence;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"to_coords = (band) => {\n const coords = to_numbers(band);\n return `${coords[0]}d ${coords[1]}m ${coords[2]}s N ${coords[4]}d ${coords[5]}m ${coords[6]}s W`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`## imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"import {slider, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"import {Keyframer} from \"@enjalot/keyframe-scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}