2c:null 2d:["$","title",null,{"children":"Roux FB pair graph | Zhouheng (Jeffrey) Sun | Observable"}] 32:Tee3,chart = { const root = d3.hierarchy(link); root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth && d.data.name.length !== 7) d.children = null; }); const svg = d3.create("svg") .attr("viewBox", [-margin.left, -margin.top, width, dx]) .style("font", "13px sans-serif") .style("user-select", "none"); const gLink = svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); function update(source) { const duration = d3.event && d3.event.altKey ? 2500 : 250; const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + margin.top + margin.bottom; const transition = svg.transition() .duration(duration) .attr("viewBox", [-margin.left, left.x - margin.top, width, height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); // Update the nodes… const node = gNode.selectAll("g") .data(nodes, d => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", d => { d.children = d.children ? null : d._children; update(d); }) .on("mouseover", d => { mutable active = d.data.idx }); nodeEnter.append("circle") .attr("r", 2.5) .attr("fill", d => d._children ? "#555" : "#999") .attr("stroke-width", 10); nodeEnter.append("text") .attr("dy", "0.31em") .attr("x", d => d._children ? -6 : 6) .attr("text-anchor", d => d._children ? "end" : "start") .text(d => d.data.name) .clone(true).lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); // Transition nodes to their new position. const nodeUpdate = node.merge(nodeEnter).transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node.exit().transition(transition).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path") .data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link.enter().append("path") .attr("d", d => { const o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); // Transition links to their new position. link.merge(linkEnter).transition(transition) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition(transition).remove() .attr("d", d => { const o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } update(root); return svg.node(); }33:[] 30:{"id":"e351e648c5beb578","slug":"roux-fb-pair-graph","title":"Roux FB pair graph","thumbnail":"4e7bef12b21c37ffb9951d6e5ecd7897e59bc73aade34a73513c4e5209f64140","access_level":"public","create_time":"$D2020-04-25T11:15:37.482Z","update_time":"$D2022-06-26T07:57:11.259Z","view_time":null,"first_public_time":"$D2020-07-16T09:15:00.895Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"dd97d788d86e95f8","login":"onionhoney","name":"Zhouheng (Jeffrey) Sun","avatar_url":"https://avatars-next.observableusercontent.com/291ec9640cd16e7341d5f6951c390abff150ca54524e31a241a74ddf76fb7813","tier":"starter_2024"},"version":374,"publish_version":374,"role":null,"authored":false,"authors":[{"type":"individual","id":"1b3d3c858eeaffa0","login":"onionhoney","name":"Zhouheng (Jeffrey) Sun","avatar_url":"https://avatars-next.observableusercontent.com/291ec9640cd16e7341d5f6951c390abff150ca54524e31a241a74ddf76fb7813","tier":null}],"members":[{"type":"individual","id":"1b3d3c858eeaffa0","login":"onionhoney","name":"Zhouheng (Jeffrey) Sun","avatar_url":"https://avatars-next.observableusercontent.com/291ec9640cd16e7341d5f6951c390abff150ca54524e31a241a74ddf76fb7813","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Roux FB pair graph","cells":[{"id":0,"value":"md`# Roux FB pair graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"{\n function f(s, i) {\n const url = `http://rouxer.com/visualcube.php?fmt=svg&r=y30x-24&size=150&co=40&fo=100&cc=ccc&stage=fb&sch=white,red,red,white,blue,grey&case=${s}`\n const height = (i === 0) ? 180 : 130\n const mr = (i === 0) ? 30: 0\n const div = html`

`\n return div\n }\n const chain = active === -1 ? [\"\"] : get_chain(data[active].solutions[0])\n chain.reverse()\n const images = chain.map( (s, i) => f(s, i))\n\n const container = html`

${images}

`\n \n return container\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"mutable active = -1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"function get_depth(s) {\n let cnt = 0;\n for (let i = 0; i < s.length; i++) {\n if (s[i] !== \"'\" && s[i] !== \"2\") {\n cnt ++;\n }\n }\n return cnt\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"function get_chain(s) {\n let chain = []\n for (let i = s.length - 1; i >= 0; i--) {\n if (s[i] !== \"'\" && s[i] !== \"2\") {\n chain.push(s.slice(i))\n }\n }\n if (chain.length === 0) chain=[\"\"]\n return chain\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"function get_parent(s) {\n let arr = []\n let cnt = 0;\n for (let i = 0; i < s.length; i++) {\n if (s[i] !== \"'\" && s[i] !== \"2\") {\n cnt ++;\n if (cnt == 2)\n return s.slice(i, )\n }\n }\n return \"\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"link = {\n // build an index of suffixes\n // although we'd advance in a careful way!\n let map = new Map()\n for (let i = 0; i < data.length; i++) {\n for (const sol of data[i].solutions) {\n map.set(sol, i);\n }\n }\n const l = []\n for (let i = 0; i < data.length; i++) {\n l.push({name: data[i].solutions[0], idx: i, children: [] })\n }\n for (let i = 0 ; i < data.length; i++) {\n for (const sol of data[i].solutions) {\n const parent = map.get(get_parent(sol))\n if (parent !== undefined) {\n if (!l[parent].children.includes(l[i])) {\n if (data[parent].depth < data[i].depth) {\n l[parent].children.push(l[i]);\n }\n }\n }\n }\n }\n return l.filter( (x, i) => data[i].depth === 0)[0]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = {\n let raw_data = (await (await fetch(\"https://gist.githubusercontent.com/onionhoney/7c3c73ad0391bded6dc04119db6f7a2c/raw/88d8e508ba36fb40c4c94a177fdd3a35bfadb773/fb-last-pair.txt\")).text())\n return raw_data.split('\\n').slice(10, 420 + 10).map(row => {\n let [, e, c, sols] = row.split(\"\\t\");\n sols = sols.trim().slice(6).split(\",\")\n return {\n edge: e.trim().slice(2),\n corner: c.trim().slice(2),\n solutions: sols,\n depth: sols.map(get_depth).reduce( (a, b) => Math.min(a, b), 100)\n }\n})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"dx = 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"dy = width / 7","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"margin = ({top: 10, right: 120, bottom: 10, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"fbdr = (alg) => {\n const height = 150\n // const url = `http://162.243.158.198:8000/visualcube.php?fmt=svg&r=y30x-24&size=150&co=30&fo=90&cc=ccc&stage=fbdr&sch=white,22bb22,red,white,blue,grey&alg=${alg}`\n const url = `http://162.243.158.198:8000/visualcube.php?fmt=svg&r=y30x-24&size=200&co=33&fo=100&cc=ccc&bg=444&stage=fbdr&sch=ffffff,22bb22,red,white,blue,grey&alg=${alg}`\n\n return html`

` \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"fbdr`R'U'RrF`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"fbdr`R'`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"{\n let cases = `F2 U F' r2 F' U' R' U'\nR F' M2 U' F' R2 U' F'\nR2 F' M U2 F2 U' F' U'\nD' F2 D F' U' R2 F' U'\nD' F2 D F R2 U' F2 U2\nD R D2 F' D U R' U'\nF' M' F' R F' U' F' U'\nR D R' D' F' R' F' U'`;\n cases = cases.split('\\n').map(x => x.replace(/ /g, \"\")).map(fbdr);\n let div = html`

`\n cases.forEach(c => div.appendChild(c));\n return div\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"fbdr`F2UF'r2F'U'R'U'`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"{\n let cases = `F M U' r2 U2 F2 U' F'\nR F' M2 R' U' R2 F' U'`;\n cases = cases.split('\\n').map(x => x.replace(/ /g, \"\")).map(fbdr);\n let div = html`