Skip to main content
SimilarExport ZIP
100%

Observable JS Demo

✓ Published0🌍 Public
GGordonSmith
Last edited Jul 5, 2020
Created on Jul 5, 2020

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.

AI-generated description
gpl-3.0 Licensed

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
70% match
Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

A minimal Observable notebook demonstrates hot reloading by displaying a large, centered “Hello World!” message. The example uses vanilla JavaScript to set the container’s inner HTML with an inline style for a font size of 217 pixels. It highlights a simple interaction where alt-dragging the number changes the font size, though the code shows only the static render. The visualization relies on the Observable runtime’s `main` function and standard DOM manipulation, with no external charting libraries or data sources.

Ssandyman2109@gmail.com
67% match
Loading thumbnail…

JS Bin

This example demonstrates a live counter that updates every second, displaying the number of elapsed seconds in the browser and the console. It uses RxJS’s `Observable.timer` to emit sequential integers, which are mapped to formatted strings. The resulting data stream is subscribed to by two effects: a DOM effect that writes the text into a `#app` container, and a console effect that logs each message. The code separates the main data stream from its side effects, following a simple functional reactive programming pattern.

JJaxonDvl
67% match
Loading thumbnail…

React + Observable

This example demonstrates how to embed an Observable Plot visualization inside a React application. It displays the classic Iris dataset, plotting petal length against petal width with points colored by species. The code uses `Plot.plot` and `Plot.dot` from `@observablehq/plot`, while React's `useRef` and `useEffect` manage the DOM element. Data is loaded asynchronously via `d3.csv` with `autoType`, and the chart fills the full browser window.

RRiderman de Sousa Barbosa
67% match
Loading thumbnail…

Fork of Fork of HTML Starter

This visualization presents a minimal embedded Observable notebook within an HTML page, using an SVG graphic to display a simple heat-level indicator. The SVG shows a gradient bar marked with the number “1” on the left, “5” on the right, and the text “DO YOU FEEL THE HEAT?” centered above a line. The page uses CSS via Google Fonts for Roboto typography and includes an iframe that loads an Observable notebook cell, leveraging the Observable runtime for interactive content. The SVG is hand-authored with inline styles and defs, while the embedded iframe handles the interactive data.

Ssirenajbpearl@gmail.com
66% 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
66% 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
65% 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
65% match