${title}

31:T356f,nbLatt = ({"id":"0d0d4e55f05ea8aa","slug":"lattice-reduction","trashed":false,"likes":10,"forks":0,"fork_of":null,"thumbnail":null,"owner":{"id":"5c13a1a27cf52564","github_id":"5209952","avatar_url":"https://avatars3.githubusercontent.com/u/5209952?v=4","login":"bryangingechen","name":"Bryan Gin-ge Chen","bio":"here to learn","home_url":"","type":"individual"},"creator":{"id":"5c13a1a27cf52564","github_id":"5209952","avatar_url":"https://avatars3.githubusercontent.com/u/5209952?v=4","login":"bryangingechen","name":"Bryan Gin-ge Chen","bio":"here to learn","home_url":""},"collections":[],"update_time":"2019-03-06T01:22:45.359Z","publish_time":"2019-01-30T22:46:52.106Z","publish_version":223,"edit_unpublished":false,"version":223,"title":"Lattice reduction","nodes":[{"id":0,"value":"md`# Lattice reduction`","pinned":false},{"id":32,"value":"md`Lattice basis vectors (in pixels):
\n${lilDot('rgba(128,255,128,1)')} ${tex`\\vec{a}=(${pic.lattice.ax.toPrecision(4)},${pic.lattice.ay.toPrecision(4)})`},
\n${lilDot('rgba(128,128,255,1)')} ${tex`\\vec{b}=(${pic.lattice.bx.toPrecision(4)},${pic.lattice.by.toPrecision(4)})`}. \n\nDrag these two dots below to modify the basis vectors, or drag anywhere else to rotate / zoom. After releasing, the lattice basis is [reduced](https://en.wikipedia.org/wiki/Lattice_reduction), resulting in an equivalent, but shorter basis.\n\n*Algorithm used here taken from Chapter 17 of Steven Galbraith's book [\"Mathematics of Public Key Cryptography\"](https://www.math.auckland.ac.nz/~sgal018/crypto-book/crypto-book.html).*`","pinned":false},{"id":28,"value":"{\n const div = html`

`;\n const resetButton = html`

${md`Sometimes the Voronoi cells show spurious lines. Sorry about that. See [this Delaunator issue](https://github.com/mapbox/delaunator/issues/43).`}

\n`);\n div.addEventListener('uncheck', () => {\n div.m.valueAsNumber = 15;\n div.n.valueAsNumber = 15;\n div.labelPoints.checked = true;\n div.dispatchEvent(new CustomEvent('input'));\n });\n return div;\n}","pinned":false},{"id":177,"value":"md`**See also:** I stole some tricks from Mike Bostock's [\"Regular plane tilings\"](/@mbostock/regular-plane-tilings/2) in the update of this notebook, namely, using [d3-interpolate](https://github.com/d3/d3-interpolate) to animate the \"randomize\", \"square\" and \"triangle\" buttons & adding random jitter to fix the Voronoi cells.`","pinned":false},{"id":69,"value":"md`## Appendix`","pinned":false},{"id":15,"value":"height = 720","pinned":false},{"id":17,"value":"// Algorithm 23 in Chapter 17: Lattice Basis Reduction \n// from version 2.0 of the book “Mathematics of Public Key Cryptography”\n// by Steven Galbraith\n// https://www.math.auckland.ac.nz/~sgal018/crypto-book/crypto-book.html\nfunction reduceBasis(b1,b2) {\n // dot product\n function dp(u,v) {\n return u[0]*v[0] + u[1]*v[1];\n }\n let B1 = dp(b1,b1);\n let mu = Math.round(dp(b1,b2)/B1);\n b2[0] -= mu * b1[0];\n b2[1] -= mu * b1[1];\n let B2 = dp(b2,b2);\n while (B2 < B1) {\n [b1,b2] = [b2,b1];\n B1 = B2;\n mu = Math.round(dp(b1,b2)/B1);\n b2[0] -= mu * b1[0];\n b2[1] -= mu * b1[1];\n B2 = dp(b2,b2);\n }\n return [b1,b2];\n}","pinned":true},{"id":6,"value":"function getParticles(m,n, {ax, ay, bx, by}) {\n const particles = [];\n for (let j = -m; j <= m; ++j) {\n const xj = j * ax;\n const yj = - j * ay;\n for (let i = -n; i <= n; ++i) {\n const p = [xj + i*bx + (1e-6*Math.random()), yj-i*by]; // jitter\n p.i = i;\n p.j = j;\n particles.push(p);\n }\n }\n return particles;\n}","pinned":false},{"id":7,"value":"function renderVoronoi(context, {particles}, {ax, ay, bx, by}, extra=1) {\n const w = extra*Math.max(Math.abs(ax), Math.abs(bx));\n const h = extra*Math.max(Math.abs(ay), Math.abs(by));\n const delaunay = new d3.Delaunay.from(particles.filter(\n d=> d[0] >-width/2-w && d[0] < width/2+w && \n d[1] >-height/2-h && d[1] < height/2+h));\n const voronoi = delaunay.voronoi([-width/2, -height/2, width/2, height/2]);\n context.save();\n context.translate(width / 2, height / 2);\n context.strokeStyle = 'rgba(0,128,128,1)'\n context.lineWidth = '2';\n context.beginPath();\n voronoi.render(context);\n context.stroke();\n context.restore();\n return voronoi;\n}","pinned":false},{"id":9,"value":"function renderLattice(context, {particles}, style=null) {\n context.save();\n const w = width;\n const h = height;\n context.translate(w / 2, h / 2);\n const pp = particles.filter(([x,y]) => x+3 > -w/2 && x-3 < w/2 && y+3 > -h/2 && y-3 < h/2);\n for (const p of pp) {\n context.beginPath();\n context.arc(p[0], p[1], 3, 0, 2 * Math.PI);\n context.fillStyle = style ||\n \"rgba(0,150,0,1)\";\n context.fill();\n }\n context.restore();\n}","pinned":false},{"id":11,"value":"function renderBasis(context, {ax, ay, bx, by}, clicked=null) {\n context.save();\n context.translate(width / 2, height / 2);\n // draw parallelogram\n context.beginPath();\n context.moveTo(0,0);\n context.lineTo(ax,-ay);\n context.lineTo(ax+bx,-ay-by);\n context.lineTo(bx,-by);\n context.lineTo(0,0);\n context.lineWidth = '3';\n context.strokeStyle = 'rgba(255,0,255,1)';\n context.stroke();\n context.lineWidth = '2';\n // a\n context.beginPath();\n context.arc(ax, -ay, clicked === 'a' ? 11 : 8, 0, 2 * Math.PI);\n context.fillStyle = 'rgba(128,255,128,1)';\n context.fill();\n if (clicked === 'a')\n context.stroke();\n context.beginPath();\n context.arc(ax, -ay, 3, 0, 2 * Math.PI);\n context.fillStyle = 'rgba(0,150,0,1)';\n context.fill();\n // b\n context.beginPath();\n context.arc(bx, -by, clicked === 'b' ? 11 : 8, 0, 2 * Math.PI);\n context.fillStyle = 'rgba(128,128,255,1)';\n context.fill();\n if (clicked === 'b')\n context.stroke();\n context.beginPath();\n context.arc(bx, -by, 3, 0, 2 * Math.PI);\n context.fillStyle = 'rgba(0,150,0,1)';\n context.fill();\n // a+b\n context.beginPath();\n context.arc(ax+bx, -ay-by, 5, 0, 2 * Math.PI);\n context.fillStyle = 'rgba(255,128,128,1)';\n context.fill();\n context.beginPath();\n context.arc(ax+bx, -ay-by, 3, 0, 2 * Math.PI);\n context.fillStyle = 'rgba(0,150,0,1)';\n context.fill();\n // origin\n context.beginPath();\n context.arc(0, 0, 5, 0, 2 * Math.PI);\n context.fillStyle = 'rgba(255,0,0,1)';\n context.fill();\n context.beginPath();\n context.arc(0, 0, 3, 0, 2 * Math.PI);\n context.fillStyle = 'rgba(0,150,0,1)';\n context.fill();\n context.restore();\n}","pinned":false},{"id":13,"value":"function renderTextLattice(context, {particles}, {shift,text,textFunc,font,fontSize,fillStyle}) {\n context.save();\n const w = width;\n const h = height;\n context.translate(w / 2, h / 2);\n context.font = font || `${fontSize || 25}px serif`;\n context.fillStyle = fillStyle || 'white';\n shift = shift || ((fontSize || 25)/ 2);\n const pp = particles.filter(([x,y]) => x+shift > -w/2 && x-shift < w/2 && y+shift > -h/2 && y-shift < h/2);\n for (const p of pp) {\n context.fillText(text || textFunc(p), p[0]-shift, p[1]+shift);\n }\n context.restore();\n}","pinned":false},{"id":38,"value":"function lilDot(color, fill=true) {\n return ``\n}","pinned":false},{"id":19,"value":"d3 = require(\"d3@5\", \"d3-delaunay@4\")","pinned":false},{"id":51,"value":"import {form} from \"@mbostock/form-input\"","pinned":false}]})32:T102c,getSource = md_`## Getting the source So, how *do* you get a hold of one of these notebook objects? As mentioned above, these notebook objects are used by Observable's editor. In fact, the Observable API actually serves up these notebook objects if you make a proper request to \`https://api.observablehq.com/document/your-notebook-id\`. However, the API requires that you make the request with origin \`https://observablehq.com\`, so it's tough to do this from a notebook. (In principle it should be possible with a suitable CORS proxy, but I haven't tried too hard to get one to work.) Here are some options for getting a notebook object (as of Apr. 7, 2019) (please do let me know via a notebook suggestion if any of these fail to work!): 1. You can manually construct a notebook object (this is what's done [in the first cell](#embed1) above) / copy+paste your notebook cells into its \`nodes\` array. This isn't going to be very fun for large-ish notebooks, so I don't recommend it. 2. Whenever your browser loads an Observable notebook, the server will send it a notebook object as JSON, and this is then processed by the notebook page into live code. You can open up the network tab of your browser's dev tools and copy+paste the notebook JSON from the response to the XHR request to \`https://api.observablehq.com/document/your-notebook-id\`. (If you're not logged in, this might be in the "All" requests.) - In Chrome:

- In Firefox:

(This is how I got the code for the "Lattice reduction" example above). 3. You can also use the node.js scripts in [this forum post](https://talk.observablehq.com/t/backup-method/1628/) to download (and even upload) notebooks. Here's how, assuming you have [node.js](https://nodejs.org/en/) installed: - Download the latest version of the download / upload script [here](https://gist.github.com/bryangingechen/9d86f1e5ec01674a32dd9c54bdc13947) and put it in some folder. - Open a terminal and run: \`\`\`bash > node index.js downloadFull notebook-name filename.json \`\`\` For example, if you want to download the notebook at https://observablehq.com/@bryangingechen/divisibility-lattice, the \`notebook-name\` is \`@bryangingechen/divisibility-lattice\`. For drafts, like the scratch notebook at https://observablehq.com/d/10ffc3f281b8b72f, the \`notebook-name\` is simply \`10ffc3f281b8b72f\`. - The first time you run the script, it should prompt you for your github username and password (and 2-factor authentication token if you have that enabled): \`\`\`bash Please enter github username: your_username Please enter github password: \`\`\` - If all goes well, you'll see: \`\`\`bash writing notebook object to filename.json as JSON \`\`\` and you can check out the [next section](#local). ⚠️ Previous versions of the script only had the \`download\` command and not \`downloadFull\`. That command only saves the \`nodes\` array containing the cell sources to file (so it doesn't contain the metadata like \`id\`, \`version\` or \`title\`). No worries though, if you load one of those JSON objects with the file input below, the code below will wrap the array before feeding it to \`toV1\`. 4. ~~As described in the ["Downloading and embedding notebooks"](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) tutorial, the "Download code" menu item links to a JS file.~~ You can download a JS file that uses the Observable runtime V1 API by navigating to \`https://api.observablehq.com/@user/notebook-name.js\`. The function [\`fromV1\`](https://observablehq.com/@bryangingechen/fromv1#fromV1) can generate a notebook from that code (with some limitations – the biggest one being that cells using \`import...with\` syntax cannot be generated correctly. See the \`fromV1\` notebook for details!) I'll demonstrate this next by "decompiling" my notebook [Divisibility lattice](https://observablehq.com/@bryangingechen/divisibility-lattice) with this technique: `33:T4ab,md`## Code In [earlier work](https://observablehq.com/@bryangingechen/from-raw-notebook-source-to-observable-runtime-v1-modules), I explain how to generate Observable runtime V1 modules from notebook source. The main function \`toV1\` in that notebook has an option to "tag" the module variables with references to the original notebook cell objects. The main functions of this notebook ([\`loadWithSource\`](#loadWithSource) and [\`intoWithSource\`](#intoWithSource)) are modified versions of the Observable runtime \`load\` and inspector \`into\` functions (original sources are linked in the comments). Together, they take that notebook cell information and attach extra div elements containing the source to the ones created by the default inspector. \`intoWithSource\` takes additional parameters: - \`prefix\`, a string which is a prefix for the class attributes applied to the div elements created by the inspector; see also [\`styleString\`](#styleString), - \`md\`, a reference to the \`md\` markdown tag template literal function, can be provided by Observable's standard library, - \`reverse\`, if \`true\`, then the source is displayed *before* the cell value, instead of after. `34:Tee0,// old documentation for Runtime.load is at: // https://github.com/observablehq/runtime/blob/98905d3ad7d6850152e4604faf96f8c8218e93ce/README.md // This function is modified from: // https://github.com/observablehq/runtime/blob/9019bfef749255b5ae14d8dad8dfc2d91f88bad9/src/load.js#L4 // See LICENSE cell function loadWithSource(notebook, library, observer) { if (typeof library == "function") observer = library, library = null; if (typeof observer !== "function") throw new Error("invalid observer"); if (library == null) library = new observable.Library(); const {modules, id, nodes} = notebook; const map = new Map; const runtime = new observable.Runtime(library); const main = runtime_module(id); function runtime_module(id) { let module = map.get(id); if (!module) map.set(id, module = runtime.module()); return module; } for (const m of modules) { const module = runtime_module(m.id); for (let i = 0; i < m.variables.length; i++) { const v = m.variables[i]; if (module === main) // attach node object to variable v.node = nodes.find(({id}) => id === v.node_id); if (v.from) { // import cell module.import(v.remote, v.name, runtime_module(v.from)); if (module === main) { // imitate Observable's output for an import with a fake cell const importedVars = [v]; const i0 = i; // only show this fake cell once for each import while (i+1 < m.variables.length && m.variables[i+1].from === v.from) { const nextImport = m.variables[++i]; importedVars.push(nextImport); module.import(nextImport.remote, nextImport.name, runtime_module(v.from)); } const nbURL = 'https://observablehq.com' + (v.from.match(/\//) ? '/' : '/d/') + v.from; module.variable(observer(v, i0, m.variables)) .define(`import ${v.name}`, ["html"], (function(html){return(html`

import {${importedVars.map(
            ({name, remote}) => {
              return `${remote}` + (name === remote ? '' : ' as ' + name);
            }
          ).join(', ')}} from ${v.from}
`)}));
        }
      }
      else if (module === main) { // only attach observers to variables in the main module
        if (v.node === undefined) console.log(`missing node object at variable ${i}: ${JSON.stringify(v)}`);
        // comment-only cell: (observer is actually an observer factory)
        if (!v.value) module.variable(observer(v, i, m.variables))
          .define(null, ["md"], (function(md){return(md`\`\`\`js
${v.node.value}
\`\`\``)}));
        else {
          if (v.name && v.name.startsWith('initial ')) { // mutable cell 
            // (assumes variables come in the order initial Y -> mutable Y -> Y)
            module.variable().define(v.name, v.inputs, v.value); // initial Y
            const v1 = m.variables[++i]; // mutable Y
            module.variable().define(v1.name, v1.inputs, v1.value);
            const v2 = m.variables[++i]; // Y
            v2.node = v.node;
            module.variable(observer(v2, i-2, m.variables)).define(v2.name, v2.inputs, v2.value);
          } 
          else {
            module.variable(observer(v, i, m.variables)).define(v.name, v.inputs, v.value);            
            if (v.name && v.name.startsWith('viewof ')) { // viewof cell 
              // (assumes variables come in the order viewof X -> X)
              const v1 = m.variables[++i]; // X
              v1.node = v.node;
              module.variable().define(v1.name, v1.inputs, v1.value);
            }
          }
        }
      }
      else module.define(v.name, v.inputs, v.value); // dependencies in imported modules
    }
  }
  return runtime;
}35:T84d,// This function is modified from Inspector.into:
// https://github.com/observablehq/inspector/blob/115a96dd78d41f7fbebc0260155aa9ec90cccca3/src/index.js#L51
// See LICENSE cell
function intoWithSource(container, prefix="myInspect", md, reverse=false) {
  if (typeof container === "string") {
    container = document.querySelector(container);
    if (container == null) throw new Error("container not found");
  }
  return function(v) { // supplied inputs are variable, array index, array of all variables
    const newContainer = container.appendChild(document.createElement("div"));
    const div = document.createElement("div");
    // makes links to cells work
    if (v.name) {
      const name = v.name.split(' ');
      if (name[0] === "viewof" || name[0] === "initial") name.shift();
      if (name.length === 1 && !document.querySelector(name[0])) div.setAttribute("id", name[0]);
    }
    const newdiv = newContainer.appendChild(div);
    if (v.node !== undefined) { // if node not attached, this'll just act like the default inspector
      newContainer.setAttribute("id", `${prefix}-node-${v.node.id}`)
      newdiv.setAttribute("class", v.node.pinned ?
                          `${prefix}-pinned${reverse ? ` ${prefix}-reverse` : ''}` :
                          `${prefix}-unpinned${reverse ? ` ${prefix}-reverse` : ''}`);
      if (v.from || v.value) { // show source if not comment-only cell
        const sourcediv = reverse ? newContainer.insertBefore(document.createElement("div"), newdiv) : 
          newContainer.appendChild(document.createElement("div"));
        sourcediv.setAttribute(
          "class",
          `${prefix}-source ${v.node.pinned ?
          `${prefix}-source-pinned` :
          `${prefix}-source-unpinned`}`);
        if (v.node.pinned) sourcediv.appendChild(md`\`\`\`js
${v.node.value}
\`\`\``);
        else sourcediv.addEventListener('click', event => {
          if (sourcediv.firstChild) sourcediv.firstChild.remove();
          else sourcediv.appendChild(md`\`\`\`js
${v.node.value}
\`\`\``);
        });
      }
    }
    return new observable.Inspector(newdiv);
  };
}36:T51f,function indexhtml(nbURL, title, prefix = 'myInspect', reverse = false) {
  return `

${title}


${styleString(prefix)}





`;
}37:[]
2f:{"title":"Exporting notebooks with their source","cells":[{"id":0,"value":"md`# Exporting notebooks with their source\n\n> \n  \n  [Sampler with compound division equation](https://www.metmuseum.org/art/collection/search/228665), Mary Ann Sadler, Metropolitan Museum of Art.\n  
\n
\n\nSo you've followed the instructions in [Downloading and Embedding Notebooks](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks), but in the resulting page, the code you worked so hard to write is now hidden! \n\nThis notebook will help you export your notebook so that its source is accessible beneath each cell as it is when a notebook is viewed on \\`observablehq.com\\`:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"embed1 = embedWithSource({\n  id: \"test\",\n  nodes: [\n    {\n      id: 0,\n      pinned: false,\n      value:\n        \"md`I'm an unpinned cell! Click in the pink area below to expand and see my source.`\"\n    },\n    {\n      id: 1,\n      pinned: true,\n      value: \"md`I'm a pinned cell! My source is always visible.`\"\n    }\n  ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`In order to do this, you'll have to get the source of your notebook, and sadly, the options are a bit inconvenient. First, let's see another example.\n\nHere's the source for my notebook [Lattice reduction](https://observablehq.com/@bryangingechen/lattice-reduction). The data structure is what's used by Observable's editor – an object with metadata about the notebook plus an array of \"node\" objects, one for each cell. (For more on this, see [my notebook on turning notebook source to Observable runtime modules](https://observablehq.com/@bryangingechen/from-raw-notebook-source-to-observable-runtime-v1-modules)).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"md`The function [\\`embedWithSource\\`](#embedWithSource) embeds a live copy:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"radio0 === 'div' ?\n  embedWithSource(nbLatt, 600) : // embed in div\n  embedWithSourceIframe(nbLatt, 600) // embed in iframe","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"md`One downside is the fact that cells which depend on [\\`width\\`](#https://github.com/observablehq/stdlib/blob/a9e9836a9793707040d7c88e73ce211f522d6be3/src/width.js#L5) spill out of the \"inner\" divs. This seems to be unavoidable when embedding notebooks in notebook cells since that variable reactively watches \\`document.body.clientWidth\\`.\n\nIf we [embed this notebook in an iframe](https://observablehq.com/@mbostock/embedded-notebook), this issue goes away. An iframe view is also closer to what you'll get if you export a notebook as a HTML+JS bundle using [the tools below](#local) (the main difference is that Observable's nice CSS styles aren't applied). Use the radio input below to try this out:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"viewof radio0 = radioDivIframe('div')","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"moduleDiv = importModule('https://api.observablehq.com/@bryangingechen/divisibility-lattice@732.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"md`Here's the \"reverse-engineered\" array of notebook cell sources:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"nbDiv = fromV1(moduleDiv)","pinned":true,"hidden":false,"mode":"ojs"},{"id":882,"value":"md`This array becomes the \\`nodes\\` field in the notebook object that we feed to \\`embedWithSource\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"embedWithSource({id:'@bryangingechen/divisibility-lattice', version:'731', nodes:nbDiv}, 800)","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"md`This notebook works fine because it doesn't use the \\`import...with\\` syntax. If you feed \\`fromV1\\` a notebook module which does use that feature, you'll have to fix up the corresponding import cells manually.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"local = md`## Export tool\n\nThe following file input lets you load a JSON object containing a notebook object into memory. (All data is processed locally in your browser and is not uploaded anywhere!)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"viewof nbJSON = jsonInput({initialUrl:\"https://gist.githubusercontent.com/bryangingechen/80a83b909d4cea9b4ba4d81637e5d548/raw/66b2e790d61e5f68ce892421a0d5e09bf9bcf77c/scratch.json\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"html`${DOM.download(new Blob([script], {type:'application/javascript'}), \"notebook.js\", \"Download notebook.js\")}\n${DOM.download(new Blob([ihtml], {type:'application/javascript'}), \"index.html\", \"Download index.html\")}\n${DOM.download(zipBlob, \"notebookWithSource.zip\", \"Download notebookWithSource.zip\")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"md`These buttons let you download: \n- \\`notebook.js\\`: a runtime V1 module with embedded notebook source (can be viewed [here](#script))\n- \\`index.html\\`: an HTML file that displays the notebook (can be viewed [here](#ihtml))\n- \\`notebookWithSource.zip\\`: a ZIP file containing the above two files.\n\nOne thing you can do is upload the contents of the zip to \\`gist.github.com\\` and then view your notebook on \\`bl.ocks.org\\`. [Here's a link to the \"Divisibility lattice\" notebook](https://bl.ocks.org/bryangingechen/f0965bd04e04e1e7f36d184634446d64) exported this way.\n\n**Update: April 5, 2019**. The radio input below lets you preview / export your notebook with the source displayed *before* the cell outputs (instead of afterwards, as on this site). See e.g. the forum posts linked [here](https://talk.observablehq.com/t/show-source-after-output/1857/3).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"viewof reverse = radioReverse('normal')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"md`Here's the notebook object generated from the loaded JSON and a live preview below it:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"nb = nbJSON.nodes ? nbJSON : ({id:'notebook_id',version:0,nodes:nbJSON})","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"viewof radio = radioDivIframe('iframe')","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"{\n  const h = 800;\n  return radio === \"div\" ? embedWithSource(nb, h, 'myInspect', reverse) :\n    embedWithSourceIframe(nb, h, 'myInspect', reverse)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"md`The JS and HTML files that can be downloaded are below; the former is generated from the notebook object by the \\`toV1\\` function in [the \"From raw notebook source...\" notebook](https://observablehq.com/@bryangingechen/from-raw-notebook-source-to-observable-runtime-v1-modules#toV1) and the latter comes from a template in [this cell](#indexhtml).\n\n🎨 If you're unhappy with the style / layout of the embed, you can edit the (very basic) CSS [in this cell](#styleString). The syntax coloring in the iframe is given by the [\"Color Brewer\"](https://highlightjs.org/static/demo/) highlight.js stylesheet – you can replace it in [the template for \\`index.html\\`](#indexhtml).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"script = toV1(nb, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"ihtml = indexhtml('./notebook.js', nb.title, reverse)","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"{\n  const p = \"323 4 23 3\".split(' ');\n  p.shift();\n  return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":851,"value":"LICENSE = `ISC`\n// Copyright 2018 Observable, Inc.\n\n// Permission to use, copy, modify, and/or distribute this software for any purpose\n// with or without fee is hereby granted, provided that the above copyright notice\n// and this permission notice appear in all copies.\n\n// THE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\n// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND\n// FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\n// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS\n// OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER\n// TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF\n// THIS SOFTWARE.","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"async function embedWithSource(nb, h=null, prefix='myInspect', reverse=false) {\n  const v1script = await toV1(nb, true);\n  const module = await importModule(`data:text/javascript;base64,${utoa(v1script)}`);\n  const hello = html``;\n  loadWithSource(module.default, lib, intoWithSource(hello, prefix, md_, reverse));\n  return hello;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"async function embedWithSourceIframe(nb, h=null, prefix='myInspect', reverse=false) {\n  const v1script = await toV1(nb, true);\n  const iFrame = html``;\n  iFrame.srcdoc = indexhtml(`data:text/javascript;base64,${utoa(v1script)}`, nb.title, prefix, reverse);\n  return html`<div style=\"height:${h}px; resize:vertical; overflow:hidden;\n    border: thin solid #555; padding:10px;\">${iFrame}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"// https://css-tricks.com/snippets/css/make-pre-text-wrap/\nfunction styleCells(prefix='myInspect') { \n  return html`style for cells in preview, class prefix: <code>${prefix}</code>\n${styleString(prefix)}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"styleString = (prefix) => `<style>\n.${prefix}-pinned {\n  border: 1px solid #aaa;\n  margin: 10px 0px 0px 0px;\n}\n.${prefix}-unpinned {\n  border: 1px solid #eee;\n  margin: 10px 0px 0px 0px;\n}\n.${prefix}-pinned.${prefix}-reverse, .${prefix}-unpinned.${prefix}-reverse {\n  margin: 0px 0px 10px 0px;\n}\n.${prefix}-source, .${prefix}-source pre {\n  margin: 0px;\n  overflow-wrap: break-word;\n   white-space: pre-wrap;       /* css-3 */\n   white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */\n   white-space: -pre-wrap;      /* Opera 4-6 */\n   white-space: -o-pre-wrap;    /* Opera 7 */\n   word-wrap: break-word;       /* Internet Explorer 5.5+ */\n}\n.${prefix}-source {\n  padding: 5px 10px 5px 10px;\n}\n.${prefix}-source-pinned, .${prefix}-source-pinned .hljs {\n  background-color: #f7f7ff;\n  color: #220;\n}\n.${prefix}-source-unpinned, .${prefix}-source-unpinned .hljs {\n  cursor: pointer;\n  background-color: #fff7f7;\n  color: #333;\n}\n</style>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"styleCells()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"md`**April 7, 2019**: Since [there are issues with the old version 1 of \\`notebook-runtime\\`](https://talk.observablehq.com/t/svg-download-on-notebook-but-not-with-runtime/1862), I've updated the code below to use \\`runtime@4\\`.\n\n**May 2, 2020**: I updated the cell below to be compatible with stdlib@3.3.0:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"zipBlob = {\n  const zip = new JSZip();\n  zip.file(\"notebook.js\", script);\n  zip.file(\"index.html\", ihtml);\n  return zip.generateAsync({type:\"blob\"});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":910,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"// see the Warning in this notebook for why we need to use require_ and md_ here\nimport {toV1, utoa, observable, importModule, lib, require_, md_} from '@bryangingechen/from-raw-notebook-source-to-observable-runtime-v1-modules'","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"import {fromV1} with {toV1, utoa, observable, importModule} from '@bryangingechen/fromv1'","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"import {jsonInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"styles = html`style for markdown bash from <a href=\"https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app\">🤔 How to: Embed a Notebook in a React App</a>.<style>\n  code.bash {\n    display: block; \n    background: hsl(230, 50%, 19%);\n    padding: 12px;\n  }\n  code.bash, code.bash span {\n    color: #eee;\n  }\n</style>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"JSZip = require_(\n  'https://cdn.jsdelivr.net/gh/Stuk/jszip@3.3.0/dist/jszip.min.js'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"function radioDivIframe(which) {\n  const divId = DOM.uid('div').id;\n  const iframeId = DOM.uid('iframe').id;\n  const form = html`<form>Preview in: <input id=\"${divId}\" type=\"radio\" name=\"choice\" value=\"div\"  ${which === 'div' ? 'checked' : ''}>\n    <label for=\"${divId}\"> div</label>\n  <input id=\"${iframeId}\" type=\"radio\" name=\"choice\" value=\"iframe\" ${which === 'iframe' ? 'checked' : ''}>\n    <label for=\"${iframeId}\"> iframe</label>`;\n  form.value = form.choice.value;\n  form.addEventListener('change', () => {\n    form.value = form.choice.value;\n    form.dispatchEvent(new CustomEvent('input'));\n  });\n  return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"function radioReverse(which) {\n  const normalId = DOM.uid('normal').id;\n  const reverseId = DOM.uid('reverse').id;\n  const form = html`<form><input id=\"${normalId}\" type=\"radio\" name=\"choice\" value=\"normal\"  ${which === 'normal' ? 'checked' : ''}>\n    <label for=\"${normalId}\"> source after cell output (normal)</label>\n  <input id=\"${reverseId}\" type=\"radio\" name=\"choice\" value=\"reverse\" ${which === 'reverse' ? 'checked' : ''}>\n    <label for=\"${reverseId}\"> cell output after source (reversed)</label>`;\n  form.value = form.choice.value === 'reverse';\n  form.addEventListener('change', () => {\n    form.value = form.choice.value === 'reverse';\n    form.dispatchEvent(new CustomEvent('input'));\n  });\n  return form;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}
</article></body></html>