observable-plot

Files (49)

• SKILL.md
• curves.md · features/
• facets.md · features/
• interactions.md · features/
• intervals.md · features/
• legends.md · features/
• markers.md · features/
• projections.md · features/
• scales.md · features/
• shorthand.md · features/
• area.md · marks/
• arrow.md · marks/
• auto.md · marks/
• axis.md · marks/
• bar.md · marks/
• bollinger.md · marks/
• box.md · marks/
• cell.md · marks/
• contour.md · marks/
• crosshair.md · marks/
• delaunay.md · marks/
• density.md · marks/
• difference.md · marks/
• dot.md · marks/
• frame.md · marks/
• geo.md · marks/
• grid.md · marks/
• hexgrid.md · marks/
• image.md · marks/
• line.md · marks/
• linear-regression.md · marks/
• link.md · marks/
• raster.md · marks/
• rect.md · marks/
• rule.md · marks/
• text.md · marks/
• tick.md · marks/
• tip.md · marks/
• tree.md · marks/
• vector.md · marks/
• waffle.md · marks/
• bin.md · transforms/
• dodge.md · transforms/
• group.md · transforms/
• hexbin.md · transforms/
• normalize.md · transforms/
• select.md · transforms/
• stack.md · transforms/
• window.md · transforms/

SKILL.md (first lines)

# Observable Plot

Observable Plot is a JavaScript library for exploratory data visualization. It's built on D3 and provides a concise, declarative API for creating charts.

## Installation

```bash
npm install @observablehq/plot
```

Or via CDN:
```html
<script type="module">
import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm";
</script>
```

## Core Concepts

### Plot.plot(options)

The main function that renders a visualization. Returns an SVG or HTML figure element.

```javascript
Plot.plot({
  marks: [
    Plot.dot(data, {x: "weight", y: "height"})
  ]
})
```

### Key Options

| Option | Description | Default |
|--------|-------------|---------|
| `width` | Outer width in pixels | 640 |
| `height` | Outer height in pixels | auto |
| `margin` | All margins | varies |
| `marginTop/Right/Bottom/Left` | Individual margins | varies |
| `marks` | Array of marks to render | required |
| `color` | Color scale options | auto |
| `x`, `y` | Position scale options | auto |
| `title`, `subtitle` | Chart titles | none |
| `caption` | Figure caption | none |

### Data Format

Plot expects tabular data as arrays of objects:

```javascript
const data = [
  {date: new Date("2024-01-01"), value: 100, category: "A"},
  {date: new Date("2024-01-02"), value: 120, category: "B"}
];
```

### Channel Mapping

Map data columns to visual properties:

```javascript
Plot.dot(data, {
  x: "date",        // column name
  y: "value",       // column name
  fill: "category", // color by category
  r: 5              // constant radius
})
```

## Quick Examples

### Line Chart
```javascript
Plot.lineY(data, {x: "date", y: "value"}).plot()
```

### Bar Chart
```javascript
Plot.barY(data, {x: "category", y: "value"}).plot()
```

### Scatter Plot
```javascript
Plot.dot(data, {x: "weight", y: "height", fill: "species"}).plot()
```

### Histogram
```javascript
Plot.rectY(data, Plot.binX({y: "count"}, {x: "value"})).plot()
```

### Area Chart
```javascript
Plot.areaY(data, {x: "date", y: "value", fill: "steelblue"}).plot()
```

## Documentation Files

This skill includes detailed documentation for each feature:

### Marks (Visual Elements)
- `marks/area.md` - Area charts and stacked areas
- `marks/bar.md` - Bar charts (horizontal and vertical)
- `marks/dot.md` - Scatter plots and bubble charts
- `marks/line.md` - Line charts
- `marks/rect.md` - Rectangles, histograms, heatmaps
- `marks/text.md` - Text labels and annotations
- `marks/rule.md` - Reference lines
- `marks/cell.md` - Heatmaps with ordinal dimensions
- `marks/tip.md` - Interactive tooltips
- `marks/axis.md` - Custom axes
- `marks/geo.md` - Geographic/map visualizations
- `marks/link.md` - Connections between points
- `marks/arrow.md` - Directed arrows
- `marks/vector.md` - Vector fields
- `marks/tick.md` - Tick marks
- `marks/box.md` - Box plots
- `marks/frame.md` - Frame decoration
- `marks/image.md` - Image glyphs

From maragudk/fabrik, MIT.

More from maragudk/fabrik