2b:null 2c:["$","title",null,{"children":"Secret Santa | Adam Sasine | Observable"}] 31:T682,{ const fixedEdges = getEdgesFromAdjacencyMatrix(names, currentStep).filter(edge => edge.type === EdgeType.FIXED); if (fixedEdges.length !== names.length) { return md`Not completed yet.`; } const nameToOutgoingEdge = new Object(); fixedEdges.forEach(edge => { if (!nameToOutgoingEdge.hasOwnProperty(edge.source)) { nameToOutgoingEdge[edge.source] = []; } nameToOutgoingEdge[edge.source].push(edge); }); function* walk(node, adjacencyList, visited) { // we are in the subgraph if (visited.has(node)) { return; } yield node; visited.add(node); const adjacencies = adjacencyList[node]; for (const adjacency of adjacencies) { const target = adjacency.target; yield* walk(target, adjacencyList, visited); } } const nodes = new Set(fixedEdges.map(edge => edge.source)); const subgraphs = []; while (nodes.size > 0) { // HACK: get the first element of a set let start; for (start of nodes) { break; } const subgraph = [...walk(start, nameToOutgoingEdge, new Set())]; for (const node of subgraph) { nodes.delete(node); } subgraphs.push(subgraph); } function* skip(iterable, n) { for (let i = 0; i < n; i++) { iterable.next(); } yield* iterable; } const sentences = subgraphs.map(subgraph => { const last = subgraph[subgraph.length - 1]; const sentence = subgraph.map(name => `**${name}**`).join(" gives to "); return `**${last}** gives to ${sentence}`; }); const paragraph = sentences.join("\n\n"); return md`## The Exchange ${paragraph}`; }32:T411,restrictions = { const restrictions = new Object(); // split the text into groups based on line // each line is a space-separated list of names // trim whitespace and remove empty lines const groups = debouncedRestrictions.split("\n").map(group => group.split(" ").map(name => name.trim()).filter(name => name.length > 0)).filter(group => group.length > 0); // initially the only restrictions are ourselves for (let i = 0; i < names.length; i++) { const name = names[i]; restrictions[name] = new Set(); restrictions[name].add(name); } // add restrictions from each group for (let i = 0; i < groups.length; i++) { const group = groups[i]; // go through each name in the group for (let j = 0; j < group.length; j++) { const name = group[j]; // add a restriction to every other name in the group for (let k = 0; k < group.length; k++) { const otherName = group[k]; restrictions[name].add(otherName); } } } return restrictions; }33:[] 2f:{"id":"0035705d20409a1c","slug":"secret-santa","title":"Secret Santa","thumbnail":"49df0886c0ce0788ff593b79de180e8404461dd56b60b6a024a28977f2dab47a","access_level":"public","create_time":"$D2020-11-27T12:52:17.540Z","update_time":"$D2021-03-01T20:01:34.501Z","view_time":null,"first_public_time":"$D2020-11-27T12:53:04.451Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"88f46a18608f4703","login":"asasine","name":"Adam Sasine","avatar_url":"https://avatars-next.observableusercontent.com/76eb676b927ff768da6863d7e51e0611b99c7324be9cb323a367d577a8ee5923","tier":"starter_2024"},"version":1453,"publish_version":1453,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce5642080d938bd5","login":"asasine","name":"Adam Sasine","avatar_url":"https://avatars-next.observableusercontent.com/76eb676b927ff768da6863d7e51e0611b99c7324be9cb323a367d577a8ee5923","tier":null}],"members":[{"type":"individual","id":"ce5642080d938bd5","login":"asasine","name":"Adam Sasine","avatar_url":"https://avatars-next.observableusercontent.com/76eb676b927ff768da6863d7e51e0611b99c7324be9cb323a367d577a8ee5923","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Secret Santa","cells":[{"id":0,"value":"md`# Secret Santa\n\nAutomatically draws names from a hat and adds restrictions such as siblings or couples.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"md`## Names\n\nProvide a list of names, each on its own line.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"viewof namesView.bind(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"md`### Restrictions\n\nProvde a list of restrictions that are not allowed, each on its own line. Each line is a list of names separated by spaces.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"viewof restrictionsView.bind(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1220,"value":"md`\nTry pressing ${viewof resetButton.bind(html``)} to draw names from a hat.\n\nEach name is a node. A blue line points from one person to the person they are giving a gift to. A red line points between two people who are not allowed to give each other gifts.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"dot`${getDotGraph(names, getEdgesFromAdjacencyMatrix(names, currentStep))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1386,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1337,"value":"md`You can speed up the animation by changing the delay between frames to **${animationSpeed} ms** with the input below`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1357,"value":"viewof animationSpeed.bind(html``);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":814,"value":"md`## Algorithm\nSecret Santa can be reduced to a graph problem. Each node of the graph is a person in the pool and an edge represents an opportunity for someone to give a gift to someone else. To accommodate restrictions between people, such as couples not being allowed to draw each other, we remove edges from the graph between those nodes.\n\nAt every step, this series of decisions is performed:\n1. Randomly pick an unfixed edge (black). Call this edge *e*.\n1. Set *e* to fixed (blue).\n1. Set all edges with the same source node as *e* to invalid (gray).\n1. Set all edges with the same target node as *e* to invalid.\n\nThis process repeats until there are no more edges that are unfixed.\n\nCredit to Tristan Mahr from https://www.tjmahr.com/secret-santa-graph-traversal/ for the inspiration of this algorithm.\n\nLet's go through the implementation piece-by-piece.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":823,"value":"md`## Implementation\nWe represent the graph as an [ajacency matrix](https://en.wikipedia.org/wiki/Adjacency_matrix) so we can efficiently update the edges as names are drawn.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":874,"value":"md`### Graph nodes\nWe need a list of people, the nodes of the graph.\n\nWe take the values of the text box from above, split it into an array where each line is a name, clean up any leading or trailing whitespace, and remove empty lines.\n\nThere's one trick here: we're debouncing the input so that this cell only updates after 1 second of no input. Try modifying the list of names and see for yourself.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1307,"value":"viewof namesView.bind(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1283,"value":"debouncedNames = debounce(viewof namesView)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"names = debouncedNames.split(\"\\n\").map(name => name.trim()).filter(name => name.length > 0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":866,"value":"md`### Forming the graph\nInitially, every person can draw every other person therefore this graph is a [complete graph](https://en.wikipedia.org/wiki/Complete_graph).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":670,"value":"completeAdjacencyMatrix = {\n const adjacencyMatrix = new Array(names.length);\n for (let i = 0; i < names.length; i++) {\n adjacencyMatrix[i] = new Array(names.length);\n for (let j = 0; j < names.length; j++) {\n adjacencyMatrix[i][j] = EdgeType.UNFIXED;\n }\n }\n \n return adjacencyMatrix;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":939,"value":"dot`${getDotGraph(names, getEdgesFromAdjacencyMatrix(names, completeAdjacencyMatrix))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":845,"value":"md`### Adding restrictions\nAccommodating restrictions is easy with a graph. \n\nFirst we take the values of the restrictions text box from above and store them in an object. Each key in the object is someone's name and the value is a set of names which they cannot pick.\n\nWe also add ourselves to the restrictions.\n\nJust like with the names, we are debouncing this list too.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1314,"value":"debouncedRestrictions = debounce(viewof restrictionsView);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":888,"value":"md`Then we remove the edges in the adjacency matrix between people who should not pick each other, including ourselves.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":844,"value":"adjacencyMatrixWithRestrictions = { \n const adjacencyMatrix = new Array(names.length);\n for (let i = 0; i < names.length; i++) {\n adjacencyMatrix[i] = new Array(names.length);\n const source = names[i];\n for (let j = 0; j < names.length; j++) {\n const target = names[j];\n if (restrictions[source].has(target)) {\n // if this is a restricted edge, mark it as RESTRICTED\n adjacencyMatrix[i][j] = EdgeType.RESTRICTED;\n } else {\n // otherwise copy the value from completeAdjacencyMatrix\n adjacencyMatrix[i][j] = completeAdjacencyMatrix[i][j];\n }\n }\n }\n\n return adjacencyMatrix;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":946,"value":"dot`${getDotGraph(names, getEdgesFromAdjacencyMatrix(names, adjacencyMatrixWithRestrictions))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":950,"value":"md`### Drawing names\nDrawing names from this graph is as easy as randomly picking an *UNFIXED* edge and setting it to *FIXED*. The *source* of the edge represents the person who drew the name and the *target* represents the name on the slip of paper.\n\nWe'll create two functions for this, one that returns all unfixed edges from an adjacency matrix and one that randomly selects one of these edges. We'll reuse these later.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1099,"value":"function getUnfixedEdges(adjacencyMatrix) {\n const unfixedEdges = new Array();\n for (let i = 0; i < adjacencyMatrix.length; i++) {\n for (let j = 0; j < adjacencyMatrix[i].length; j++) {\n const type = adjacencyMatrix[i][j];\n if (type == EdgeType.UNFIXED) {\n unfixedEdges.push({ source: i, target: j }); \n }\n }\n }\n \n return unfixedEdges;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":953,"value":"function selectRandomUnfixedEdge(adjacencyMatrix) {\n // identify all unfixed edges\n const unfixedEdges = getUnfixedEdges(adjacencyMatrix);\n\n // select a random element and return\n const randomIndex = getRandomInt(0, unfixedEdges.length);\n const edgeToFix = unfixedEdges[randomIndex];\n return edgeToFix;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":981,"value":"md`Try calling this function a few times by clicking ${viewof getRandomUnfixedEdgeTestButton.bind(html``)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":976,"value":"{\n getRandomUnfixedEdgeTestButton;\n const edge = selectRandomUnfixedEdge(adjacencyMatrixWithRestrictions);\n const source = names[edge.source];\n const target = names[edge.target];\n \n return `${source} -> ${target}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1073,"value":"md`Since you can only draw a name once, we need to update our graph to enforce this. All edges pointing from the edge's source should be marked as invalid.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1046,"value":"function updateEdgesWithSourceAsInvalid(source, adjacencyMatrix)\n{\n for (let j = 0; j < adjacencyMatrix[source].length; j++) {\n // only update if it was UNFIXED, otherwise we may erase restrictions\n if (adjacencyMatrix[source][j] == EdgeType.UNFIXED)\n {\n adjacencyMatrix[source][j] = EdgeType.INVALID; \n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1056,"value":"md`Additionally, we need to update the graph so nobody else can draw the same person again. All edges pointing to the edge's target should be marked invalid.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1038,"value":"function updateEdgesWithTargetAsInvalid(target, adjacencyMatrix)\n{\n for (let i = 0; i < adjacencyMatrix.length; i++) {\n // only update if it was UNFIXED, otherwise we may erase restrictions\n if (adjacencyMatrix[i][target] == EdgeType.UNFIXED)\n {\n adjacencyMatrix[i][target] = EdgeType.INVALID; \n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1065,"value":"md`Let's combine these steps into a single function which draws a random name and updates the graph. Each call to this function will choose a random, unfixed edge and update the adjacency matrix as appropriate.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1067,"value":"function step(adjacencyMatrix) {\n const edgeToFix = selectRandomUnfixedEdge(adjacencyMatrix);\n \n // update edges\n adjacencyMatrix[edgeToFix.source][edgeToFix.target] = EdgeType.FIXED;\n updateEdgesWithSourceAsInvalid(edgeToFix.source, adjacencyMatrix);\n updateEdgesWithTargetAsInvalid(edgeToFix.target, adjacencyMatrix);\n \n return adjacencyMatrix;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1085,"value":"md`This process repeats until all edges are fixed. We can use a simple loop for this.\n\nSide note: this function is a [generator](https://observablehq.com/@observablehq/generator-cells-functions-and-objects), specifically a [generator function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*). Everytime you see \\`yield\\`, it's like \\`return\\` except the function caller can loop through every step at every iteration instead of only the final value when the loop completes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1087,"value":"function* steps(adjacencyMatrix) {\n // clone the adjacency matrix so we can mutate it safely\n \n adjacencyMatrix = cloneAdjacencyMatrix(adjacencyMatrix);\n \n // BUG: if you cache the values of this generator and loop through them, the values are all the same\n // this is because this generator yields the same object pointer and mutates it internally at each step\n // TODO yield new objects on every iteration\n // cloning an adjacency matrix is slow, especially for large graphs (many nodes)\n // possible solution: yield events that mutate a matrix so the caller only needs one copy of the matrix\n \n // repeat the step until there are no more unfixed edges\n let unfixedEdgesRemaining = getUnfixedEdges(adjacencyMatrix).length;\n while (unfixedEdgesRemaining > 0) {\n yield step(adjacencyMatrix);\n unfixedEdgesRemaining = getUnfixedEdges(adjacencyMatrix).length;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1113,"value":"md`Occasionally, we will get a graph that leaves someone out. We should check if the final graph has every person giving and receiving exactly one gift.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1118,"value":"function isValid(adjacencyMatrix) {\n const n = adjacencyMatrix.length;\n const sources = new Array(n).fill(false);\n const targets = new Array(n).fill(false);\n \n // are all nodes a source of an edge?\n // are all nodes a target of an edge?\n // are any sources equal to their targets?\n for (let i = 0; i < adjacencyMatrix.length; i++) {\n for (let j = 0; j < adjacencyMatrix[i].length; j++) {\n if (adjacencyMatrix[i][j] == EdgeType.FIXED) {\n // is this a self-loop?\n if (i == j) {\n return false;\n }\n \n sources[i] = true;\n targets[j] = true;\n }\n }\n }\n \n // is every source giving a gift and every target receiving a gift?\n return sources.every(source => source) && targets.every(target => target);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1121,"value":"md`One invalid graph is below. \\`isValid(invalidGraph)\\` returns \\`${isValid(invalidGraph)}\\` for this graph.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1123,"value":"invalidGraph = [\n [EdgeType.RESTRICTED, EdgeType.FIXED, EdgeType.INVALID],\n [EdgeType.FIXED, EdgeType.RESTRICTED, EdgeType.INVALID],\n [EdgeType.INVALID, EdgeType.INVALID, EdgeType.RESTRICTED],\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1125,"value":"dot`${getDotGraph([\"A\", \"B\", \"C\"], getEdgesFromAdjacencyMatrix([\"A\", \"B\", \"C\"], invalidGraph))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1138,"value":"md`The last step is to repeat the \\`steps(...)\\` function until the graph it returns is valid.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1140,"value":"function* validSteps(adjacencyMatrix) {\n let valid = false;\n while (!valid) {\n let step;\n for (step of steps(adjacencyMatrix))\n {\n yield step;\n }\n \n valid = isValid(step);\n }\n \n// let allSteps = Array.from(steps(adjacencyMatrix));\n// let valid = isValid(allSteps[allSteps.length - 1]);\n// while (!valid)\n// {\n// let allSteps = Array.from(steps(adjacencyMatrix));\n// valid = isValid(allSteps[allSteps.length - 1]);\n// }\n \n// yield* allSteps;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1154,"value":"currentStep = {\n resetButton;\n \n const steps = validSteps(adjacencyMatrixWithRestrictions);\n \n // TODO: fix this generator cell once steps cell is working properly\n // see steps cell for more details\n \n // HACK: return the final step to improve efficiency while TODO is incomplete\n // const allSteps = [...steps];\n // yield allSteps[allSteps.length - 1];\n // return;\n \n // iterate each step and yield it in turn with a delay for animating\n for (const step of steps) {\n yield step;\n await Promises.delay(animationSpeed || 0);\n }\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1161,"value":"dot`${getDotGraph(names, getEdgesFromAdjacencyMatrix(names, currentStep))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"md`# Appendix\nThis section is for helper functions that are not fully explained in the main sections but still useful.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":919,"value":"function getDotGraph(nodes, edges) {\n const dotNodes = nodes;\n const dotEdges = edges.map(edge => `${edge.source} -> ${edge.target} [color = ${getEdgeColor(edge.type)}]`);\n \n return `digraph { ${dotNodes.join(\"; \")}; ${dotEdges.join(\"; \")}; }`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":922,"value":"function getEdgeColor(type) {\n switch (type) {\n case EdgeType.UNFIXED:\n return \"black\";\n case EdgeType.FIXED:\n return \"blue\";\n case EdgeType.RESTRICTED:\n return \"red\";\n case EdgeType.INVALID:\n default:\n return \"gray\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":706,"value":"function getEdgesFromAdjacencyMatrix(nodes, adjacencyMatrix) {\n const edges = new Array();\n for (let i = 0; i < nodes.length; i++) {\n const source = nodes[i];\n for (let j = 0; j < nodes.length; j++) {\n const target = nodes[j];\n const type = adjacencyMatrix[i][j];\n edges.push({ source, target, type }); \n }\n }\n \n return edges;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":679,"value":"function getRandomInt(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n return Math.floor(Math.random() * (max - min) + min);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1081,"value":"function cloneAdjacencyMatrix(adjacencyMatrix) {\n const clone = new Array(names.length);\n for (let i = 0; i < names.length; i++) {\n clone[i] = new Array(names.length);\n for (let j = 0; j < names.length; j++) {\n clone[i][j] = adjacencyMatrix[i][j];\n }\n }\n\n return clone;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"EdgeType = ({\n UNFIXED: \"UNFIXED\",\n FIXED: \"FIXED\",\n INVALID: \"INVALID\",\n RESTRICTED: \"RESTRICTED\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1290,"value":"viewof namesView = new View(`James\nJohn\nRobert\nMichael\nWilliam\nEmma\nOlivia\nAva\nIsabella\nSophia`);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1293,"value":"viewof restrictionsView = new View(`James Emma\nJohn Robert\nOlivia Ava`);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":734,"value":"viewof animationSpeed = new View(200);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":803,"value":"viewof resetButton = new View();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":999,"value":"viewof getRandomUnfixedEdgeTestButton = new View();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1225,"value":"dot = require(\"@observablehq/graphviz@0.2\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":730,"value":"import {View} from \"@mbostock/synchronized-views\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1244,"value":"import {debounce} from \"@mbostock/debouncing-input\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"