Learn OBSERVABLEHQ with Real Code Examples

ObservableHQ uses reactive programming: cells update automatically when dependent data changes.

Supports JavaScript and TypeScript with seamless integration of D3.js, Vega, Plot, and other visualization libraries.

Enables embedding interactive visualizations and live code outputs in web pages.

Facilitates collaborative notebooks that can be forked, shared, and published.

Designed for both data scientists, analysts, and developers exploring interactive data-driven applications.

Code editor with live preview of outputs

Reactive dependency tracking between cells

Importing external JS libraries with URL imports

Interactive charts, graphs, and maps

Versioned and forkable notebooks

Notebook - interactive document with live code cells

Cell - unit of computation or display (JS, Markdown, HTML)

Reactive - cells auto-update when dependent data changes

Imports - include external JS libraries or other notebooks

Visualizations - charts, plots, and interactive graphics

Notebooks contain cells organized sequentially

Cells can be code, Markdown, or HTML

Reactive cells reference outputs of other cells

Assets (data, images) imported via URLs

Optional metadata for title, description, and licensing

Create a new notebook or fork an existing one

Write JavaScript or TypeScript code in cells

Visualize outputs using libraries like D3 or Plot

Link cells reactively so updates propagate automatically

Share, publish, or embed the notebook online

Beginner: simple charts and visual experiments

Intermediate: interactive dashboards with multiple linked cells

Advanced: complex reactive visualizations with D3.js

Expert: collaborative data analysis and storytelling

Educator: teaching JavaScript and visualization concepts

ObservableHQ vs Jupyter -> ObservableHQ: JS/reactive, browser; Jupyter: Python, local or cloud

ObservableHQ vs D3 standalone -> ObservableHQ: interactive reactive notebooks; D3 standalone: static web pages

ObservableHQ vs Google Colab -> ObservableHQ: JS and visualization-focused; Colab: Python, ML-focused

ObservableHQ vs CodePen -> ObservableHQ: reactive notebooks with visualization; CodePen: front-end demos

ObservableHQ vs Tableau -> ObservableHQ: code-based interactivity; Tableau: GUI-based dashboards

2017 - ObservableHQ launched by Mike Bostock

2018 - Added enhanced reactive cells and Plot library integration

2019 - Improved collaboration and publishing features

2020 - Enhanced embedding and visualization support

2021–2025 - Continuous updates, new visualization libraries, and enterprise features

Notebook - interactive document with cells

Cell - unit of computation or display

Reactive - automatic updates based on dependencies

Fork - copy a notebook to modify independently

Observable Plot - simple API for creating charts