31:T4d9,--- ## Importing an ENTIRE Observable Notebook Let's say that you created a magnum opus Observable notebook, and you'd rather just render the entire notebook to a _Framework_ page. Let's try this with _this_ guide notebook. The steps are largely the same as the above, except that Step 4 requires different code. For starters, this guide notebook as the following URL: ```` https://observablehq.com/@rk2546/guide-importing_observable ```` In the API URL format, it'll look like: ```` https://api.observablehq.com/@rk2546/guide-importing_observable.js?v=3 ```` Then, in `index.md`, we can import the entire notebook via the following:

````js
import define_guide from 'https://api.observablehq.com/@rk2546/guide-importing_observable.js?v=3';
new Runtime().module(define_guide, Inspector.into(document.body));
````

The above code is a different syntax, where we are are _inserting_ the contents of our guide notebook into an existing container that may have other content. Furthermore, note the change from `define` to `define_guide`. This just means that we're referencing the contents from this guide notebook in a variable, `define_guide`, that's DIFFERENT from the `define` that we declared from our previous endeavor.32:[{"id":"fbee3e8a962e4353eaeb94998ecea9f6ee9d01908d5fcc85f74cb4ddf24a0d51ccb5c1d7f22b35f516bade80fabd7650e38851fee43c7baee95a9b1edef14805","href":"https://static.observableusercontent.com/files/fbee3e8a962e4353eaeb94998ecea9f6ee9d01908d5fcc85f74cb4ddf24a0d51ccb5c1d7f22b35f516bade80fabd7650e38851fee43c7baee95a9b1edef14805","name":"framework_import.png","type":"image/png","lastModified":1760558619774.566,"size":54671}] 2f:{"title":"Framework Guide #4: Importing Observable Notebooks","cells":[{"id":0,"value":"# Framework Guide #4: Importing Observable Notebooks\n\nSo far, we've covered the following:\n\n1. [Local Observable/Framework Project Setup](https://observablehq.com/@rk2546/guide-local_observable_setup)\n2. [Basic Chart Rendering in Framework](https://observablehq.com/@rk2546/guide-basic_charts_framework)\n3. [Importing Scripts as Components](https://observablehq.com/@rk2546/guide-importing_scripts)\n\nIn this guide, we'll cover some caveats when it comes to importing functions, charts, and code blocks from Observable. ","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"---\n\n## The Conoudrum of Importing from Observable...\n\nLet's consider a situation where we would import some helper functions from an existing Observable notebook. If you recall in our [_Week 5 Exercise_](https://observablehq.com/@rk2546/2025-infovis-cse_exercise-5), we imported the `Legend` and `Swatches` functions from D3. Here's the code below, which we can safely run in an Observable notebook:","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"The catch, unfortunately, is that **you cannot do the same in _Framework_ projects**. Attempting to do this will lead to errors. This produces a conundrum: _how can we import stuff from Observable notebooks?_","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"### The Solution: Importing Notebook _CONTENTS_ into _Framework_\n\nWe can't import raw functions and JavaScript code into our notebook, but we _CAN_ import cells, code blocks, and even entire notebooks into a _Framework_ dashboard. All interactive functions, such as those covered in our [_Week 6 Lab_](https://observablehq.com/@rk2546/2025-infovis-cse_week-6-lab) and [_Week 7 Lab_](https://observablehq.com/@rk2546/2025-infovis-cse_week-7-lab), are also maintained and will work on your _Framework_ page.\n\nThe work flow is thus:\n\n1. Use an Observable Notebook (that's ideally public) to generate your charts and/or interactive elements.\n2. Import the code blocks from that Observable notebook into your _Framework_ pages","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"## Use Case: Importing a Chart and its Interactable\n\nObserve the following import below:","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"import { ex2, viewof radius } from '@rk2546/2025-infovis-cse_week-7-lab'","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"If we rendered `ex2` and `radius` into their own code blocks:","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"viewof radius;","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"ex2","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"The visualization works! This was achievable because Observable notebooks prefer that every JavaScript code block outputs to a variable. In the [_original notebook_](https://observablehq.com/@rk2546/2025-infovis-cse_week-7-lab#ex2), this visualization outputted to a variable called `ex2` - this syntax allows us to import the code block and render it here as `ex2`. The same applies with the slider `radius` that came with that visualization. We are careful to also use the `viewof` modifier when importing `radius`, but the two components work together seamlessly in this notebook.\n\nLet's say we want to import `radius` and `ex2` into our _Framework_ project. For the sake of simplicity, let's modify `index.md` to have these two appear in our landing page dashboard.","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"### Step 0: Prepare your Observable Notebook\n\nThe Observable notebook you are copying from must be public and must have a custom URL (you'll know it's a custom URL once it has `@/NOTEBOOK_NAME` in your noteobok's URL). To do this click the \"Share\" button at the top of your Observable notebook and modify the settings.","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"### Step 1: Create an API URL to your Notebook\n\nThis one is a bit complicated. In [_Step 0_](#cell-71), we made the Observable notebook public. Take note of the URL, which has the format `@/NOTEBOOK_NAME` at the tail end of it. For example, the notebook for [_Week 7's Lab_](https://observablehq.com/@rk2546/2025-infovis-cse_week-7-lab) has this public URL:\n\n````\nhttps://observablehq.com/@rk2546/2025-infovis-cse_week-7-lab\n````\n\nThe tail end of this URL is the following:\n\n````\n@rk2546/2025-infovis-cse_week-7-lab\n````\n\nTake this portion out, and merge it into the following format:\n\n````\nhttps://api.observablehq.com/.js?v=3\n````\n\nThis creates an API access point specifically for your notebook. For example, this notebook's new URL will be:\n\n````\nhttps://api.observablehq.com/@rk2546/2025-infovis-cse_week-7-lab.js?v=3\n````\n\n**Keep a note on this URL - we will use it shortly**.","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"### Step 2: Add `Runtime` and your Notebook URL to Your _Framework_ Page\n\nInside of `index.md`, we need to import Observable's `Runtime` class, which lets us run Observable stuff via JavaScript. We also want to import our notebook via the URL we created just now. At this stage, copy and paste the code anywhere in your `index.md` file (preferably the top).\n\n

\n````js\nimport {Runtime, Inspector} from \"https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js\";\nimport define from 'https://api.observablehq.com/@rk2546/2025-infovis-cse_week-7-lab.js?v=3';\n````\n

","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"### Step 3: Create the Appropriate Cells in Your Markdown File\n\nInside of `index.md` (or whichever page you're running), you need to create HTML elements that the contents from your Observable notebook can slide neatly into. This is done by giving `

` elements (or any other HTML container) an `id` that uniquely identifies them from other elements on the screen.\n\nIn this example, remember that the cell blocks for the slider and orbiting-circle visualization were named `ex2` and `radius`. This means we need two HTML containers for them. Let's give them IDs of `ex2` and `radius`, for the sake of clarity. Let's add two `

` elements with IDs to `index.md`, as shown below:\n\n````\n

\n````\n\nYou don't _technically_ need to name them the same ID as their variable names, but we're doing it here just to be clear on what's happening/","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"### Step 4: Run `Runtime`\n\nNow we need to create a new instance of `Runtime`. This instance will look at our notebook, via `define`, and copy the notebook contents.\n\nDuring this step, we can tell `Runtime` to render specific cells. Observe the code block below:\n\n

\n  \n````js\nnew Runtime().module(define, name => {\n  if (name === \"ex2\") return new Inspector(document.querySelector(\"#ex2\"));\n  if (name === \"viewof radius\") return new Inspector(document.querySelector(\"#radius\"));\n});\n````\n\n<div id=\"radius\"></div>\n<div id=\"ex2\"></div>\n\n

\n\nIn this code block, we created the two `

` elements with the proper IDs. We ran `Runtime()`, and made it so that if it detected any cell blocks named `ex2` or `viewof radius`, then it will insert them into any HTML elements that match the query provided.","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"---\n\nIf we observe the rendered `index.md` page, then we should see our slider and our visualization:\n\n${await FileAttachment(\"framework_import.png\").image({width:500})}","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"## What's Next?\n\nIf you want to learn more about advanced embedding in _Framework_, make sure to read [_this documentation_](https://observablehq.com/documentation/embeds/advanced#rendering-cells). \n\nAlternatively, look at our other guides on _Framework_:\n\n${framework_guides}","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"import { css, framework_guides } from '@rk2546/2025-infovis-cse_notebook-gallery'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}