Learn OBSERVABLEHQ with Real Code Examples

md`Hello World`

A simple Observable cell displaying 'Hello World'.

import {scaleBand, scaleLinear, max} from "d3"

const data = [4, 8, 15, 16, 23, 42]

const x = scaleBand()
    .domain(d3.range(data.length))
    .range([0, 420])
    .padding(0.1)

const y = scaleLinear()
    .domain([0, max(data)])
    .range([0, 120])

svg`<svg width=420 height=120>
    ${data.map((d, i) => `<rect x="${x(i)}" y="${120 - y(d)}" width="${x.bandwidth()}" height="${y(d)}"></rect>`).join("")}
</svg>`

A basic D3.js bar chart defined in an Observable cell.

viewof n = Inputs.range({min: 1, max: 100, step: 1, value: 50})
md`Value: **${n}**`

A slider input that updates the displayed value reactively.

import {now} from "@observablehq/stdlib"
md`${now}`

A cell that automatically updates to show the current time.

import * as Plot from "@observablehq/plot"

Plot.plot({
    marks: [
        Plot.lineY([1, 4, 2, 8, 3])
    ]
})

A basic line chart using Observable Plot.

data = fetch("https://jsonplaceholder.typicode.com/todos/1").then(r => r.json())

Loads JSON data from a URL inside an Observable cell.

html`<div style="padding:20px; background:#eee;">Hello from HTML!</div>`

Renders custom HTML inside a notebook cell.

mutable counter = 0

button = html`<button>Increment</button>`
button.onclick = () => mutable counter++

md`Counter: **${counter}**`

Uses mutable state to update a counter.

import {Generators} from "@observablehq/stdlib"
Generators.observe(notify => {
    setInterval(() => notify(Math.random()), 1000)
})

Generates a new random number every second using Generators.

import * as d3 from "d3"

const data = Array.from({length: 20}, () => ({x: Math.random()*100, y: Math.random()*100}))

svg`<svg width=300 height=300>
    ${data.map(d => `<circle cx="${d.x}" cy="${d.y}" r="4" fill="steelblue"></circle>`).join("")}
</svg>`

A simple scatter plot made with D3.js.