Skip to main content
SimilarExport ZIP
100%

Embedded Observablehq 'Animated' Cell

✓ Published0🌍 Public
RRussell Watson
Last edited Jan 30, 2020
Created on Jan 30, 2020

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.

AI-generated description

The above is an animated cell from my Observable notebook Embedding Observable Objects.

MIT Licensed

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
83% 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
75% 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
73% 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
66% 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
65% 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
64% 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
62% match
Loading thumbnail…

Reuleaux animated

This animated visualization demonstrates the classic Reuleaux triangle, a curve of constant width. The figure rotates and moves across the screen, showing its geometric properties. Built using Observable’s notebook runtime and D3.js, the example imports a notebook directly from Observable’s API and renders it into a div. The animation is driven by the notebook’s internal logic, likely involving D3’s transition and interpolation methods. The code specifically loads a pre-existing notebook via a JavaScript URL and uses the `Inspector` and `Runtime` classes to display the output, with CSS fixing the body for a full-viewport presentation.

PPhilippe Rivière
61% match