inkplot-scratch 0.0.0-stage → 1.0.0-beta.1

package/skill/inkplot/topics/data.md

@@ -0,0 +1,141 @@
+# inkplot topic: data sources and big data
+
+For: a million points (decimation), data as columns or from a function, updating live data, reading a chart's data back as a table.
+
+Read `SKILL.md` first (rules, template, and the attributes of `Chart`, `CartesianPlane`, `Axis`, `LinearScale`, `DomainSeries`, `FlatDataSource`, `ObjectDataSource`, `LinePath`, `LinearCurve`). This file has the rest of what this topic needs: examples, notes, and the attributes of its elements. Everything here is exported from `'inkplot'`.
+
+## Large data, and a live update
+
+
+`Decimator` takes a **kernel first, then the source**, and goes where the source would. It cannot carry channels or sit on an `XYSeries`.
+
+```ts check title="A million points, then updates"
+import {
+  Axis,
+  CartesianPlane,
+  Chart,
+  Decimator,
+  DomainSeries,
+  FlatDataSource,
+  LinePath,
+  LinearCurve,
+  LinearScale,
+  MinMaxKernel,
+  PanZoom,
+  lightTheme,
+} from 'inkplot';
+
+const values = new Float64Array(1_000_000);
+for (let i = 0; i < values.length; i++) values[i] = Math.sin(i / 5000) + Math.sin(i / 37) * 0.1;
+const source = new FlatDataSource({ data: values, regularDomain: { start: 0, step: 1 }, isSorted: true });
+
+export const chart = new Chart(
+  { theme: lightTheme },
+  new CartesianPlane(
+    {},
+    new Axis({ orientation: 'bottom' }, new LinearScale()),
+    new Axis({ orientation: 'left' }, new LinearScale()),
+    new DomainSeries(
+      { name: 'Signal' },
+      new Decimator({}, new MinMaxKernel(), source),
+      new LinePath({}, new LinearCurve()),
+    ),
+    new PanZoom(),
+  ),
+);
+
+// New data: set the attribute. Edited in place: tell the source.
+
+export function replace(next: Float64Array) {
+  source.setAttribute('data', next);
+}
+
+export function bump(i: number, v: number) {
+  values[i] = v;
+  source.invalidate();
+}
+```
+
+## Notes
+
+| To… | Use |
+|---|---|
+| Chart data as a table | `readTable(node)` (a source, transform, trendline or `series.data`): typed-array columns and `rows()` |
+
+## Attributes of this topic's elements
+
+An attribute followed by `(required)` must be given. Every element also takes `id`, `meta`, `visible` and `style`.
+
+<!-- api:start -->
+### CompositeDataSource
+
+Separate columns.
+
+**In** a series · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `count` (required) | `number` |  |
+| `domain` (required) | `Column` | Where each row is along the domain: for a made-up domain, `(i) => start + step * i`. |
+| `value` (required) | `Column` |  |
+| `channels` | `Readonly<Record<Channel, Column>>` | Extra columns that bindings and tooltips can address by name. |
+| `isSorted` | `boolean` | The stored points already ascend in the domain. Default false. |
+| `wrap` | `number` | The domain repeats with this period, and the source delivers one more point: the first, again, one period on. |
+
+### SyntheticDataSource
+
+A function sampled when drawn.
+
+**In** a series · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `fn` (required) | `(x: number) => number` | Value at a domain position. |
+| `domain` (required) | `Extent` | The span the function is defined over: the data's whole domain. |
+| `count` | `number` | Number of samples, evenly spaced across the domain, always. |
+| `isSorted` | `boolean` | The stored points already ascend in the domain. Default false. |
+| `wrap` | `number` | The domain repeats with this period, and the source delivers one more point: the first, again, one period on. |
+
+### Decimator
+
+Reduces large data to what the plot can show.
+
+**In** a series · **Holds** 1 kernel, then 1 source
+
+| Attribute | Type | |
+|---|---|---|
+| `resolution` | `number` | Pixel columns reduced to per pixel of plot width. Default 1; raise it for high-DPI output. |
+| `enabled` | `boolean` | Turn it off without removing it. Default true. |
+
+### MinMaxKernel
+
+Keeps the lowest and highest of each pixel column.
+
+**In** Decimator · **Holds** none
+
+No attributes of its own.
+
+### M4Kernel
+
+First, last, lowest and highest of each column.
+
+**In** Decimator · **Holds** none
+
+No attributes of its own.
+
+### LttbKernel
+
+Largest-triangle-three-buckets: keeps the shape.
+
+**In** Decimator · **Holds** none
+
+No attributes of its own.
+
+### StrideKernel
+
+Every nth point.
+
+**In** Decimator · **Holds** none
+
+No attributes of its own.
+<!-- api:end -->

