30:T435,viewof show = inputsGroup( [ [ checkbox({ value: 'show', options: [{ value: "", label: 'Show Dots Grid' }] }), checkbox({ value: 'show', options: [{ value: "", label: 'Show Dots Major'}] }), checkbox({ value: 'show', options: [{ value: "", label: 'Show Dots Minor' }] }), ], [ checkbox({ value: '', options: [{ value: "", label: 'Show Horizontal Lines' }] }), checkbox({ value: '', options: [{ value: "", label: 'Show Horizontal Lines Major' }] }), checkbox({ value: '', options: [{ value: "", label: 'Show Horizontal Lines Minor' }] }), ], [ checkbox({ value: '', options: [{ value: "", label: 'Show Vertical Lines' }] }), checkbox({ value: '', options: [{ value: "", label: 'Show Vertical Lines Major' }] }), checkbox({ value: '', options: [{ value: "", label: 'Show Vertical Lines Minor' }] }), ] ], [ ["dotsGrid", "dotsMajor", "dotsMinor"], ["lineHorizontal", "horizontalLinesMajor", "horizontalLinesMinor"], ["lineVertical", "verticalLinesMajor", "verticalLinesMinor"], ] )31:T700,md` Let’s say you have a 16:9 field and you want a grid on it. * The simplest grid is a field of 16×9 square tiles with a dot smack in its middle. * To align the tile’s center with the origin, shift the whole field half a square along \`x = y\`. * An added minor grid with smaller dots and a higher frequency allows for finer positioning. * At times, a horizontal line grid comes in handy, too. Simply draw a horizontal line through the middle of each tile. * Add a similar vertical grid, _et voilà_, you’ve got a fully squared grid. * Just like with the minor dot grid, you can add a finer horizontal and/or vertical line grid—thinner lines, higher frequency—for finer positioning. ### Grid Implementation * There is a total of ${grids.length} grid variants (see \`grids[]\` below): 1. dots major ~~~js {} // uses just the defaults ~~~ 1. dots minor ~~~js { frequency: ƒ, r: 1 } // ups the frequency and uses smaller dots ~~~ 1. lines major horizontal ~~~js { kind: "line" } ~~~ 1. lines major vertical ~~~js { kind: "line", orientation: "vertical" } ~~~ 1. lines minor horizontal ~~~js { kind: "line", frequency: ƒ, strokeWidth: 1/2 } ~~~ 1. lines minor vertical ~~~js { kind: "line", frequency: ƒ, orientation: "vertical", strokeWidth: 1/2} ~~~ * Each variant: * is based on a 36×36 tile with a dot in or line through its middle; * has its own distinct \`svg pattern\`; * can be shown or hidden by setting the \`svg pattern\`’s visibility attribute accordingly; * is used as the \`fill\` property of an \`svg rect\`. * For minor grids, the 36×36 tile is divided by the frequency ƒ. For example, with ƒ = ${ƒ}, each tile will be ${(unit/ƒ).toFixed(2)}×${(unit/ƒ).toFixed(2)} (hence the 36 as a base, easily dividable by 2, 3, 4, 6, 9, 12 and 18). `32:T569,grids = (film) => { const ƒ = 3 // leaf nodes: original simple patterns // default is a major dot grid const dotsMajor = pattern(film, { }) const dotsMinor = pattern(film, { frequency: ƒ, radius: 1 }) // for a minor thinner line grid, up the frequency const lineMinorHorizontal = pattern(film, { kind: "line", frequency: ƒ, strokeWidth: 1/2 }) // default for line is major horizontal const lineMajorHorizontal = pattern(film, { kind: "line", strokeColor: "red" }) // major vertical lines turn existing horizontal lines into a grid // like above, crossing const lineMinorVertical = pattern(film, { kind: "line", frequency: ƒ, orientation: "vertical", strokeWidth: 1/2}) const lineMajorVertical = pattern(film, { kind: "line", orientation: "vertical" }) // parent nodes: composite – patterns of patterns [of patterns...] // all grids in a single stack; note that the order is relevant: last grid on top: dots on top const allGrids = stack( film, [lineMajorHorizontal, lineMinorHorizontal, lineMajorVertical, lineMinorVertical, dotsMinor, dotsMajor ] ) // expose only the ones you want them to see (in this case all of them) return ({ dotsMajor, dotsMinor, lineMajorHorizontal, lineMinorHorizontal, lineMajorVertical, lineMinorVertical, allGrids }) }33:T713,precooked = (film) => { const ƒ = 4 // leaf nodes: original simple patterns // default is a major dot grid const dotsMajor = pattern(film, { }) const dotsMinor = pattern(film, { frequency: ƒ, radius: 1 }) // default for line is major horizontal const lineMajorHorizontal = pattern(film, { kind: "line" }) // major vertical lines turn existing horizontal lines into a grid const lineMajorVertical = pattern(film, { kind: "line", orientation: "vertical" }) // for a minor thinner line grid, up the frequency const lineMinorHorizontal = pattern(film, { kind: "line", frequency: ƒ, strokeWidth: 1/2 }) // like above, crossing const lineMinorVertical = pattern(film, { kind: "line", frequency: ƒ, orientation: "vertical", strokeWidth: 1/2}) // parent nodes: composite – patterns of patterns [of patterns...] const dots = stack(film, [dotsMajor, dotsMinor]) const squareMajor = stack(film, [lineMajorHorizontal, lineMajorVertical]) const squareMinor = stack(film, [lineMinorHorizontal,lineMinorVertical]) const square = stack(film, [squareMajor, squareMinor]) const dotsnsquare = stack(film, [dots, square]) // all grids in a single stack so you can tweak each one individually const allGrids = stack( film, [ dots, square, dotsnsquare, lineMajorHorizontal, lineMajorVertical, lineMinorHorizontal, lineMinorVertical, dotsMinor, dotsMajor ] ) // expose only the ones you want them to see (in this case all of them) return ({ dots, square, dotsnsquare, dotsMajor, dotsMinor, lineMajorHorizontal, lineMajorVertical, squareMajor, lineMinorHorizontal, lineMinorVertical, squareMinor, allGrids }) }34:Ta72,function pattern(film, { kind = "dots", orientation = "horizontal", radius = 2, fillColor = "steelblue", strokeColor = "steelblue", strokeWidth = kind === "dots" ? 0 : 1, frequency = 1 }) { const resolution = unit const ƒ = resolution / frequency const {d, x, y} = sizer(kind, orientation, ƒ / 2) const fill = DOM.uid(kind) const defs = define(film) const pattern = defs.append("pattern") .attr("id", fill.id) .attr("x", x) .attr("y", y) .attr("width", ƒ) .attr("height", ƒ) .attr("patternUnits", "userSpaceOnUse") let element if (kind === "dots") { element = pattern.append("circle") .attr("r", radius) .attr("fill", fillColor) .attr("stroke", strokeColor) .attr("stroke-width", strokeWidth) .attr("cx", x) .attr("cy", y) } if (kind === "line") { element = pattern.append("path") .attr("d", `M${x} ${y}${d}${resolution}`) .attr("stroke", strokeColor) .attr("stroke-width", strokeWidth) .attr("fill", "transparent") } return { get fill() { return fill }, get kind() { return kind }, // pattern, // element, toggle(t) { toggler(pattern, t) return this }, get visibility() { return pattern.attr("visibility") }, frequency(f) { if (f === undefined) { // f = ƒ return f } else { f = resolution / f const {d, x, y} = sizer(kind, orientation, f / 2) pattern.attr("x",x), pattern.attr("y",y), pattern.attr("width",f), pattern.attr("height",f) const [xx, yy] = kind === "line" ? ["x", "y"] : ["cx", "cy"] if (kind === "dots") { element.attr("cx", x) element.attr("cy", y) } if (kind === "line") { element.attr("d", `M${x} ${y}${d}${resolution}`) } return this } }, radius(n) { if (n === undefined) return radius else { radius = n element.attr("r", radius) return this } }, fillColor(c) { if (c === undefined) return fillColor else { fillColor = c element.attr("fill", fillColor) return this } }, strokeColor(c) { if (c === undefined) return strokeColor else { strokeColor = c element.attr("stroke", strokeColor) return this } }, strokeWidth(w) { if (w === undefined) return strokeWidth else { strokeWidth = w element.attr("stroke-width", strokeWidth) return this } }, node() { return film.node() }, } }35:T102b,{ const { wide, tall, resolution, aspect, tileSize, tileCenter, radius, uidDot } = grid(); const majorGrid = `${wide} × ${tall}`; const µGrid = `${resolution} × ${resolution}`; return md` ## To create a dot grid Suppose you want to show a grid in an area *wide*:*tall* (*wide*, *tall* ∈ ℕ)—say, 4:3, 5:3, 16:9, 16:10, or 13:8—by putting a little dot on each of the grid points. One way of creating a dot grid is: 1. Imagine your area is filled with square tiles. 1. Shift all tiles half a tile along its diagonal (any direction will do). 1. Put a dot exactly in the center—at half the tile’s size—of each tile. You can use an [\`svg pattern\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns) to achieve this. For example, let’s pick a **major grid of ${wide}:${tall}**. Let α be the aspect ratio: α = ${wide} ÷ ${tall}. ### To create a minor grid A grid of ${majorGrid} is quite course, still. You probably also need a minor grid, subdividing the major grid. Let’s call this the **frequency** of the grid. For example, a frequency of 1 implies no subdivisions, and a frequency of 3 implies that each tile is subdivided into 3 × 3 mini tiles. To create a finer grained minor grid, simply divide the tile size by the frequency. Since both the center and the diagonal shift are relative to the mini tile’s size, the dot still shows at the right position. ### To use high resolution To allow high resolution for very fine positioning, subdivide each major tile in ${resolution} µtiles (micro tiles). If ${resolution} is an [abundant number](https://en.wikipedia.org/wiki/Abundant_number), it contains conveniently many divisors. E.g. 36 can by wholly divided by 2, 3, 4, 6, 9, 12, and 18. This allows you to work with whole numbers only (ℕ). So, you end up with ${majorGrid} tiles, each containing ${µGrid} µtiles. Your user space in µtiles then will be ${resolution} × ${wide} = ${resolution * wide} wide, and ${resolution} × ${tall} = ${resolution * tall} tall. Each major tile will consist of ${ƒ} minor tiles, ${resolution / ƒ} µtiles each. ### To create an area of ${majorGrid} tiles, each with ${µGrid} µtiles 1. Create an \`
\`\`\`js \`\`\`js viewBox="0 0 ${resolution * wide} ${resolution * tall}" \`\`\` ### To put a little dot in the center of each tile 1. In the SVG \`\` section, create a pattern:
\`\`\`js \`\`\`js patternUnits="userSpaceOnUse" \`\`\` 1. Make it a square of size ${tileSize} × ${tileSize}:
\`\`\`js width="${tileSize}" heigth="${tileSize}" \`\`\` 1. Shift the tile half a tile along *x* = *y*:
\`\`\`js x="${tileCenter}" y="${tileCenter}" > \`\`\` 1. Create small circle in the center at (${tileCenter}, ${tileCenter}):
\`\`\`js \`\`\` 1. Make sure you can refer to it across notebooks:
\`\`\`js id="${uidDot.id}" \`\`\` 1. Close the pattern:
\`\`\`js \`\`\` ### To use the pattern with a graphic element like a \`\` You can now use this fill pattern with any \`
\`\`\`js \`\`\` ## Square grid The square grid uses the same technique as the dot grid. The differences are: * tiles are now stripes: * horizontally ${aspect.width} × ${tileSize} (${aspect.width / resolution}:${tileSize / resolution}); and * vertically ${tileSize} × ${aspect.height} (${aspect.height / resolution}:${tileSize / resolution}); * both the horizontal and vertical stripes have their own \`\`, yet share the \`\` appearance. `; }36:Tccc,function grid(configuration = {}) { const { wide = 16, tall = 9, resolution = 36, frequency = 1, type = "dotted", scale = [1, 1], radius = ".2%", strokeWidth = 0.5, color = "steelblue", horizon = width } = configuration; return { horizon, wide, tall, resolution, frequency, aspect: { width: wide * resolution, height: tall * resolution }, get viewBox() { return `0 0 ${this.aspect.width} ${this.aspect.height}`; }, tileSize: resolution, // frequency, get tileCenter() { return this.tileSize / 2; }, radius, M: n => (n == undefined ? 1 : n) * resolution, m: n => ((n == undefined ? 1 : n) * resolution) / 4, µ: n => ((n == undefined ? 1 : n) * resolution) / 12, uidDot: DOM.uid("dot"), uidH: DOM.uid("gridlineH"), uidV: DOM.uid("gridlineV"), uidHairline: DOM.uid("hairline"), get svg() { return ` `; } }; function squared(uidH, uidV) { return ` `; } function dotted(uidH, uidV) { return ``; } function gridLines(tileSize, frequency, orientation, id) { const step = tileSize / frequency const x = orientation == "h" ? "x" : "y" const y = orientation == "h" ? "y" : "x" let g = `\n` if (frequency > 1) for (let i = step; i < tileSize; i += step) { g += `\n` } g += `` return g } }37:T4b8,function checkbox(config = {}) { let { value: formValue, title, description, submit, disabled, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? true : false; }, form: html` ` }); form.output.remove(); return form; }38:[] 2e:{"title":"Grid","cells":[{"id":0,"value":"md`# Grid`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2786,"value":"md`**An evenly spaced grid provides a pleasant visual rhythm, and eases quick and accurate positioning of objects that snap to that grid.**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7825,"value":"viewof ρ = {\n const s = slider({\n min: 0.1,\n max: 10,\n value: 1,\n title: \"Zoom\"\n });\n s.querySelector('input').style.width = \"80%\";\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3595,"value":"hero.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3593,"value":"viewof ƒ = slider({\n min: 0,\n max: unit,\n step: 1,\n value: 3,\n title: \"Frequency\",\n description: `Subdivisions of single grid square—must have minor grid visible to see its effect`\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3803,"value":"viewof τ = slider({\n min: 1,\n max: unit,\n step: 1,\n value: 9,\n title: \"Tall\",\n description: \"Height of the grid in units\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7792,"value":"hero.film.attr(\"viewBox\", [0,0,576,36*τ]).attr(\"height\", width/16*τ).attr(\"width\", width*ρ)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3576,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":3602,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7324,"value":"md`## Hero image\nFirst define the grids. Next, set up the hero \\`svg\\` and fill it with all the grids. The hero togglers, driven by the checkboxes, will show and hide the selected patterns.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5998,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":6017,"value":"hero = {\n const film = \n ratio().foil().attr(\"preserveAspectRatio\", \"xMinYMin slice\")\n // ratio({aspect:[16,τ], zoom:ρ}).foil()\n const grid = grids(film) // creates the default grids\n grid.dotsMajor\n .fillColor(\"white\") // modify some default attributes\n .strokeColor(\"red\")\n .strokeWidth(1)\n filler(film, grid.allGrids.fill)\n return {\n ...grid,\n film,\n node() { return film.node() },\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7317,"value":"heroControls = [\n hero.dotsMajor.toggle(show.dotsGrid && show.dotsMajor).visibility,\n hero.dotsMinor.toggle(show.dotsGrid && show.dotsMinor).visibility,\n\n hero.lineMajorHorizontal.toggle(show.lineHorizontal && show.horizontalLinesMajor).visibility,\n hero.lineMinorHorizontal.toggle(show.lineHorizontal && show.horizontalLinesMinor).visibility,\n\n hero.lineMajorVertical.toggle(show.lineVertical && show.verticalLinesMajor).visibility,\n hero.lineMinorVertical.toggle(show.lineVertical && show.verticalLinesMinor).visibility,\n hero.dotsMinor.frequency(ƒ).frequency(),\n hero.lineMinorVertical.frequency(ƒ).frequency(),\n hero.lineMinorHorizontal.frequency(ƒ).frequency(),\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":7835,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":7839,"value":"gridder = (film) => {\n const grid = precooked(film) // creates the default grids\n grid.square.toggle(\"hidden\")\n filler(film, grid.dotsnsquare.fill)\n return {\n ...grid,\n film,\n node() { return film.node() },\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7841,"value":"x = gridder(ratio().foil())\n//.film.attr(\"opacity\", .2).node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":7913,"value":"x.lineMajorHorizontal.toggle()","pinned":true,"hidden":false,"mode":"ojs"},{"id":7920,"value":"x.node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":7346,"value":"md`## Las Vegas\nJust for fun, show off a gallery flashy grids and compositions.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7504,"value":"vegas.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":7525,"value":"fullscreen(vegas.node())","pinned":false,"hidden":false,"mode":"ojs"},{"id":7521,"value":"viewof kleur = color({\n value: \"#006d8f\",\n title: \"Horizontal Lines Major Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7537,"value":"viewof vegasStrokeWidth = slider({\n min: 1,\n max: unit,\n // step: 1,\n value: 1,\n title: \"Horizontal Lines Width\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7517,"value":"viewof vegasShowLinesHorizontalMajor = checkbox({\n options: [\n { value: \"visible\", label: \"Horizontal Lines Major\" },\n ],\n value: \"visible\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7509,"value":"viewof radius = Scrubber(numbers, {delay:50, alternate:true, autoplay: false, initial: 4})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7512,"value":"vegas.pH.toggle(vegasShowLinesHorizontalMajor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4247,"value":"vegas = {\n const dims = ratio({aspect:[16,8]})\n const film = dims.foil()\n\n const pH = pattern(film, {kind:\"line\", strokeColor: kleur})\n const ph = pattern(film, {kind:\"line\", frequency:4, strokeWidth: .5})\n const pV = pattern(film, {kind:\"line\", orientation:\"vertical\"})\n const pv = pattern(film, {kind:\"line\", orientation:\"vertical\", frequency:4})\n const pD = pattern(film, {frequency:1, fillColor:\"white\", strokeColor:\"green\", strokeWidth:2})\n const pd = pattern(film, {frequency:3, radius:1})\n const bg = pattern(film, {frequency:2, radius:1, fillColor:\"red\"})\n\n const p = [pH, pV, ph]\n const q = stack(film, p)\n const s = [q, pd, pD]\n const r = stack(film, s)\n\n filler(film, bg.fill).attr(\"opacity\", .2) // show a faint background minor grid\n \n const panel =\n [\n [...p, q],\n [...s, r]\n ]\n panel.forEach(\n (row, r) => row.forEach(\n (col, c) => boxer(film, dims, [c, r], [3, 3], col.fill)\n )\n )\n\n return {node() { return film.node() }, film, pH, ph, pV, pv, pD, pd, q, r}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7484,"value":"md`\\`boxer()\\` shows a number of basic patterns and some compositions based on them, each in its own box.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4252,"value":"function boxer(film, dims, [x, y], [w, h], fill) {\n const origin = .5\n const gap = 1\n const s = (n, f) => dims.M(origin + n * (f + gap)) // increments n * (size of box + 1)\n\n film\n .append(\"svg\")\n .attr(\"width\", dims.M(w))\n .attr(\"height\", dims.M(h))\n .attr(\"x\", s(x, w))\n .attr(\"y\", s(y, h))\n\n .append(\"rect\")\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .attr(\"fill\", fill)\n .attr(\"stroke\", \"grey\")\n .attr(\"stroke-width\", 1)\n .attr(\"stroke-dasharray\", 2)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7540,"value":"vegas.pH.strokeWidth(vegasStrokeWidth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6332,"value":"vegas.pV.strokeColor(\"purple\").strokeWidth(4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4774,"value":"vegas.pD.radius(radius)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4677,"value":"numbers = Array.from({length: 2/3*unit}, (_, i) => i)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5054,"value":"tick = {\n const bpm = 1\n \n const interval = 60000/bpm\n let i = 0\n while (true) { \n yield Promises.tick(interval).then(() => i++);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7373,"value":"md`## The core: \\`pattern()\\` and \\`stack()\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4925,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":4392,"value":"function stack(film, patterns) {\n const fill = DOM.uid(\"stack\")\n const defs = define(film)\n const pattern = defs.append(\"pattern\").attr(\"id\", fill.id)\n // console.log(patterns)\n pattern\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n pattern.selectAll(\"_\")\n .data(patterns)\n .enter()\n .append(\"rect\")\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .attr(\"fill\", d => d.fill)\n return { \n fill, \n pattern,\n toggle(t) { toggler(pattern, t); return this },\n get visibility() { return pattern.attr(\"visibility\") },\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5478,"value":"sizer = (kind, orientation, center) => kind === \"line\"\n? orientation === \"vertical\"\n ? { d: \"V\", y: 0, x: center }\n : { d: \"H\", x: 0, y: center }\n: { d: \"?\", x: center, y: center } // dots\n// orientation simply swaps x and y for both path and pattern","pinned":false,"hidden":false,"mode":"ojs"},{"id":6687,"value":"function toggler(pattern, visibility) {\n const v = pattern.attr(\"visibility\")\n const n = visibility === undefined \n ? v === \"hidden\" \n ? \"visible\" \n : \"hidden\" \n : showhide(visibility)\n pattern.attr(\"visibility\", n)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3619,"value":"md`### Ye Olde Gridd`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2815,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2722,"value":"md`## More…\n* [Grid Table](https://beta.observablehq.com/@martien/grid-table)\n* [Aspect Ratio](https://beta.observablehq.com/@martien/aspect-ratio)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2820,"value":"md`# \\`grid()\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2774,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":7459,"value":"md`## Units\nSet up some basic units.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3573,"value":"unit = ratio().resolution","pinned":false,"hidden":false,"mode":"ojs"},{"id":4642,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7422,"value":"md`Switch any \\`svg.node()\\` to full screen.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4643,"value":"function fullscreen (cell) {\n const button = html`