Embedded Observablehq Minimal Cell

100%

Embedded Observablehq Minimal Cell

✓ Published1🌍 Public

Last edited Jan 30, 2020

Created on Jan 30, 2020

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.

AI-generated description

Test to see how efficient embedding observable stuff is. A simple calculated value.

Total = ~85 KB

Vishub Basis = ~30 KB

Observablehq = ~55 KB

OHQ-Basis = ~50 KB

This Cell = ~5 KB

MIT Licensed

Similar vizzes

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

83% match

Loading thumbnail…

embed test

This example demonstrates how to embed a complete Observable notebook within an external webpage. The visualization displays the content of a specific notebook module, rendering each of its exported variables inside its own container. The code uses the Observable runtime API to load the notebook and instantiate an `Inspector` for each variable, while fetching the notebook definition from a gist-hosted JavaScript file. The rendering approach relies on dynamically injecting HTML wrappers and then populating them through the runtime's loading mechanism.

MMbrownshoes

77% match

Loading thumbnail…

Gist b198922e4837fa3d96af13fb27d5c723

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.

Mmbostock

76% 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

70% 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

63% 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

62% 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

60% match

Loading thumbnail…

Untitled

This interactive visualization lets users adjust red, green, and blue color channels via separate sliders, altering the displayed output in real time. It builds on an Observable notebook by syedshowmic and uses the Observable Runtime and Inspector APIs to embed the controls. The page’s iframe links to an accompanying video on data wrangling, while the sliders are rendered directly from the embedded module, which does not reveal the underlying canvas or data transformation logic.

Ssyedshowmic

58% match