package/skill/inkplot/topics/furniture.md

@@ -0,0 +1,137 @@
+# inkplot topic: title, legend, annotations, accessibility
+
+For: a chart title or caption, a legend, reference lines and callouts, an accessible name and summary.
+
+Read `SKILL.md` first (rules, template, and the attributes of `Chart`, `CartesianPlane`, `Axis`, `LinearScale`, `DomainSeries`, `FlatDataSource`, `ObjectDataSource`, `LinePath`, `LinearCurve`). This file has the rest of what this topic needs: examples, notes, and the attributes of its elements. Everything here is exported from `'inkplot'`.
+
+## Example
+
+```ts check title="Title, legend, reference line and callout"
+import {
+  Axis,
+  CalloutAnnotation,
+  CartesianPlane,
+  Chart,
+  ChartTitle,
+  DomainSeries,
+  FlatDataSource,
+  Legend,
+  LineAnnotation,
+  LinePath,
+  LinearCurve,
+  LinearScale,
+  lightTheme,
+} from 'inkplot';
+
+const line = (name: string, data: number[]) =>
+  new DomainSeries(
+    { name: name },
+    new FlatDataSource({ data: data, regularDomain: { start: 1, step: 1 } }),
+    new LinePath({}, new LinearCurve()),
+  );
+
+export const chart = new Chart(
+  {
+    theme: lightTheme,
+    meta: { title: 'Sales by month', description: 'Two years of monthly sales, 2024 above 2023.' },
+  },
+  new ChartTitle({ text: 'Monthly sales' }),
+  new ChartTitle({ text: 'Source: internal ledger', role: 'caption', side: 'bottom' }),
+  new CartesianPlane(
+    {},
+    new Axis({ orientation: 'bottom', title: 'Month' }, new LinearScale()),
+    new Axis({ orientation: 'left', title: 'Sales (k)' }, new LinearScale()),
+    line('2023', [12, 15, 14, 18, 22, 25]),
+    line('2024', [14, 18, 17, 21, 26, 30]),
+    new LineAnnotation({ value: 20, label: 'Target' }),
+    new CalloutAnnotation({ domain: 6, value: 30, text: 'Best month' }),
+  ),
+  new Legend({ side: 'bottom' }),
+);
+```
+
+`ChartTitle` and `Legend` are children of the **chart**; the annotations are children of the **plane**. `role: 'caption'` makes a smaller title; `side` puts it on another edge. Series appear in the legend by `name`; `toggle` lets a click hide one. `meta: { title }` and `meta: { description }` on the `Chart` are its accessible name and description; `new ChartSummary()` makes a spoken summary from the data.
+## Notes
+
+- `Legend` and the keys: `side` is `'top'`, `'right'`, `'bottom'` or `'left'`; `orientation` is `'horizontal'` or `'vertical'`.
+
+| To… | Use |
+|---|---|
+| Title / caption | `new ChartTitle({ text: '…' })`, `new ChartTitle({ text: '…', role: 'caption' })` |
+| Accessible name | `meta: { title }`, `meta: { description }` on the `Chart`; `new ChartSummary()` for an automatic one |
+
+## Attributes of this topic's elements
+
+An attribute followed by `(required)` must be given. Every element also takes `id`, `meta`, `visible` and `style`.
+
+<!-- api:start -->
+### ChartTitle
+
+Text across the top or bottom: a title, subtitle or caption.
+
+**In** Chart · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `text` (required) | `string` | The words. |
+| `role` | `TitleRole` | What it is, which decides its look and (unless `side` says) where it goes. Default 'title'. |
+| `side` | `'top' \| 'bottom'` | The edge it spans. Default: the top, except for a caption, which goes at the bottom. |
+
+### Legend
+
+Lists the named series; click to hide or show.
+
+**In** Chart · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `side` | `Side` | The edge of the chart it sits along. Default 'right'. |
+| `orientation` | `'vertical' \| 'horizontal'` | Entries in a column or a row. Default: along its side, so a column on the left and right, a row on the top and bottom. |
+| `title` | `string` | A heading above the entries. |
+| `toggle` | `boolean` | Clicking an entry hides or shows its series. Default true. |
+
+### ChartSummary
+
+A spoken summary of the chart, for screen readers (English, replaceable).
+
+**In** Chart · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `text` | `(facts: ChartFacts) => string` | Words the facts. Default: English sentences. |
+| `roleDescription` | `string` | What the chart is, as a screen reader announces it. Default 'chart'. |
+
+### LineAnnotation
+
+A reference line in data terms.
+
+**In** a plane · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `value` | `number` | A horizontal line at this value (give one of `value`, `domain`, or `from` and `to`). |
+| `domain` | `number` | A vertical line at this domain (give one of `value`, `domain`, or `from` and `to`). |
+| `from` | `readonly [domain: number, value: number]` | One end of a diagonal line, as `[domain, value]` (with `to`). |
+| `to` | `readonly [domain: number, value: number]` | The other end of a diagonal line, as `[domain, value]` (with `from`). |
+| `domainAxis` | `ElementRef<Axis>` | Default: the plane's first axis, as for a series. |
+| `valueAxis` | `ElementRef<Axis>` | Default: the plane's second axis. |
+| `label` | `string` | Text beside the line. |
+| `stroke` | `string` | Line colour: the same as `style: { annotationLine: { color } }`, set directly. |
+| `strokeWidth` | `number` | Line width in pixels: the same as `style: { annotationLine: { width } }`, set directly. |
+
+### CalloutAnnotation
+
+A note attached to a data point.
+
+**In** a plane · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `domainAxis` | `ElementRef<Axis>` | Default: the plane's first axis. |
+| `valueAxis` | `ElementRef<Axis>` | Default: the plane's second axis. |
+| `domain` (required) | `number` | The point being called out, in data space. |
+| `value` (required) | `number` | The value of the point being called out. |
+| `text` (required) | `string` | What it says. |
+| `dx` | `number` | Where the middle of the box is, in pixels from the point. |
+| `dy` | `number` | Pixels down from the point to the text box (negative is up). |
+<!-- api:end -->

