Gist b198922e4837fa3d96af13fb27d5c723

100%

Gist b198922e4837fa3d96af13fb27d5c723

✓ Published0🌍 Public

Last edited Oct 31, 2018

Created on Oct 30, 2018

This example demonstrates how to embed an Observable notebook into a standalone HTML page using the Observable Runtime and Inspector APIs. The code loads a notebook, overrides its “subject” cell to output the string “Fred,” and renders the resulting “greeting” cell into a page element. It uses the `Runtime.load` method, `Library`, and `Inspector` classes from the `@observablehq/notebook-runtime` module, fetching the notebook from `api.observablehq.com`. The visualization shows dynamic text replacement within a live notebook module.

AI-generated description

Similar vizzes

Loading thumbnail…

Embedded Observablehq Minimal Cell

This example demonstrates embedding a single Observable notebook cell into a standalone HTML page. It loads a specific value named "calc" from an Observable notebook using the Observable Runtime API and renders it into a designated container via `Inspector.into`. The page retrieves the notebook definition from the Observable API URL, while the runtime is imported from the jsDelivr CDN. This approach minimizes the embedded footprint to roughly five kilobytes, compared to the full notebook’s larger size, showcasing a lightweight integration method.

RRussell Watson

76% match

Loading thumbnail…

Embedded Observablehq 'Animated' Cell

This example embeds a single Observable notebook cell that displays a live numeric value: the number of seconds since the page loaded, updated continuously in real time. The visualization is rendered inside a plain HTML page by importing the Observable Runtime from a CDN and loading the notebook definition from Observable’s API. The code uses `Runtime`, `Inspector.into`, and the notebook’s exported `secondsSinceLoadingThisPage` variable to drive the display, with no additional charting library involved.

RRussell Watson

75% match

Loading thumbnail…

Override cells

This example demonstrates how to override a cell in an Observable notebook by replacing the `subject` variable with the value "Success." The code uses the Observable notebook runtime and Inspector API to load the notebook definition and inject the custom value before rendering. The `greeting` cell is displayed in a div using the Inspector, showing how runtime overrides can modify notebook behavior externally. The implementation relies on the `Runtime` and `Library` classes from the `@observablehq/notebook-runtime` package.

Mmbostock

74% match

Loading thumbnail…

Hello HTML5

This example demonstrates the fundamentals of HTML5, CSS, and external content embedding within a single web page. It prominently features the HTML5 logo as an external SVG image and showcases the ability to embed live Observable notebooks via the Observable Runtime API. The page explores link styling and behavior, using CSS selectors to add visual indicators for external links and different `target` attributes, such as opening in new tabs or parent frames. Styling rules define fonts, colors, and link states, while the embedded Observable notebook renders a graphic through the runtime’s `Inspector` module.

RRussell Watson

71% match

Loading thumbnail…

Observable JS Demo

This demo shows the Observable JS runtime running inside a plain HTML page using the `@hpcc-js/observable-md` library. It loads a `.ojs` file containing markdown, a generator that emits a ticking counter at 1-second intervals, and an imported brushable scatterplot from `@d3/brushable-scatterplot`. The user’s selection on that plot is displayed as a live JSON preview. The page resizes dynamically via the `Observable` API’s `resize()` and `lazyRender()` methods.

GGordonSmith

70% match

Loading thumbnail…

Overriding notebook-stdlib

This example demonstrates how to override a notebook’s default `width` generator with a custom implementation that tracks the size of a specific DOM element. The code uses the Observable notebook runtime, `Runtime.load`, and `Library` to import a notebook and inject a custom `width` function that relies on `stdlib.Generators.observe` and window resize events. The referenced notebook cell named `test` renders into a styled `<div>` element. This approach shows how to replace a standard library method with element-specific behavior.

Mmbostock

64% match

Loading thumbnail…

Embedded Observablehq Stars

An interactive globe displays stars and constellations, rendered as a three-dimensional sphere overlaid with a star map and constellation lines. The visualization embeds an ObservableHQ notebook within a VizHub page, loading the runtime and module through the Observable runtime API and the `Inspector` class. Dragging rotates the globe using versor dragging, a technique that keeps the dragged point under the cursor. The underlying data and rendering rely on Observable's standard libraries, though specific d3 or Three.js calls are not directly visible in the provided code.

RRussell Watson

62% match

Loading thumbnail…

{p.title}

This animated visualization illustrates the structure and interactive features of a FastHTML-based blogging application, rendering the flow from notebook files to styled HTML pages. The code demonstrates how Jupyter notebooks are parsed and converted into markdown with embedded HTML, using `mistletoe` for markdown processing and `fastcore.nbio` for file handling. The application manages subscriber data through a SQLite database via `fastlite`, while the user interface is built with `fasthtml.common` and `monsterui.all` components. The animation highlights the templating system that transforms content into a complete blog layout, including navigation, article rendering, and social media links.

深深度碎片

61% match