30:Tea2,chart = { const xRange = (bbox.xMax - bbox.xMin) * zoom const yRange = (bbox.yMax - bbox.yMin) * zoom const center = { x: ((bbox.xMax - bbox.xMin) / 2) + bbox.xMin, y: ((bbox.yMax - bbox.yMin) / 2) + bbox.yMin, } const svg = d3.create("svg") .attr("width", width) .attr("height", height); const drawLine = (x1, y1, x2, y2) => { // moveTo x1, y1 // lineTo x2, y2 return `M${x1},${y1}L${x2},${y2}` } const drawPolyLine = (x, y, index, path) => { return index === 0 ? `M${x},${y}` : `${path}L${x},${y}` } // height * yRange is fraction of height that yRange occupies // height / fraction is the scale factor const _height = height / yRange // (x * width) * (height / width) const x = (x) => x * _height + (width / 2) + panX const y = (y) => (center.y * _height) + (height / 2) - (y * _height) + panY const scaleZoom = (r) => Math.min(r, Math.max(1, r / zoom)) let drawCycles = display.cycles if (!allCycles){ drawCycles = [display.cycles[cycleIndex]] } svg .selectAll(".cycles") .data(drawCycles, (d, i) => d ? d.map(v => v.id).join(".") : undefined) .join("path") .attr("class", "cycles") .attr("d", (d) => { let path = '' if (!d) return d.forEach((n,i) => { path = drawPolyLine(x(n.x), y(n.y), i, path)}) return path + "Z" }) .attr("cursor", "pointer") .attr("fill-opacity", 0.6) .attr("fill", (d, i) => { const index = allCycles ? i : cycleIndex return view === "Demo" ? style.cycles.fill : cycleColors[index] }) .on("mouseover", (e, d) => { d3.select(e.currentTarget).attr("fill", "red") }) .on("mouseout", (e, d) => { d3.select(e.currentTarget).attr("fill", (d, i) => { console.log(style.cycles.fill) return style.cycles.fill }) }) .on("click", (e, d) => { d3.select(e.currentTarget) .attr("stroke", "red") .attr("stroke-width", () => scaleZoom(5)) }) svg .selectAll(".edges") .data(display.edges) .join("path") .attr("class", "edges") .attr("d", ([n1i, n2i]) => { const n1 = getNode(display.points, n1i) const n2 = getNode(display.points, n2i) if (!n1 || !n2) return return drawLine(x(n1.x), y(n1.y), x(n2.x), y(n2.y)) }) .attr("stroke-width", () => scaleZoom(1)) .attr("stroke", style.edges); svg .selectAll(".nodes") .data(display.points) .join("circle") .attr("class", "nodes") .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", () => scaleZoom(2)) .attr("fill", style.points) .append("title") .text(d => d.id); svg .selectAll(".to_merge") .data(display.mergePoints) .join("circle") .attr("class", "to_merge") .attr("cx", d => d.length > 0 ? x(d[0].x) : undefined) .attr("cy", d => d.length > 0 ? y(d[0].y) : undefined) .attr("r", () => scaleZoom(8)) .attr("fill-opacity", 0.0) .attr("stroke-width", () => scaleZoom(3)) .attr("stroke", "limegreen"); if (showBBox){ svg .append("rect") .attr("class", "bbox") .attr("x", x(bbox.xMin)) .attr("y", y(bbox.yMax)) .attr("width", xRange * _height) .attr("height", height / zoom) .attr("fill-opacity", 0.0) .attr("stroke-width", () => scaleZoom(3)) .attr("stroke", "red"); svg .append("circle") .attr("class", "bbox_center") .attr("cx", x(center.x)) .attr("cy", y(center.y)) .attr("r", () => scaleZoom(5)) .attr("fill", "red"); } return svg.node(); }31:[{"id":"673dc6cc9bb445540ada9f2c13013595c87584d280077aa1068f605c35aa26d69e3f8aba358f691b5a4c90e5220de5a93da084a61f78e8471a36e7ae7f28180f","href":"https://static.observableusercontent.com/files/673dc6cc9bb445540ada9f2c13013595c87584d280077aa1068f605c35aa26d69e3f8aba358f691b5a4c90e5220de5a93da084a61f78e8471a36e7ae7f28180f","name":"triangle@1.json","type":"application/json","lastModified":1670105849632.513,"size":4348},{"id":"ad1827034a8f1111f3678e0fff11a49abe8d84b1fb3a7391d572ba47d2bef82f65ee6f3797fa627c5e9829682313abdc5a1b36c70fd89be5033c13005e9737fc","href":"https://static.observableusercontent.com/files/ad1827034a8f1111f3678e0fff11a49abe8d84b1fb3a7391d572ba47d2bef82f65ee6f3797fa627c5e9829682313abdc5a1b36c70fd89be5033c13005e9737fc","name":"lines.json","type":"application/json","lastModified":1670211357164.612,"size":19299},{"id":"6e9d780baf2b467785813e62cf7eb51809abe383a2269a4226fd72653dab5587b8f49225a6337e8ad9bde519e46ef5fb4cd6edfeb802761c50499eed9f07955d","href":"https://static.observableusercontent.com/files/6e9d780baf2b467785813e62cf7eb51809abe383a2269a4226fd72653dab5587b8f49225a6337e8ad9bde519e46ef5fb4cd6edfeb802761c50499eed9f07955d","name":"test@3.json","type":"application/json","lastModified":1670107024805.541,"size":3327},{"id":"749ba3852b65dd019f0c290e77b3f5a1abacbf7b044febc16c9e17c6c61e77f17765fd1866e4921ffc260aecacb045add0ba89b01950af41009c2003659e60db","href":"https://static.observableusercontent.com/files/749ba3852b65dd019f0c290e77b3f5a1abacbf7b044febc16c9e17c6c61e77f17765fd1866e4921ffc260aecacb045add0ba89b01950af41009c2003659e60db","name":"aeron@1.json","type":"application/json","lastModified":1670107049087.283,"size":147566},{"id":"b5d2dc57f73c3ee5a4bb8dd4af53fb1bd85837a3eb4771203d92f91cc620f3180928ea4940b7e39d533f73f56eb5e0aa405e976a3eb24a3228a75838bdd7bfd3","href":"https://static.observableusercontent.com/files/b5d2dc57f73c3ee5a4bb8dd4af53fb1bd85837a3eb4771203d92f91cc620f3180928ea4940b7e39d533f73f56eb5e0aa405e976a3eb24a3228a75838bdd7bfd3","name":"eames@2.json","type":"application/json","lastModified":1670419784430.777,"size":147999},{"id":"5b0ab43416595ab3c0eb49c55dfc8f13d50c36f345694027ad719f9daa652f7def4b37453dbd02672cefb4a42e805cdc2fb9ef219d1514271a0e3660667b6ac4","href":"https://static.observableusercontent.com/files/5b0ab43416595ab3c0eb49c55dfc8f13d50c36f345694027ad719f9daa652f7def4b37453dbd02672cefb4a42e805cdc2fb9ef219d1514271a0e3660667b6ac4","name":"eames@3.json","type":"application/json","lastModified":1670419906559.263,"size":64055},{"id":"8cb31b14b6e512f0bffbc671540baf8750d299b06de331ae94195b7a0c4e3b844119b9d499ca06121ac7c326af658dde4da559c6964e0bb168e2bdbac4a87f86","href":"https://static.observableusercontent.com/files/8cb31b14b6e512f0bffbc671540baf8750d299b06de331ae94195b7a0c4e3b844119b9d499ca06121ac7c326af658dde4da559c6964e0bb168e2bdbac4a87f86","name":"ark.json","type":"application/json","lastModified":1700155149827.162,"size":39662}] 2e:{"title":"Minimum Cycle Basis","cells":[{"id":0,"value":"# Minimum Cycle Basis\n\nMessing with minimum cycle basis implementation.","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"### Sources\n- https://www.figma.com/blog/introducing-vector-networks/\n- https://alexharri.medium.com/the-engineering-behind-figmas-vector-networks-688568e37110\n- https://github.com/vbichkovsky/min-cycles/blob/master/src/cycles.js\n- https://www.geometrictools.com/Documentation/MinimalCycleBasis.pdf","pinned":false,"hidden":false,"mode":"md"},{"id":1484,"value":"#### Found ${display.cycles.length} cycle${display.cycles.length !== 1 ? \"s\" : \"\"}.","pinned":false,"hidden":false,"mode":"md"},{"id":1329,"value":"viewof drawing = Inputs.select(new Map([[\"Simple Merge\", FileAttachment(\"test@3.json\").json()],[\"Simple Split and Merge\", FileAttachment(\"triangle@1.json\").json()],[\"Complex Split and Merge\", FileAttachment(\"lines.json\").json()], [\"Aeron, Existing on Platform\", FileAttachment(\"aeron@1.json\").json()],[\"Eames, New Drawing\", FileAttachment(\"eames@3.json\").json()], [\"Ark\", FileAttachment(\"ark.json\").json()],]), {label: \"Select a drawing\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1615,"value":"viewof view = Inputs.radio([\"Demo\", \"Flat Graph\", \"Merged Graph\", \"Merged and Split Graph\"], {label: \"Select one\", value: \"Merged Graph\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1466,"value":"viewof allCycles = Inputs.toggle({label: \"All Cycles\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1464,"value":"viewof cycleIndex = Inputs.range([0, display.cycles.length - 1], {label: \"Cycle\", step: 1, disabled: allCycles})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1950,"value":"viewof showBBox = Inputs.toggle({label: \"Show bbox\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1883,"value":"viewof zoom = Inputs.range([0.125, 5], {label: \"Zoom\", step: 0.01, value: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2056,"value":"viewof panX = Inputs.range([-1000, 1000], {label: \"Pan X\", step: 1, default: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2058,"value":"viewof panY = Inputs.range([-1000, 1000], {label: \"Pan Y\", step: 1, default: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"display = {\n\n switch(view) {\n case \"Flat Graph\":\n return {points: graph, edges, cycles, mergePoints: toMerge}\n case \"Merged Graph\":\n return {points: merged, edges: edgesToMerge, cycles: mergedCycles, mergePoints: []}\n case \"Merged and Split Graph\":\n return {points: merged, edges: splitEdges, cycles: splitCycles, mergePoints: []}\n case \"Demo\":\n return {points: merged, edges: splitEdges, cycles: splitCycles, mergePoints: []}\n default:\n return {points: [], edges: [], cycles: [], mergePoints: []}\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2070,"value":"style = {\n switch(view) {\n case \"Demo\":\n return {\n points: \"#d0d7de\",\n edges: \"#d0d7de\",\n cycles: {\n stroke: \"#ff0000\",\n fill: \"#ffffff\",\n }, \n }\n default:\n return {\n points: \"#0000ff\",\n edges: \"#000000\", \n cycles: {\n stroke: \"#000000\",\n fill: \"#ffffff\",\n }, \n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1471,"value":"cycleColors = new Array(display.cycles.length).fill(1).map(v => chroma.random())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1482,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":352,"value":"## Create a Graph from a Drawing","pinned":false,"hidden":false,"mode":"md"},{"id":476,"value":"points = processDrawing((p,c,i,a) => {\n return [...p, { ...c.position, id: c.slug, adj: [ ] }]\n},[]).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1423,"value":"edges = processDrawing((p,c,i,a) => {\n return i < a.length - 1 ? [...p, [c.slug, a[(i + 1)].slug]] : p\n},[]).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"graph = addEdges(edges, points)","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"cycles = extract_cycles(graph)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"processDrawing = (fn,p) => drawing.reduce((prev,shape) => (shape.data && shape.data.geometry && shape.data.geometry.points) ? [...prev, Object.values(shape.data.geometry.points).sort((a, b) => a.order < b.order ? -1 : 1).reduce(fn,p)] : prev, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"bbox = toBbox(points)","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"## Merge Points to Create Vector Network","pinned":false,"hidden":false,"mode":"md"},{"id":808,"value":"rtree = new KDBush(points, p => p.x, p => p.y, 64, Float64Array)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2277,"value":"points","pinned":true,"hidden":false,"mode":"ojs"},{"id":930,"value":"toMerge = points.map(pt => rtree.within(pt.x, pt.y, 0.0000001).map(index => points[index])).filter(a => a.length > 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"mergeMap = toMerge.reduce((p,c) => {\n c.forEach(val => {\n p = { ...p, [val.id]: c[0].id }\n })\n return p\n},{})","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"toDelete = Object.keys(mergeMap).filter(val => !Object.values(mergeMap).includes(val))","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"pointsToMerge = points.map(p => ({...p, adj: []})).filter(p => !toDelete.includes(p.id))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"edgesToMerge = processDrawing((p,c,i,a) => { \n if (i >= a.length - 1) return p\n const curr = mergeMap[c.slug] ? mergeMap[c.slug] : c.slug\n const nextIndex = i + 1\n const nextSlug = a[nextIndex].slug\n const next = mergeMap[nextSlug] ? mergeMap[nextSlug] : nextSlug\n return [...p,[curr, next]]\n}, []).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"merged = addEdges(edgesToMerge, pointsToMerge)","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"mergedCycles = extract_cycles(merged)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1506,"value":"## Expanding the Graph","pinned":false,"hidden":false,"mode":"md"},{"id":1557,"value":"mergedTree = new KDBush(pointsToMerge, p => p.x, p => p.y, 64, Float64Array)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"value":"### Splitting Edges at Colinear Points","pinned":false,"hidden":false,"mode":"md"},{"id":1541,"value":"pointsMap = {\n const map = new Map()\n pointsToMerge.forEach((val) => map.set(val.id, val))\n return map\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1530,"value":"splitEdges = {\n\n const vmax = (pt) => Math.max(pt.x, pt.y)\n \n return edgesToMerge.reduce((prev,curr,index,array) => {\n const [a, b] = curr\n const ptA = pointsMap.get(a)\n const ptB = pointsMap.get(b)\n const {xMin, xMax, yMin, yMax} = toBbox([ptA, ptB])\n // potential intersections\n const intersects = mergedTree.range(xMin, yMin, xMax, yMax).map(i => pointsToMerge[i]).filter(pt => pointLine(ptA.x, ptA.y, ptB.x, ptB.y, pt.x, pt.y, 0));\n\n // no additional points intersecting line\n if (intersects.length <= 2) {\n return [...prev, curr]\n }\n\n // sort points from ptA to ptB\n intersects.sort((a, b) => {\n return distanceSquared(ptA.x, ptA.y, a.x, a.y) < distanceSquared(ptA.x, ptA.y, b.x, b.y) ? 1 : -1\n })\n\n const newEdges = intersects.reduce((p,c,i,arr) => {\n if (i == arr.length - 1) {\n return p\n }\n const newEdge = [c.id, arr[i+1].id]\n p.push(newEdge)\n return p\n },[])\n \n return [...prev, ...newEdges]\n },[])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1610,"value":"splitGraph = addEdges(splitEdges, pointsToMerge)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1612,"value":"splitCycles = extract_cycles(splitGraph.filter(n => n.adj.length > 0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2207,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":141,"value":"## Lib from [min-cycles](https://github.com/vbichkovsky/min-cycles/blob/master/src/cycles.js)","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"function extract_cycles(vertices, edges) {\n let cycles = [];\n while (vertices.length > 0) {\n let v = leftBottomVertex(vertices),\n walk = reduceWalk(closedWalkFrom(v));\n if (walk.length > 2) cycles.push(walk);\n removeEdge(walk[0], walk[1]);\n vertices = removeFilamentAt(walk[0], vertices);\n vertices = removeFilamentAt(walk[1], vertices);\n };\n return cycles;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"function leftBottomVertex(vertices) {\n return vertices.reduce( (m,v) => {\n let dx = v.x - m.x;\n if (dx < 0) return v;\n if (dx > 0) return m;\n return v.y - m.y < 0 ? m : v;\n } );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"function closedWalkFrom(v) {\n let walk = [], curr = v, prev;\n do {\n walk.push(curr);\n [curr, prev] = getNext(curr, prev);\n } while (curr.id !== v.id);\n return walk;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"function reduceWalk(w) {\n for (let i=1; i < w.length; i++) {\n let idup = w.lastIndexOf(w[i]);\n if (idup > i) w.splice(i+1, idup - i);\n }\n return w;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"function withoutVertex(v, vertices) {\n return vertices.filter(vi => vi.id !== v.id);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"function removeEdge(a, b) {\n a.adj = withoutVertex(b, a.adj);\n b.adj = withoutVertex(a, b.adj);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"function removeFilamentAt(v, vertices) {\n let current = v, next;\n while (current && current.adj.length < 2) {\n vertices = withoutVertex(current, vertices);\n next = current.adj[0];\n if (next) removeEdge(current, next);\n current = next;\n }\n return vertices;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"function getNext(v, prev) {\n let next = (v.adj.length == 1) ? v.adj[0] : best_by_kind(prev, v, prev ? 'ccw' : 'cw');\n return [next, v];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"function best_by_kind(v_prev, v_curr, kind) {\n let d_curr, adj = v_curr.adj;\n if (v_prev) {\n d_curr = vsub(v_curr, v_prev);\n adj = withoutVertex(v_prev, adj);\n } else {\n d_curr = {x: 0, y: -1};\n }\n \n return adj.reduce((v_so_far, v) => better_by_kind(v, v_so_far, v_curr, d_curr, kind));\n};\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"function better_by_kind(v, v_so_far, v_curr, d_curr, kind) {\n let d = vsub(v, v_curr),\n d_so_far = vsub(v_so_far, v_curr),\n is_convex = dot_perp(d_so_far, d_curr) > 0,\n curr2v = dot_perp(d_curr, d),\n vsf2v = dot_perp(d_so_far, d),\n v_is_better;\n if (kind == 'cw') {\n v_is_better = (is_convex && (curr2v >= 0 || vsf2v >= 0)) || (!is_convex && curr2v >= 0 && vsf2v >= 0);\n } else {\n v_is_better = (!is_convex && (curr2v < 0 || vsf2v < 0)) || (is_convex && curr2v < 0 && vsf2v < 0);\n }\n return v_is_better ? v : v_so_far;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"function vsub(a, b) {\n return {x: a.x - b.x, y: a.y - b.y};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"function dot_perp(a, b) {\n return a.x * b.y - b.x * a.y;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"### Graph utils","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"function a2v([x,y], id) {\n return {x, y, adj: [], id};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"function addEdges(edges, _nodes) {\n const newNodes = _nodes.map(n => ({...n, adj: [...n.adj]}));\n edges.forEach(([ai,bi]) => {\n const a = getNode(newNodes, ai);\n const b = getNode(newNodes, bi);\n if (!a || !b) return\n // prevent the same edge being added twice \n if (a.adj.includes(b) || b.adj.includes(a)) {\n // console.log('yellow')\n return\n }\n a.adj.push(b);\n b.adj.push(a);\n });\n return newNodes\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"getNode = (nodes, id) => nodes.find(n => n.id === id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1502,"value":"## Lib from [intersects](https://github.com/davidfig/intersects/blob/master/line-point.js)","pinned":false,"hidden":false,"mode":"md"},{"id":1572,"value":"distanceSquared = {\n const factor = 10000;\n \n // https://github.com/davidfig/intersects/blob/master/line-point.js\n function distanceSquared(x1, y1, x2, y2)\n {\n return Math.sqrt(Math.pow(x1 * factor - x2 * factor, 2) + Math.pow(y1 * factor - y2 * factor, 2))\n }\n \n return distanceSquared\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"pointLine = {\n /**\n * line-point collision\n * from https://stackoverflow.com/a/17693146/1955997\n * @param {number} x1 first point in line\n * @param {number} y1 first point in line\n * @param {number} x2 second point in line\n * @param {number} y2 second point in line\n * @param {number} xp point\n * @param {number} yp point\n * @param {number} [tolerance=1]\n * @return {boolean}\n */\n function linePoint(x1, y1, x2, y2, xp, yp, tolerance)\n {\n tolerance = tolerance || 1\n return Math.abs(distanceSquared(x1, y1, x2, y2) - (distanceSquared(x1, y1, xp, yp) + distanceSquared(x2, y2, xp, yp))) <= tolerance\n }\n\n return linePoint\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1549,"value":"### Utils","pinned":false,"hidden":false,"mode":"md"},{"id":1544,"value":"toBbox = (pts) => \n pts.reduce((p,c,i) => {\n if (c.x < p.xMin) p.xMin = c.x\n if (c.x > p.xMax) p.xMax = c.x\n if (c.y < p.yMin) p.yMin = c.y\n if (c.y > p.yMax) p.yMax = c.y\n \n return p\n },{xMin: 1000, xMax: -1000, yMin: 1000, yMax: -1000 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"### Enums","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"height = 450","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"### Require","pinned":false,"hidden":false,"mode":"md"},{"id":798,"value":"KDBush = require(\"kdbush@3.0.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1456,"value":"chroma = import('https://unpkg.com/chroma-js@3.1.2/index.js?module')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}