# Observable Plot — Concise API for Exploratory Data Visualization

> A JavaScript library for exploratory data visualization with a concise, layered grammar-of-graphics API.

## Install

Save in your project root:

# Observable Plot — Concise API for Exploratory Data Visualization

## Quick Use
```bash
npm install @observablehq/plot
```
```javascript
import * as Plot from "@observablehq/plot";

const data = [
  { year: 2020, value: 30 },
  { year: 2021, value: 45 },
  { year: 2022, value: 60 }
];
const chart = Plot.plot({
  marks: [Plot.lineY(data, { x: "year", y: "value" })]
});
document.body.appendChild(chart);
```

## Introduction
Observable Plot is a JavaScript library by the team behind D3.js, designed to make exploratory data visualization fast and accessible. It emphasizes concise, readable code where common charts require just a few lines while remaining flexible enough for custom visualizations.

## What Observable Plot Does
- Creates common chart types (bar, line, area, dot, cell, rule, text) with one-liner mark functions
- Applies statistical transforms: bin, group, stack, normalize, window, and regression
- Handles faceted layouts for small multiples with automatic axis sharing
- Renders to SVG by default for crisp, print-ready output
- Supports geographic projections and GeoJSON rendering for maps

## Architecture Overview
Plot generates SVG elements directly in the DOM. Each mark function produces an array of SVG elements positioned by automatically inferred scales. The library follows a functional pattern: Plot.plot() accepts a declarative options object containing marks, scales, and layout properties. It builds on D3's scale and shape primitives but hides the bindingsboilerplate behind a concise API.

## Self-Hosting & Configuration
- Install from npm or load from a CDN (jsDelivr, unpkg)
- Import as an ES module in any modern bundler (Vite, esbuild, webpack)
- Use inside Observable notebooks for interactive data exploration with live code cells
- Integrate with frameworks like React, Svelte, or Vue by appending the returned SVG node to a ref
- Customize scales, axes, and colors via the top-level options object

## Key Features
- Concise mark-based API where each chart element is a single function call
- Automatic scale inference based on data types (temporal, nominal, quantitative)
- Built-in transforms for binning, grouping, stacking, and smoothing data
- Faceting for small multiples with shared or independent axes
- First-class support for color scales, legends, and accessibility attributes

## Comparison with Similar Tools
- **D3.js** — lower-level and more flexible; Plot provides higher-level abstractions for common charts
- **Vega-Lite** — JSON-based grammar; Plot uses a JavaScript API that integrates naturally with code
- **Chart.js** — canvas-based with preset chart types; Plot offers more composable and customizable marks
- **Recharts** — React-specific charting; Plot is framework-agnostic and renders to SVG directly
- **Matplotlib (Python)** — similar exploratory role in Python; Plot fills the same niche for JavaScript

## FAQ
**Q: How does Observable Plot relate to D3?**
A: Plot is built by the same team and uses D3 scales and shapes internally. It is a higher-level library designed for faster exploratory charting, while D3 remains the choice for fully custom visualizations.

**Q: Can I use Plot outside of Observable notebooks?**
A: Yes. Plot is a standalone npm package that works in any JavaScript environment. Observable notebooks are optional and primarily useful for interactive exploration.

**Q: Does Plot support interactivity?**
A: Plot focuses on static SVG output by default. For interactive features like tooltips or brushing, combine Plot with D3 event listeners or use it within Observable's reactive runtime.

**Q: Is Plot suitable for dashboards?**
A: Yes. Plot generates lightweight SVG that can be embedded in dashboards. For responsive sizing, wrap the output in a container and regenerate on resize.

## Sources
- https://github.com/observablehq/plot
- https://observablehq.com/plot/

---
Source: https://tokrepo.com/en/workflows/asset-0dd4e245
Author: AI Open Source