package/skill/inkplot/topics/interaction.md

@@ -0,0 +1,169 @@
+# inkplot topic: interaction
+
+For: tooltips, a crosshair, pan and zoom, drag-to-zoom, brushing a range, clicks and hovers, touch.
+
+Read `SKILL.md` first (rules, template, and the attributes of `Chart`, `CartesianPlane`, `Axis`, `LinearScale`, `DomainSeries`, `FlatDataSource`, `ObjectDataSource`, `LinePath`, `LinearCurve`). This file has the rest of what this topic needs: examples, notes, and the attributes of its elements. Everything here is exported from `'inkplot'`.
+
+## Tooltip, crosshair, pan and zoom, reference line
+
+
+`Cursor` is a child of the **chart**; `PanZoom` and annotations are children of the **plane**.
+
+```ts check title="Interactive"
+import {
+  Axis,
+  CartesianPlane,
+  Chart,
+  ChartTooltip,
+  Crosshair,
+  Cursor,
+  DomainSeries,
+  FlatDataSource,
+  LineAnnotation,
+  LinePath,
+  LinearCurve,
+  LinearScale,
+  PanZoom,
+  lightTheme,
+} from 'inkplot';
+
+export const chart = new Chart(
+  { theme: lightTheme },
+  new CartesianPlane(
+    { meta: { title: 'Latency' } },
+    new Axis({ orientation: 'bottom' }, new LinearScale()),
+    new Axis({ orientation: 'left', title: 'ms' }, new LinearScale()),
+    new DomainSeries(
+      { name: 'p95', hit: 'line' },
+      new FlatDataSource({ data: [120, 135, 128, 160, 142, 150, 138], regularDomain: { start: 0, step: 1 } }),
+      new LinePath({}, new LinearCurve()),
+    ),
+    new LineAnnotation({ value: 150, label: 'Target', stroke: '#c0392b' }),
+    new PanZoom(),
+  ),
+  new Cursor({ mode: 'shared' }, new Crosshair(), new ChartTooltip()),
+);
+```
+
+## Notes
+
+- A tooltip's `format` gets a `Hit`: `hit.series` (its `attrs.name`), `hit.first` and `hit.second` (the point's two coordinates in data terms: for a line chart the domain, e.g. a date in milliseconds, and the value), `hit.index`, `hit.channels` (bound channels by name). Hover is live in a browser only; `toSvgString` draws no tooltip, so test the text by calling your `format` on a sample.
+
+| To… | Use |
+|---|---|
+| Click a point | `new PointerListener({ onClick: (info) => info.hit && … })` in the plane (before `PanZoom`) |
+| Select a range and report it (no zoom) | `new Brush({ mode: 'x', onBrush: ... })` before `new PanZoom()`; `brush.select()` / `clear()` from code |
+| Zoom to a dragged box | `new BoxZoom({ mode: 'auto' })` in the plane, **before** `new PanZoom()` (Shift-drag; `activate: 'always'` for every drag) |
+| Reset zoom (button) | `chart.resetViews()`; know when it is zoomed with `onViewChange` on an `Axis` |
+| Touch | Default: one finger scrolls the page, two pinch the chart; `new PanZoom({ touch: 'always' })` for one-finger pan |
+| Tooltip text | ``new ChartTooltip({ format: (hit) => `${hit.series.attrs.name}: ${hit.second}` })`` |
+
+## Attributes of this topic's elements
+
+An attribute followed by `(required)` must be given. Every element also takes `id`, `meta`, `visible` and `style`.
+
+<!-- api:start -->
+### ChartTooltip
+
+A box of text at the cursor.
+
+**In** Cursor · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `follow` | `boolean` | Whether the box moves with the cursor, with no arm, or is set beside what is read, with an arm to it. Default: moves with the cursor when the cursor is 'shared' (there is no one point to be beside), else set beside the point. |
+| `swatch` | `boolean` | A sample of the series (its line, box or marker, as drawn on the plot) before its name, or without one before its first line. Default false. |
+| `format` | `(hit: Hit) => string` | The text for one hit. Default: the series name, then each coordinate (with its axis' title if it has one) and the channels. |
+| `announce` | `boolean` | Tell a screen reader what the box says when the cursor is moved by keyboard (see `Platform.announce`), so it can be read without seeing it. Default true. |
+
+### Cursor
+
+Finds what the pointer or keyboard is on; its children draw it.
+
+**In** Chart · **Holds** Crosshair, ChartTooltip
+
+| Attribute | Type | |
+|---|---|---|
+| `mode` | `'nearest' \| 'shared'` | What it finds: the 'nearest' point, or every series 'shared' at its place along the first axis. Default 'nearest'. |
+| `interpolate` | `boolean` | Read the line between its two points at the cursor instead of reporting a point. Default false. |
+| `plane` | `ElementRef<Plane>` | The plane it works in. Default: the plane the pointer is over, and the first plane for the keyboard. |
+| `keys` | `CursorKeys \| false` | Keys for moving it from the keyboard, or `false` for none (and no tab stop). |
+
+### Crosshair
+
+Guide lines through the cursor.
+
+**In** Cursor · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `lines` | `'first' \| 'second' \| 'both'` | Which guide: the line of constant first coordinate (across a line chart: vertical), of the second, or both. Default 'both'. |
+| `dots` | `boolean` | A dot in the series' colour on each reading under the cursor. Default false. |
+| `dotSize` | `number` | Radius of those dots, in pixels. Default 4. |
+| `snap` | `boolean` | Put the lines through the first reading (a point) rather than through the cursor itself. Default false. |
+
+### PanZoom
+
+Drag, wheel, pinch, touch and keys change the view.
+
+**In** a plane · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `axes` | `readonly ElementRef<Axis>[]` | The axes it may move, as elements or ids. Default: all of the plane's that can be dragged along: not the rim of a polar or radar plane. |
+| `direction` | `'both' \| 'horizontal' \| 'vertical'` | Which way things may move. Default 'both'. |
+| `pan` | `boolean` | Drag with the primary button to pan. Default true. |
+| `zoom` | `boolean` | Turn the wheel to zoom about the pointer. Default true. |
+| `limit` | `boolean` | Keep the view inside the natural range of each axis, so there is no panning off the data or zooming out past it. Default true. |
+| `zoomSpeed` | `number` | Zoom per wheel pixel, as a natural-log factor. Default 0.002, which is about 20% for one notch of a typical wheel. |
+| `axisZoom` | `boolean` | With the pointer (or both fingers) over an axis, a wheel turn, a pinch or a drag moves that axis alone. Default true. |
+| `pinchSpeed` | `number` | Zoom per pixel of a pinch on a trackpad, which browsers report as small wheel turns with Ctrl held. Default 0.02, ten times the wheel's step per pixel. |
+| `touch` | `'two-finger' \| 'always'` | What a touch does. 'two-finger' (the default): one finger scrolls the page as usual, and two pinch and pan the chart. 'always': one finger pans the chart too, and the page cannot be scrolled from it. |
+| `inertia` | `boolean` | A finger that lets go while still moving carries the view on, slowing to a stop (a flick). Default true. |
+| `resetOnDoubleClick` | `boolean` | Two quick presses put every axis back to its natural range. Default true. |
+| `keys` | `PanZoomKeys \| false` | The keys, once the plot has keyboard focus. |
+| `keyStep` | `number` | How far an arrow moves the view, as a fraction of it. Default 0.1. |
+| `keyZoom` | `number` | The factor of one press of a zoom key. Default 1.25. |
+
+### BoxZoom
+
+Drag a box (Shift by default) to zoom to it. Before PanZoom.
+
+**In** a plane · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `axes` | `readonly ElementRef<Axis>[]` | The axes it may zoom, as elements or ids. Default: all of the plane's that can be followed along (not the rim of a polar plane). |
+| `activate` | `'shift' \| 'always'` | When a drag makes a box: with Shift held (the default), so a plain drag can pan, or always. |
+| `mode` | `'xy' \| 'x' \| 'y' \| 'auto'` | Which axes the box zooms. Default 'xy'. |
+| `minSize` | `number` | Smallest side of a box, in pixels, along an axis it zooms; below that the box does nothing. Default 8. |
+| `onZoom` | `(box: { x: number; y: number; width: number; height: …` | Called after a zoom, with the box in plot pixels. |
+
+### Brush
+
+Drag a range to select it and report it with onBrush; the selection stays drawn. Before PanZoom.
+
+**In** a plane · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `axes` | `readonly ElementRef<Axis>[]` | The axes it may cover, as elements or ids. Default: all of the plane's that can be followed along. |
+| `activate` | `'shift' \| 'always'` | When a drag brushes: always (the default) or with Shift held, to leave a plain drag to `PanZoom`. |
+| `mode` | `'xy' \| 'x' \| 'y'` | Which axes it covers. Default 'xy'. |
+| `minSize` | `number` | Smallest side of a brush, in pixels, along an axis it covers; below that a drag only clears. Default 4. |
+| `live` | `boolean` | Call `onBrush` while dragging too. Default false. |
+| `onBrush` | `(selection: BrushSelection \| null) => void` | Called with the selection, or null when it is cleared. |
+
+### PointerListener
+
+Calls your functions on hover, click and drag.
+
+**In** a plane · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `onHover` | `(info: PointerInfo) => void` | The pointer came onto a point, left it, or moved to another: `info.hit` is the new one, null for none. |
+| `onClick` | `(info: PointerInfo) => void` | A press and release in the same place: on a point, or `info.hit` null on empty plot. |
+| `onDrag` | `(info: DragInfo) => void` | A drag that began on a point. |
+| `dragThreshold` | `number` | How far in pixels the pointer must travel before a press is a drag and no longer a click. Default 3. |
+<!-- api:end -->

package/skill/inkplot/topics/lines-bars.md

@@ -0,0 +1,201 @@
+# inkplot topic: lines, areas and bars
+
+For: bars (grouped, stacked), areas, smooth and stepped lines, curves, gaps in the data, several series sharing a plane.
+
+Read `SKILL.md` first (rules, template, and the attributes of `Chart`, `CartesianPlane`, `Axis`, `LinearScale`, `DomainSeries`, `FlatDataSource`, `ObjectDataSource`, `LinePath`, `LinearCurve`). This file has the rest of what this topic needs: examples, notes, and the attributes of its elements. Everything here is exported from `'inkplot'`.
+
+## Bars on categories
+
+
+```ts check title="Bars"
+import {
+  Axis,
+  BandScale,
+  BarPath,
+  CartesianPlane,
+  Chart,
+  DomainSeries,
+  FlatDataSource,
+  LinearScale,
+  lightTheme,
+} from 'inkplot';
+
+export const chart = new Chart(
+  { theme: lightTheme },
+  new CartesianPlane(
+    {},
+    new Axis({ orientation: 'bottom' }, new BandScale({ categories: ['Q1', 'Q2', 'Q3', 'Q4'] })),
+    new Axis({ orientation: 'left', title: 'Revenue' }, new LinearScale()),
+    new DomainSeries(
+      { name: '2024' },
+      new FlatDataSource({ data: [42, 58, 51, 73], regularDomain: { start: 0, step: 1 } }),
+      new BarPath(),
+    ),
+  ),
+);
+```
+
+Stacked or side by side: wrap several `DomainSeries` in `new Stack({ mode: 'stack' }, …)` (or `"group"`), add `new Legend({ side: 'bottom' })` to the `Chart`.
+
+## Notes
+
+- `Stack` `mode`: `'stack'`, `'group'`, `'normalize'`, `'center'`.
+- `BarPath` bars start at `baseline` (default 0, and the axis includes it); the tallest bar touches the top of the plot, so add `padding: 0.05` (a fraction of the span) to the value `Axis` for headroom.
+- Curves: `LinearCurve`, `MonotoneCurve`, `StepCurve`, `NaturalCurve`, `CardinalCurve`, `CatmullRomCurve`, `BasisCurve`, `BumpCurve`, `QuadraticCurve`, `ArcCurve`.
+- `hit` on a series: `'point'`, `'line'`, `'area'`, `'shape'` or `false`. `gaps`: `'break'` (default), `'connect'`, `'zero'`.
+
+| To… | Use |
+|---|---|
+| Smooth lines | `new LinePath({}, new MonotoneCurve())`; steps: `new StepCurve({ mode: 'after' })` |
+| Series gaps | `NaN` values are gaps; `gaps: 'connect'` on the series to cross them |
+| Hide a series | `series.setAttribute('visible', false)` |
+
+## Attributes of this topic's elements
+
+An attribute followed by `(required)` must be given. Every element also takes `id`, `meta`, `visible` and `style`.
+
+<!-- api:start -->
+### Stack
+
+Series that share axes and are laid on each other or side by side.
+
+**In** a plane · **Holds** DomainSeries, any number
+
+| Attribute | Type | |
+|---|---|---|
+| `mode` | `StackMode` | How the members' values are laid out. Default 'stack'. |
+| `align` | `StackAlign` | How rows are matched up when the members' domains differ. Default 'strict': they must not. |
+
+### AreaPath
+
+The region between a line and a baseline.
+
+**In** a series · **Holds** 1 curve (required)
+
+| Attribute | Type | |
+|---|---|---|
+| `baseline` | `number` | The value the area is filled from, kept inside the value axis' range. Default 0. |
+| `stroke` | `string` | Outline colour (a CSS colour). Default: from the theme. |
+| `strokeWidth` | `number` | Outline width in pixels. Default: from the theme. |
+| `fill` | `string` | Fill colour (a CSS colour; 'none' for no fill). Default: from the theme. |
+| `opacity` | `number` | Opacity from 0 to 1. Default 1. |
+| `bind` | `Bindings<Bindable>` | Attributes fed from data instead of fixed. |
+| `maxNodes` | `number` | Most paths this renderer may create. Default 1000. |
+
+### MonotoneCurve
+
+A smooth curve that never overshoots.
+
+**In** LinePath or AreaPath · **Holds** none
+
+No attributes of its own.
+
+### NaturalCurve
+
+A natural cubic spline.
+
+**In** LinePath or AreaPath · **Holds** none
+
+No attributes of its own.
+
+### CardinalCurve
+
+A cardinal spline.
+
+**In** LinePath or AreaPath · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `tension` | `number` | How far the curve is tightened towards straight lines, 0 (the Catmull-Rom spline) to 1. Default 0. |
+
+### CatmullRomCurve
+
+A Catmull-Rom spline.
+
+**In** LinePath or AreaPath · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `alpha` | `number` | The spacing of the knots: 0 even, 0.5 centripetal, 1 chordal. Default 0.5. |
+
+### BasisCurve
+
+A B-spline that smooths past the points.
+
+**In** LinePath or AreaPath · **Holds** none
+
+No attributes of its own.
+
+### BumpCurve
+
+S-shaped joins.
+
+**In** LinePath or AreaPath · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `along` | `'x' \| 'y'` | Whether the level ends are along x (a line level at each point) or y. Default: along the series' first axis. |
+
+### QuadraticCurve
+
+Quadratic joins.
+
+**In** LinePath or AreaPath · **Holds** none
+
+No attributes of its own.
+
+### ArcCurve
+
+Circular arcs.
+
+**In** LinePath or AreaPath · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `bend` | `number` | The rise of each arc as a fraction of its chord, positive bulging to the left of the way along. Default 0.3. |
+
+### StepCurve
+
+Levels and jumps.
+
+**In** LinePath or AreaPath · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `mode` | `StepMode` | Where the value changes between one point and the next. Default 'after'. |
+
+### BarPath
+
+Bars, in one path.
+
+**In** a series · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `stroke` | `string` | Outline colour (a CSS colour). Default: from the theme. |
+| `strokeWidth` | `number` | Outline width in pixels. Default: from the theme. |
+| `fill` | `string` | Fill colour (a CSS colour; 'none' for no fill). Default: from the theme. |
+| `opacity` | `number` | Opacity from 0 to 1. Default 1. |
+| `bind` | `Bindings<Bindable>` | Attributes fed from data instead of fixed. |
+| `maxNodes` | `number` | Most paths this renderer may create. Default 1000. |
+| `width` | `number` | Fraction of the room each bar fills. Default: a band's own `bandwidth`, else 0.8. |
+| `baseline` | `number` | The value bars grow from when there is no stack to say. Default 0. |
+
+### BarLinePath
+
+Bars drawn as stems.
+
+**In** a series · **Holds** none
+
+| Attribute | Type | |
+|---|---|---|
+| `cap` | `'butt' \| 'round' \| 'square'` | How the end of a stem is finished: 'butt' (flat, at the value), 'round' or 'square' (both reach half a width past). Default 'butt'. |
+| `stroke` | `string` | Outline colour (a CSS colour). Default: from the theme. |
+| `strokeWidth` | `number` | Outline width in pixels. Default: from the theme. |
+| `fill` | `string` | Fill colour (a CSS colour; 'none' for no fill). Default: from the theme. |
+| `opacity` | `number` | Opacity from 0 to 1. Default 1. |
+| `bind` | `Bindings<Bindable>` | Attributes fed from data instead of fixed. |
+| `maxNodes` | `number` | Most paths this renderer may create. Default 1000. |
+| `width` | `number` | Fraction of the room each bar fills. Default: a band's own `bandwidth`, else 0.8. |
+| `baseline` | `number` | The value bars grow from when there is no stack to say. Default 0. |
+<!-- api:end -->