Learn OBSERVABLEHQ with Real Code Examples

Start with simple reactive cells and plots

Explore D3.js and Plot.js visualizations

Practice linking cells reactively

Build interactive dashboards and data stories

Publish and share notebooks publicly

Week 1: Learn notebook basics and reactive cells

Week 2: Visualize simple datasets with Plot or Vega

Week 3: Build interactive visualizations with D3.js

Week 4: Combine multiple reactive cells into dashboards

Week 5: Share, fork, and collaborate on notebooks

What is ObservableHQ?

How does reactive programming work in notebooks?

What types of visualizations can be created?

How do ObservableHQ notebooks differ from Jupyter?

How can you embed notebooks into web pages?

cell = computation unit

import … from URL -> include JS library

mutable -> reactive variable

md`…` -> Markdown cell

viewof … -> interactive input element

Interactive Data Visualization with Observable

JavaScript and D3 for Observable Notebooks

Reactive Programming in the Browser

Mastering Plot.js for Data Visualization

Building Interactive Dashboards on Observable

Getting Started with ObservableHQ

Reactive Cells and Dependencies

Creating Charts with Plot.js

Interactive Visualizations with D3.js

Embedding Notebooks into Web Pages

https://observablehq.com/@observablehq/introduction-to-observable

https://observablehq.com/@observablehq/guide

ObservableHQ community forum

Mike Bostock’s D3.js tutorials

Notebooks gallery for examples

Educational YouTube tutorials

GitHub repositories of shared notebooks

ObservableHQ community forum

Mike Bostock’s D3.js tutorials

Interactive notebook examples gallery

Educational resources and workshops

GitHub repositories of shared notebooks