https://github.com/observablehq/examples
Examples of using Observable in a variety of contexts
https://github.com/observablehq/examples
Last synced: 4 months ago
JSON representation
Examples of using Observable in a variety of contexts
- Host: GitHub
- URL: https://github.com/observablehq/examples
- Owner: observablehq
- Created: 2020-10-06T01:58:48.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-14T14:09:00.000Z (over 1 year ago)
- Last Synced: 2025-01-17T00:51:04.087Z (5 months ago)
- Language: HTML
- Homepage:
- Size: 980 KB
- Stars: 109
- Watchers: 8
- Forks: 33
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Observable Examples
This repository contains examples of [embedding Observable notebooks](https://observablehq.com/@observablehq/introduction-to-embedding) in a variety of contexts.
| Example | Description |
|---|---|
| ([demo](https://observablehq.github.io/examples/simple-notebook)) [**simple-notebook**](https://github.com/observablehq/examples/tree/main/simple-notebook/) | Embed an entire notebook into the page |
| ([demo](https://observablehq.github.io/examples/simple-constant)) [**simple-constant**](https://github.com/observablehq/examples/tree/main/simple-constant/) | Read the value of a cell (that never changes) |
| ([demo](https://observablehq.github.io/examples/simple-generator)) [**simple-generator**](https://github.com/observablehq/examples/tree/main/simple-generator/) | Read the value of a cell (that may change over time) |
| ([demo](https://observablehq.github.io/examples/custom-data)) [**custom-data**](https://github.com/observablehq/examples/tree/main/custom-data/) | Pass your data into a chart |
| ([demo](https://observablehq.github.io/examples/custom-live-data)) [**custom-live-data**](https://github.com/observablehq/examples/tree/main/custom-live-data/) | Pass live streaming data into a chart |
| ([demo](https://observablehq.github.io/examples/custom-fixed-width)) [**custom-fixed-width**](https://github.com/observablehq/examples/tree/main/custom-fixed-width/) | Set the width of a chart to a fixed value |
| ([demo](https://observablehq.github.io/examples/custom-fluid-width)) [**custom-fluid-width**](https://github.com/observablehq/examples/tree/main/custom-fluid-width/) | Resize a chart when the window is resized |
| ([demo](https://observablehq.github.io/examples/custom-fluid-width-and-height)) [**custom-fluid-width-and-height**](https://github.com/observablehq/examples/tree/main/custom-fluid-width-and-height/) | Resize a chart when its container is resized |
| ([demo](https://observablehq.github.io/examples/custom-library)) [**custom-library**](https://github.com/observablehq/examples/tree/main/custom-library/) | Override the Observable Standard Library |
| ([demo](https://observablehq.github.io/examples/standalone)) [**standalone**](https://github.com/observablehq/examples/tree/main/standalone/) | Self-host an Observable notebook with no external dependencies |
| ([demo](https://observablehq.github.io/examples/versioning)) [**versioning**](https://github.com/observablehq/examples/tree/main/versioning/) | Embed a specific version of a notebook |
| ([demo](https://observablehq.github.io/examples/iframe-resize)) [**iframe-resize**](https://github.com/observablehq/examples/tree/main/iframe-resize/) | Implementing Embedly’s protocol for Iframes that resize to match their contents |
| ([demo](https://observablehq.github.io/examples/react-create-react-app)) [**react-create-react-app**](https://github.com/observablehq/examples/tree/main/react-create-react-app/) | Embed an Observable notebook in a create-react-app application |
| ([demo](https://observablehq.github.io/examples/react-file-attachment)) [**react-file-attachment**](https://github.com/observablehq/examples/tree/main/react-file-attachment/) | Wrap a notebook (with a file attachment) in a React component |
| ([demo](https://observablehq.github.io/examples/react-dataflow)) [**react-dataflow**](https://github.com/observablehq/examples/tree/main/react-dataflow/) | Pass data between a React app and an Observable notebook |
| ([demo](https://observablehq.github.io/examples/react-dataflow-dynamic)) [**react-dataflow-dynamic**](https://github.com/observablehq/examples/tree/main/react-dataflow-dynamic/) | Uses dynamic imports so republishing notebook is immediately reflected |
| ([demo](https://observablehq.github.io/examples/breakout)) [**breakout**](https://github.com/observablehq/examples/tree/main/breakout/) | An extravagant way to demonstrate mutable state |