Override cells

100%

Override cells

✓ Published0🌍 Public

Last edited Aug 14, 2018

Created on Aug 14, 2018

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.

AI-generated description

Similar vizzes

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

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

67% match

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

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

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

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

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

49% match

Loading thumbnail…

Untitled

This example demonstrates CSS specificity and override behavior in an HTML page. It shows how conflicting color rules are resolved, with inline styles, stylesheet rules, and `!important` declarations competing for precedence. The page includes a single paragraph where an inline `color: yellow` is overridden by a red `!important` rule in a `<style>` block, while external styles from `info.css` apply background and fallback colors. The code uses plain HTML, CSS, and JavaScript, with the external stylesheet linked via `<link>`.

Ssammy0329

48% match