Overriding notebook-stdlib

100%

Overriding notebook-stdlib

✓ Published0🌍 Public

Last edited Aug 10, 2018

Created on Aug 10, 2018

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.

AI-generated description

Similar vizzes

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

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

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

56% match

Loading thumbnail…

Fork of Hello HTML

This example shows a live-updating histogram that streams unconfirmed Bitcoin transaction sizes over a WebSocket connection from Blockchain.info. It repurposes Mike Bostock’s Observable notebook by using the Observable Runtime’s `module.redefine` method to replace the `data` cell with a generator built on `library.Generators.observe`, which pushes new sizes into the chart as messages arrive. The chart renders as a `d3.histogram` with axes and bars, while the page uses vanilla HTML and CSS for layout. The code highlights how to override a notebook’s data source with real-time external inputs.

Lllm0316@gwmail.gwu.edu

55% match

Loading thumbnail…

A jupyter notebook for D3

This example demonstrates how to run D3 code inside an IJavascript notebook using `jsdom` as a virtual DOM environment. It builds a Voronoi diagram from randomly generated points, then computes and draws the Urquhart graph, which removes the longest edge from each Delaunay triangle. The visualization renders as SVG, with the notebook exporting the resulting HTML into the cell output. The code uses `d3.voronoi()`, `d3.map()`, and `d3.extent()` to construct the diagram and graph.

PPhilippe Rivière

52% 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…

Get window width on resize

This example demonstrates a debounced window resize handler that logs the current viewport width to the console after user resizing stops. It shows how to throttle repeated resize events using the native `window.addEventListener` and `setTimeout`/`clearTimeout` APIs, with a configurable delay of 100 milliseconds. The code wraps a custom `originalResize` callback within an immediately-invoked function expression (IIFE) that manages the debounce timer. No external libraries or rendering techniques are used; the implementation relies solely on plain JavaScript and the browser’s `innerWidth` property.

CChrisb4

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

50% match