2d:null 2e:["$","title",null,{"children":"Notebooks system guide | Observable | Observable"}] 33:[{"id":"51ef8c06edd5d139385ad9477c0a42cbf0152f5a4facf30a52d5eaa3ce4debecf1114c4a51199e734274e4411ec8149ffdd0d094cd334095cf8f2a004fc90d44","href":"https://static.observableusercontent.com/files/51ef8c06edd5d139385ad9477c0a42cbf0152f5a4facf30a52d5eaa3ce4debecf1114c4a51199e734274e4411ec8149ffdd0d094cd334095cf8f2a004fc90d44","name":"AMZN.csv","type":"text/csv","lastModified":1781228072555.109,"size":94124}] 31:{"id":"96643af8378d5694","slug":"notebooks-system-guide","title":"Notebooks system guide","thumbnail":"4f8087ea9ce4df202f40477ed013339235097920571262141bb390f92f66977c","access_level":"public","create_time":"$D2026-06-03T19:01:43.510Z","update_time":"$D2026-09-02T00:25:31.974Z","view_time":null,"first_public_time":"$D2026-06-12T18:07:56.409Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":1668,"publish_version":1668,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null},{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[{"id":"d8d6c9f32aa895c1","reply_to_id":null,"content":"This probably needs to say AI somewhere :)","create_time":"$D2026-06-09T08:11:03.777Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"24eb6ec5e74aa0c6","slug":"documentation","title":"Documentation","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Notebooks system guide","cells":[{"id":1,"value":"# Notebooks system guide\n\nNotebooks are interactive documents comprised of small programs called _cells_. The [user guide](https://new.observablehq.com/d/480a471b02ce8556) covers the visual interface; this guide covers writing code.\n\nCells can be written in TypeScript, JavaScript, Markdown, HTML, and other languages. Most logic is coded in TypeScript or JavaScript, while prose is typically written in Markdown.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"const language = \"JavaScript\";\n\ndisplay(`This cell is ${language}.`);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"This cell is _Markdown_.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"And this cell is HTML.","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"Notebooks are live: code runs when you load the notebook, showing the latest output. A saved notebook only stores cells’ source code, not its output. (Though you can capture and store additional data in file attachments.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"This cell ran at `${(new Date).toLocaleString(\"se\")}`.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"Notebooks are reactive: cells run automatically like in a spreadsheet, re-running whenever referenced variables change. Reactivity makes it easier to implement interactive controls (or _inputs_), animations, and asynchronous operations such as loading data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"const x = view(Inputs.range([0, 100], {label: \"x\", step: 1}));\nconst y = 2;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"x ** y","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"Top-level variables defined in JavaScript cells, such as `x` and `y` above, can be referenced in other cells. For Markdown, HTML, and other non-JavaScript cells, use dollar-curly expressions `$\\{…}` to interpolate dynamic values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"The value of `x` is ${x}, and `y` is ${y}.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"$${x}^${y} = ${(x ** y).toLocaleString(\"en-US\").replace(/,/g, \"{,}\")}","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"---\n## JavaScript\nUse JavaScript cells to render charts, inputs, and other dynamic content. JavaScript cells can also declare top-level variables, say to load data or declare helper functions.\n\nJavaScript cells come in two forms: expression cells and program cells. An expression cell contains a single JavaScript expression (note the lack of semicolon) and implicitly displays its value:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"1 + 2","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"A program cell, in contrast, contains statements (typically with semicolons) and declarations, and doesn't display anything by default:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"const foo = 1 + 2;\nconst bar = 3 + 4;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"However, you can call `display` to display something:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"const baz = 5 + 6;\ndisplay(foo + bar + baz);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"

You can call display multiple times to display multiple things. When a cell re-runs, anything previously displayed will be cleared.

\n\nWhen displaying --- either implicitly or explicitly --- if the displayed value is a DOM node, it will be inserted directly into the page. Anything else is displayed using the _inspector_, which is useful for debugging. You can use the [DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) to create content, though we recommend a library such as [Hypertext Literal](https://github.com/observablehq/htl), [Observable Plot](https://observablehq.com/plot/), or [D3](https://d3js.org).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"function greeting(name) {\n return html`Hello, ${name}!`;\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"greeting(\"world\")","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"Plot.lineY(AMZN, {x: \"Date\", y: \"Close\"}).plot({y: {grid: true}})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"---\n## How cells run","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"When a top-level variable is defined as a promise, referencing cells will implicitly await the promise and only see the resolved value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"const delayed = new Promise((resolve) => setTimeout(() => resolve(\"hello\"), 10000));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"delayed","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"When a top-level variable is defined as a generator, referencing cells will see only the latest yield value and will re-run whenever the generator yields a new value. This is typically used for interaction, animation, and live data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"const tick = (async function* () {\n do {\n yield new Date();\n await new Promise((resolve) => setTimeout(resolve, 1000));\n } while (true);\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"tick","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"The built-in `view` function displays the given input and returns a generator that yields the current value of the input.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"const name = view(Inputs.text({label: \"Name\"}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"Hello, ${name || \"anonymous\"}!","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"If a cell should “clean up” before it runs again, use the `invalidation` promise to register a disposal hook. For example, below, the `invalidation` promise cancels the old animation frame when a new animation starts. Try clicking quickly:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"const clicks = view(Inputs.button(\"Click\", {label: \"Run cell\"}));\nconst colors = [\"#4269d0\", \"#efb118\", \"#ff725c\", \"#6cc5b0\"];\nconst duration = 2000;","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"const canvas1 = display(html`

`);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"const context1 = canvas1.getContext(\"2d\");\nconst color = colors[clicks % 4]; // cycle through colors on click\nconst start = performance.now(); // when the animation started\n\nlet frame = requestAnimationFrame(function tick(now) {\n const t = Math.min(1, (now - start) / duration);\n context1.fillStyle = color;\n context1.fillRect(0, 0, t * canvas1.width, canvas1.height);\n if (t < 1) frame = requestAnimationFrame(tick);\n});\n\ninvalidation.then(() => cancelAnimationFrame(frame));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"---\n## Loading files and data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"The built-in `FileAttachment` function references a file. It is typically used to load data. Add a file from the ${icon(\"files\")} **Files** panel in the right sidebar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"const AMZN = FileAttachment(\"AMZN.csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"Inputs.table(AMZN)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"To load live data, you can use `fetch`, `WebSocket`, and other standard web APIs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"const world = fetch(\"https://cdn.jsdelivr.net/npm/world-atlas/land-110m.json\")\n .then((response) => response.ok ? response.json() : Promise.reject(response.status))\n .then(display);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"To help load private data, you can load a workspace secret with `Secret(\"KEY_NAME\")`. Public notebooks cannot see secrets; once a notebook is published, any secret in it will throw an error. Configure secrets in the old site’s workspace settings.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"Notebooks provide a built-in [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS) proxy, which lets you fetch data that would otherwise require a server. Enable the `proxy` option in `fetch`:\n\n```ts\nconst data = fetch(url, {proxy: true});\n```\n\nOr in D3’s fetch wrappers:\n\n```ts\nconst data = d3.json(url, {proxy: true});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"---\n## Standard library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"The 2026 standard library includes a handful of additional built-ins:\n\n- `display` - a function to display a value\n- `view` - a function to display an input and return its value generator\n- `invalidation` - a promise for disposing resources when a cell is re-run\n- `visibility` - a promise to wait for a cell to become visible\n- `width` - the current page width\n- `now` - the current time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"A handful of recommended libraries (and sample datasets) are also available by default, including:\n- `Inputs` - Observable Inputs\n- `htl`, `html`, `svg` - Observable Hypertext Literal\n- `Plot` - Observable Plot\n- `d3` - D3.js\n- `tex` - a tagged template literal for ${tex`\\KaTeX`}\n- `md` - a tagged template literal for Markdown\n- `penguins` - the Palmer Archipelago penguins dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"Notebooks 2.0 use the 2026 standard library by default. Notebooks written with the old editor will use the [2018 standard library](https://github.com/observablehq/stdlib). You can switch versions at any time in the ${icon(\"dependencies\")} **Dependencies** panel in the right sidebar. The new editor supports both versions, but the old editor can only use the old library. See our [guide to upgrading notebooks](https://new.observablehq.com/d/342634064e732825).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"---\n## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"You can load packages from npm using an `npm:` module specifier prefix.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"import he from \"npm:he\";\n\ndisplay(he.encode(\"foo © bar ≠ baz 𝌆 qux\"));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"Or from an [Observable notebook](https://observablehq.com/@observablehq/notebook-imports):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"import {chart} from \"observable:@d3/radial-tree-component\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"Or from [JSR](https://jsr.io/):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"import {PI} from \"jsr:@luca/pi\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"Or from a URL, for example to retrieve a specific commit to Observable Plot:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"import * as Plot from \"https://esm.sh/gh/observablehq/plot@f26d844\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"Or with import attributes, _e.g._ to load data as JSON:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"import world from \"npm:world-atlas/countries-110m.json\" with {type: \"json\"};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"Notebooks 2.0 no longer support the old editor’s idiosyncratic `import with` syntax, which allowed injecting symbols into the imported notebook. We recommend writing an explicit function you can import and pass parameters to.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"---\n## Other cell modes\nAll cells ultimately talk to each other via JavaScript, but different modes offer different conveniences.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"### TypeScript\n\nA TypeScript cell functions almost exactly like a JavaScript cell, except that types are stripped when the cell runs. This makes code written in Observable more portable among other programming environments. Types are not currently checked.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"const coolNumbers: number[] = [1, 1, -1, 5, 6, 3, 3, 3];\ncoolNumbers.push(\"3\"); // this would be a type error\ndisplay(coolNumbers);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"### Markdown\nMarkdown cells are typically used for prose, images, and other static content. Markdown is [CommonMark](https://commonmark.org/)-compliant, supports HTML in Markdown, automatic linkification, automatic typographic enhancements such as curly quotes and dashes, and automatic linking of headings.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"Use dollar-curly $\\{…} expressions to interpolate dynamic JavaScript values into Markdown, including text, DOM nodes, and bits of dynamic Markdown.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"Hello, ${atob(\"d29ybGQ=\")}!","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"### HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"HTML cells are used similarly to Markdown cells, and also support dollar-curly $\\{…} interpolation. Unlike Markdown cells, HTML cells automatically escape any interpolated values, providing additional safety when handling dynamic and user-specified content.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"Interpolated values are considered text, ${\"not HTML\"}.","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"### SQL\nSQL cells allow querying [database clients](https://observablehq.com/@observablehq/database-clients):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"const db = DuckDBClient.of({AMZN});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"SELECT * FROM AMZN WHERE \"Date\" > DATE '2015-01-01'","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"$undefined","database":"var:db"},{"id":428,"value":"### TeX\nUse the ${tex`\\KaTeX`} library to represent mathematical equations:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"g(x):=f^{L}(W^{L}f^{L-1}(W^{L-1}\\cdots f^{1}(W^{1}x)\\cdots ))","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"You can also write the tagged template literal in JavaScript:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"tex`x = y`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"### DOT\nDOT lets you define Graphviz diagrams:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"digraph HaberBosch {\n rankdir=LR;\n node [fontsize=9];\n edge [fontsize=9];\n\n compressor [label=\"Compressor\"];\n hx [label=\"Heat\\nexchanger\"];\n reactor [label=\"Ammonia\\nreactor\"];\n condenser [label=\"Condenser\"];\n\n feed [label=\"H2 + N2\"];\n nh3 [label=\"NH3 product\"];\n power [label=\"Purge gas to\\npower generation\"];\n\n feed -> compressor;\n compressor -> hx [label=\"fresh feed\"];\n hx -> reactor [label=\"preheated feed\"];\n reactor -> hx [label=\"hot NH3 mixture\"];\n hx -> condenser [label=\"cooled mixture\"];\n condenser -> nh3;\n\n condenser -> reactor [label=\"recycle\", constraint=false];\n reactor -> power;\n}","pinned":true,"hidden":false,"mode":"dot","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"You can also write the tagged template literal in JavaScript:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"dot`digraph { rankdir=LR; a -> b; b -> c; a -> c; c -> b; }`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"### Observable JavaScript\nObservable JavaScript is what the old editor would call, simply, “JavaScript”. But it has certain idiosyncrasies that make it different from vanilla JavaScript. It is no longer the default, but we support it for backwards compatibility.\n\nIt declares variables with no leading `const`, `let`, or `var`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"a = Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"You can make larger cells with a block of curly braces that returns a single value:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"b = {\n return Math.PI * 2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"Inputs use a special `viewof` keyword before the variable declaration:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"viewof c = Inputs.range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"To learn more, see our guide to [upgrading to Notebooks 2.0](https://new.observablehq.com/d/342634064e732825).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"---\n\n## Appendix\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"import {keys, buttons} from \"observable:@observablehq/keys\"\nimport {icon} from \"observable:@observablehq/icons\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 32:"$31:body"