Overview
A concise JavaScript library for exploratory data visualization from the creators of D3.
Observable Plot gives you a compact grammar for composing marks, scales, and transforms. It sits at a higher level than raw D3 while staying flexible enough for serious analytical charts.
Why Choose Observable Plot?
- Clean grammar-of-graphics style API
- Built by the team behind D3 and Observable
- Excellent for exploratory and statistical charts
- Composable marks, facets, and transforms
Real-World Applications
Great for analytical apps, research tools, Observable notebooks, and product features that need expressive charts without writing every SVG attribute by hand.
Example Charts
Live Observable Plot demos — bar, line, and scatter.
Bar Chart
Line Chart
Scatter Plot
Example Code
Minimal getting-started snippet for Observable Plot.
// npm install @observablehq/plot
import * as Plot from "@observablehq/plot";
const data = [
{ label: "A", value: 28 },
{ label: "B", value: 55 },
{ label: "C", value: 43 },
{ label: "D", value: 72 },
];
document.getElementById("chart").append(
Plot.plot({
width: 420,
height: 240,
marks: [
Plot.barY(data, { x: "label", y: "value", fill: "#e8b84a" }),
],
})
);