diff --git a/docs/api.md b/docs/api.md
index 308f8e3d12..fc5b914929 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -10,7 +10,7 @@ import {data} from "./data/api.data";
@@ -18,7 +18,7 @@ import {data} from "./data/api.data";
diff --git a/docs/features/formats.md b/docs/features/formats.md
index 628c54f248..8455dd5902 100644
--- a/docs/features/formats.md
+++ b/docs/features/formats.md
@@ -9,7 +9,7 @@ import * as d3 from "d3";
These helper functions are provided for convenience as a **tickFormat** option for the [axis mark](../marks/axis.md), as the **text** option for a [text mark](../marks/text.md), or other use. See also [d3-format](https://d3js.org/d3-format), [d3-time-format](https://d3js.org/d3-time-format), and JavaScript’s built-in [date formatting](https://observablehq.com/@mbostock/date-formatting) and [number formatting](https://observablehq.com/@mbostock/number-formatting).
-## formatIsoDate(*date*)
+## formatIsoDate(*date*) {#formatIsoDate}
```js
Plot.formatIsoDate(new Date("2020-01-01T00:00:00.000Z")) // "2020-01-01"
@@ -17,7 +17,7 @@ Plot.formatIsoDate(new Date("2020-01-01T00:00:00.000Z")) // "2020-01-01"
Given a *date*, returns the shortest equivalent ISO 8601 UTC string. If the given *date* is not valid, returns `"Invalid Date"`. See [isoformat](https://github.com/mbostock/isoformat).
-## formatWeekday(*locale*, *format*)
+## formatWeekday(*locale*, *format*) {#formatWeekday}
:::plot https://observablehq.com/@observablehq/plot-format-helpers
```js
@@ -31,7 +31,7 @@ Plot.formatWeekday("es-MX", "long")(0) // "domingo"
Returns a function that formats a given week day number (from 0 = Sunday to 6 = Saturday) according to the specified *locale* and *format*. The *locale* is a [BCP 47 language tag](https://tools.ietf.org/html/bcp47) and defaults to U.S. English. The *format* is a [weekday format](https://tc39.es/ecma402/#datetimeformat-objects): either *narrow*, *short*, or *long*; if not specified, it defaults to *short*.
-## formatMonth(*locale*, *format*)
+## formatMonth(*locale*, *format*) {#formatMonth}
:::plot https://observablehq.com/@observablehq/plot-format-helpers
```js
diff --git a/docs/features/legends.md b/docs/features/legends.md
index 179ba7ddee..60587c2afc 100644
--- a/docs/features/legends.md
+++ b/docs/features/legends.md
@@ -120,7 +120,7 @@ Continuous color legends are rendered as a ramp, and can be configured with the
The **style** legend option allows custom styles to override Plot’s defaults; it has the same behavior as in Plot’s top-level [plot options](./plots.md). The **className** option is suffixed with *-ramp* or *-swatches*, reflecting the **legend** type.
-## legend(*options*)
+## legend(*options*) {#legend}
Renders a standalone legend for the scale defined by the given *options* object, returning a SVG or HTML figure element. This element can then be inserted into the page as described in the [getting started guide](../getting-started.md). The *options* object must define at least one scale; see [scale options](./scales.md) for how to define a scale.
diff --git a/docs/features/marks.md b/docs/features/marks.md
index 63b6265c85..b32370e633 100644
--- a/docs/features/marks.md
+++ b/docs/features/marks.md
@@ -48,7 +48,7 @@ onMounted(() => {
-# Marks
+# Marks {#Marks}
:::tip
If you aren’t yet up and running with Plot, please read our [getting started guide](../getting-started.md) first. Tinkering with the code below will give a better sense of how Plot works.
@@ -490,7 +490,7 @@ All marks support the following style options:
If the **clip** option is *frame* (or equivalently true), the mark is clipped to the frame’s dimensions; if the **clip** option is null (or equivalently false), the mark is not clipped. If the **clip** option is *sphere*, then a [geographic projection](./projections.md) is required and the mark will be clipped to the projected sphere (_e.g._, the front hemisphere when using the orthographic projection).
-If the **tip** option is true, a [tip mark](../marks/tip.md) with the [pointer transform](../interactions/pointer.md) will be derived from this mark and placed atop all other marks, offering details on demand. If the **tip** option is set to *x*, *y*, or *xy*, [pointerX](../interactions/pointer.md#pointerx-options), [pointerY](../interactions/pointer.md#pointery-options), or [pointer](../interactions/pointer.md#pointer-options) will be used, respectively; otherwise the pointing mode will be chosen automatically. (If the **tip** mark option is truthy, the **title** channel is no longer applied using an SVG title element as this would conflict with the tip mark.)
+If the **tip** option is true, a [tip mark](../marks/tip.md) with the [pointer transform](../interactions/pointer.md) will be derived from this mark and placed atop all other marks, offering details on demand. If the **tip** option is set to *x*, *y*, or *xy*, [pointerX](../interactions/pointer.md#pointerX), [pointerY](../interactions/pointer.md#pointerY), or [pointer](../interactions/pointer.md#pointer) will be used, respectively; otherwise the pointing mode will be chosen automatically. (If the **tip** mark option is truthy, the **title** channel is no longer applied using an SVG title element as this would conflict with the tip mark.)
For all marks except [text](../marks/text.md), the **dx** and **dy** options are rendered as a transform property, possibly including a 0.5px offset on low-density screens.
@@ -547,13 +547,13 @@ All marks support the following [transform](./transforms.md) options:
* **filter** - apply the [filter transform](../transforms/filter.md)
* **sort** - apply the [sort transform](../transforms/sort.md)
-* **reverse** - apply the [reverse transform](../transforms/sort.md#reverse-options)
+* **reverse** - apply the [reverse transform](../transforms/sort.md#reverse)
* **transform** - apply a [custom transform](./transforms.md#custom-transforms)
* **initializer** - apply a [custom initializer](./transforms.md#custom-initializers)
The **sort** option, when not specified as a channel value (such as a field name or an accessor function), can also be used to [impute ordinal scale domains](./scales.md#sort-mark-option).
-## marks(...*marks*)
+## marks(...*marks*) {#marks}
```js
Plot.marks(
diff --git a/docs/features/plots.md b/docs/features/plots.md
index 7a0bae53b0..4096b287f1 100644
--- a/docs/features/plots.md
+++ b/docs/features/plots.md
@@ -26,7 +26,7 @@ onMounted(() => {
# Plots
-To render a **plot** in Observable Plot, call [plot](#plot-options) (typically as `Plot.plot`), passing in the desired *options*. This function returns an SVG or HTML figure element.
+To render a **plot** in Observable Plot, call [plot](#plot) (typically as `Plot.plot`), passing in the desired *options*. This function returns an SVG or HTML figure element.
:::plot https://observablehq.com/@observablehq/plot-hello-world
```js
@@ -272,7 +272,7 @@ The generated SVG element has a class name which applies a default stylesheet. U
The **document** option specifies the [document](https://developer.mozilla.org/en-US/docs/Web/API/Document) used to create plot elements. It defaults to window.document, but can be changed to another document, say when using a virtual DOM implementation for server-side rendering in Node.
-## plot(*options*)
+## plot(*options*) {#plot}
```js
Plot.plot({
@@ -285,15 +285,15 @@ Plot.plot({
Renders a new plot with the specified *options*, returning a SVG or HTML figure element. This element can then be inserted into the page as described in the [getting started guide](../getting-started.md).
-## *mark*.plot(*options*)
+## *mark*.plot(*options*) {#mark_plot}
```js
Plot.barY(alphabet, {x: "letter", y: "frequency"}).plot({height: 200})
```
-Given a [*mark*](./marks.md), this is a convenience shorthand for calling [plot](#plot-options) where the **marks** option includes this *mark*. Any additional **marks** in *options* are drawn on top of this *mark*.
+Given a [*mark*](./marks.md), this is a convenience shorthand for calling [plot](#plot) where the **marks** option includes this *mark*. Any additional **marks** in *options* are drawn on top of this *mark*.
-## *plot*.scale(*name*)
+## *plot*.scale(*name*) {#plot_scale}
```js
const plot = Plot.plot(options); // render a plot
@@ -301,13 +301,13 @@ const color = plot.scale("color"); // get the color scale
console.log(color.range); // inspect the scale’s range
```
-Returns the [scale object](./scales.md#scale-options) for the scale with the specified *name* (such as *x* or *color*) on the given *plot*, where *plot* is a rendered plot element returned by [plot](#plot-options). If the associated *plot* has no scale with the given *name*, returns undefined.
+Returns the [scale object](./scales.md#scale-options) for the scale with the specified *name* (such as *x* or *color*) on the given *plot*, where *plot* is a rendered plot element returned by [plot](#plot). If the associated *plot* has no scale with the given *name*, returns undefined.
-## *plot*.legend(*name*, *options*)
+## *plot*.legend(*name*, *options*) {#plot_legend}
```js
const plot = Plot.plot(options); // render a plot
const legend = plot.legend("color"); // render a color legend
```
-Renders a standalone legend for the scale with the specified *name* (such as *x* or *color*) on the given *plot*, where *plot* is a rendered plot element returned by [plot](#plot-options), returning a SVG or HTML figure element. This element can then be inserted into the page as described in the [getting started guide](../getting-started.md). If the associated *plot* has no scale with the given *name*, returns undefined. Legends are currently only supported for *color*, *opacity*, and *symbol* scales.
+Renders a standalone legend for the scale with the specified *name* (such as *x* or *color*) on the given *plot*, where *plot* is a rendered plot element returned by [plot](#plot), returning a SVG or HTML figure element. This element can then be inserted into the page as described in the [getting started guide](../getting-started.md). If the associated *plot* has no scale with the given *name*, returns undefined. Legends are currently only supported for *color*, *opacity*, and *symbol* scales.
diff --git a/docs/features/projections.md b/docs/features/projections.md
index 0035809f00..46281568c2 100644
--- a/docs/features/projections.md
+++ b/docs/features/projections.md
@@ -54,7 +54,7 @@ Plot.plot({
```
:::
-Above, a [geo mark](../marks/geo.md) draws polygons representing land and a [sphere mark](../marks/geo.md#sphere-options) draws the outline of the globe. A [dot mark](../marks/dot.md) draws earthquakes as circles sized by magnitude.
+Above, a [geo mark](../marks/geo.md) draws polygons representing land and a [sphere mark](../marks/geo.md#sphere) draws the outline of the globe. A [dot mark](../marks/dot.md) draws earthquakes as circles sized by magnitude.
The geo mark is “projection aware” so that it can handle all the nuances of projecting spherical polygons to the screen — leaning on [d3-geo](https://d3js.org/d3-geo) to provide [adaptive sampling](https://observablehq.com/@d3/adaptive-sampling) with configurable precision, [antimeridian cutting](https://observablehq.com/@d3/antimeridian-cutting), and clipping. The dot mark is not; instead, Plot applies the projection in place of the *x* and *y* scales. Hence, projections work with any mark that consumes continuous **x** and **y** channels — as well as marks that use **x1** & **y1** and **x2** & **y2**. Each mark implementation decides whether to handle projections specially or to treat the projection as any other position scale. (For example, the [line mark](../marks/line.md) is projection-aware to draw geodesics.)
diff --git a/docs/features/scales.md b/docs/features/scales.md
index 88c09c14fd..53f7a0abe4 100644
--- a/docs/features/scales.md
+++ b/docs/features/scales.md
@@ -1007,9 +1007,9 @@ Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: {value: "y", order:
If the input channel is *data*, then the reducer is passed groups of the mark’s data; this is typically used in conjunction with a custom reducer function, as when the built-in single-channel reducers are insufficient.
-Note: when the value of the sort option is a string or a function, it is interpreted as a mark [sort transform](../transforms/sort.md). To use both sort options and a mark sort transform, use [Plot.sort](../transforms/sort.md#sort-order-options).
+Note: when the value of the sort option is a string or a function, it is interpreted as a mark [sort transform](../transforms/sort.md). To use both sort options and a mark sort transform, use [Plot.sort](../transforms/sort.md#sort).
-## scale(*options*) {#scale-options-1}
+## scale(*options*) {#scale}
You can also create a standalone scale with Plot.**scale**(*options*). The *options* object must define at least one scale; see [Scale options](#scale-options) for how to define a scale. For example, here is a linear color scale with the default domain of [0, 1] and default scheme *turbo*:
@@ -1017,7 +1017,7 @@ You can also create a standalone scale with Plot.**scale**(*options*). The *opti
const color = Plot.scale({color: {type: "linear"}});
```
-Both [*plot*.scale](./plots.md#plot-scale-name) and [Plot.scale](#scale-options-1) return scale objects. These objects represent the actual (or “materialized”) scale options used by Plot, including the domain, range, interpolate function, *etc.* The scale’s label, if any, is also returned; however, note that other axis properties are not currently exposed. Point and band scales also expose their materialized bandwidth and step.
+Both [*plot*.scale](./plots.md#plot_scale) and [Plot.scale](#scale) return scale objects. These objects represent the actual (or “materialized”) scale options used by Plot, including the domain, range, interpolate function, *etc.* The scale’s label, if any, is also returned; however, note that other axis properties are not currently exposed. Point and band scales also expose their materialized bandwidth and step.
To reuse a scale across plots, pass the corresponding scale object into another plot specification:
diff --git a/docs/features/transforms.md b/docs/features/transforms.md
index 5393a4f77e..d0b52dcc77 100644
--- a/docs/features/transforms.md
+++ b/docs/features/transforms.md
@@ -70,7 +70,7 @@ Plot.plot({
```
:::
-Plot includes many useful transforms! For example, you can compute a [rolling average](../transforms/window.md) to smooth a noisy signal, [stack layers](../transforms/stack.md) for a streamgraph, or [dodge dots](../transforms/dodge.md) for a beeswarm. Plot’s various built-in transforms include: [bin](../transforms/bin.md), [centroid](../transforms/centroid.md), [dodge](../transforms/dodge.md), [filter](../transforms/filter.md), [group](../transforms/group.md), [hexbin](../transforms/hexbin.md), [interval](../transforms/interval.md), [map](../transforms/map.md), [normalize](../transforms/normalize.md), [reverse](../transforms/sort.md#reverse-options), [select](../transforms/select.md), [shuffle](../transforms/sort.md#shuffle-options), [sort](../transforms/sort.md), [stack](../transforms/stack.md), [tree](../transforms/tree.md), and [window](../transforms/window.md). If these don’t meet your needs, you can even implement a [custom transform](#custom-transforms).
+Plot includes many useful transforms! For example, you can compute a [rolling average](../transforms/window.md) to smooth a noisy signal, [stack layers](../transforms/stack.md) for a streamgraph, or [dodge dots](../transforms/dodge.md) for a beeswarm. Plot’s various built-in transforms include: [bin](../transforms/bin.md), [centroid](../transforms/centroid.md), [dodge](../transforms/dodge.md), [filter](../transforms/filter.md), [group](../transforms/group.md), [hexbin](../transforms/hexbin.md), [interval](../transforms/interval.md), [map](../transforms/map.md), [normalize](../transforms/normalize.md), [reverse](../transforms/sort.md#reverse), [select](../transforms/select.md), [shuffle](../transforms/sort.md#shuffle), [sort](../transforms/sort.md), [stack](../transforms/stack.md), [tree](../transforms/tree.md), and [window](../transforms/window.md). If these don’t meet your needs, you can even implement a [custom transform](#custom-transforms).
Transforms are never required — you can always aggregate and derive data yourself outside of Plot, and then pass in the binned values. For example, we could use [d3.bin](https://d3js.org/d3-array/bin) to compute a histogram of athletes’ weights as an array of {*x0*, *x1*, *length*} objects.
@@ -191,7 +191,7 @@ You can specify a custom initializer by specifying a function as the mark **init
If an initializer desires a channel that is not supported by the downstream mark, additional channels can be declared using the mark **channels** option.
-## transform(*options*, *transform*)
+## transform(*options*, *transform*) {#transform}
```js
Plot.transform(options, (data, facets) => {
@@ -203,11 +203,11 @@ Plot.transform(options, (data, facets) => {
```
Given an *options* object that may specify some basic transforms (**filter**, **sort**, or **reverse**) or a custom **transform** function, composes those transforms if any with the given *transform* function, returning a new *options* object. If a custom **transform** function is present on the given *options*, any basic transforms are ignored. Any additional input *options* are passed through in the returned *options* object. This method facilitates applying the basic transforms prior to applying the given custom *transform* and is used internally by Plot’s built-in transforms.
-## initializer(*options*, *initializer*)
+## initializer(*options*, *initializer*) {#initializer}
This helper composes the *initializer* function with any other transforms present in the *options*, and returns a new *options* object. It is used internally by Plot’s built-in initializer transforms.
-## valueof(*data*, *value*, *type*)
+## valueof(*data*, *value*, *type*) {#valueof}
```js
Plot.valueof(aapl, "Close")
@@ -226,7 +226,7 @@ If *type* is specified, it must be Array or a similar class that implements the
valueof is not guaranteed to return a new array. When a transform method is used, or when the given *value* is an array that is compatible with the requested *type*, the array may be returned as-is without making a copy.
-## column(*source*)
+## column(*source*) {#column}
```js
const [X, setX] = Plot.column();
@@ -236,7 +236,7 @@ This helper for constructing derived columns returns a [*column*, *setColumn*] a
This method is used by Plot’s transforms to derive channels; the associated columns are populated (derived) when the **transform** option function is invoked.
-## identity
+## identity {#identity}
```js
Plot.contour(data, {width: w, height: h, fill: Plot.identity})
@@ -244,7 +244,7 @@ Plot.contour(data, {width: w, height: h, fill: Plot.identity})
This channel helper returns a source array as-is, avoiding an extra copy when defining a channel as being equal to the data.
-## indexOf
+## indexOf {#indexOf}
```js
Plot.lineY(numbers, {x: Plot.indexOf, y: Plot.identity})
diff --git a/docs/interactions/crosshair.md b/docs/interactions/crosshair.md
index 17e27c9644..33497e4ec7 100644
--- a/docs/interactions/crosshair.md
+++ b/docs/interactions/crosshair.md
@@ -23,7 +23,7 @@ Plot.plot({
```
:::
-For charts which have a “dominant” dimension, such as time in a time-series chart, use the crosshairX or crosshairY mark for the [pointerX](./pointer.md#pointerx-options) or [pointerY](./pointer.md#pointery-options) transform as appropriate.
+For charts which have a “dominant” dimension, such as time in a time-series chart, use the crosshairX or crosshairY mark for the [pointerX](./pointer.md#pointerX) or [pointerY](./pointer.md#pointerY) transform as appropriate.
:::plot defer https://observablehq.com/@observablehq/plot-crosshairx
```js
@@ -84,7 +84,7 @@ The following options are supported:
The crosshair mark supports faceting, but most other mark options are ignored.
-## crosshair(*data*, *options*)
+## crosshair(*data*, *options*) {#crosshair}
```js
Plot.crosshair(cars, {x: "economy (mpg)", y: "cylinders"})
@@ -92,18 +92,18 @@ Plot.crosshair(cars, {x: "economy (mpg)", y: "cylinders"})
Returns a new crosshair for the given *data* and *options*, drawing horizontal and vertical rules. The corresponding **x** and **y** values are also drawn just outside the bottom and left sides of the frame, respectively, typically on top of the axes. If either **x** or **y** is not specified, the crosshair will be one-dimensional.
-## crosshairX(*data*, *options*)
+## crosshairX(*data*, *options*) {#crosshairX}
```js
Plot.crosshairX(aapl, {x: "Date", y: "Close"})
```
-Like crosshair, but using [pointerX](./pointer.md#pointerx-options) when *x* is the dominant dimension, like time in a time-series chart.
+Like crosshair, but using [pointerX](./pointer.md#pointerX) when *x* is the dominant dimension, like time in a time-series chart.
-## crosshairY(*data*, *options*)
+## crosshairY(*data*, *options*) {#crosshairY}
```js
Plot.crosshairY(aapl, {x: "Date", y: "Close"})
```
-Like crosshair, but using [pointerY](./pointer.md#pointery-options) when *y* is the dominant dimension.
+Like crosshair, but using [pointerY](./pointer.md#pointerY) when *y* is the dominant dimension.
diff --git a/docs/interactions/pointer.md b/docs/interactions/pointer.md
index d7594fbbc9..b8ad960476 100644
--- a/docs/interactions/pointer.md
+++ b/docs/interactions/pointer.md
@@ -72,7 +72,7 @@ Plot.plot({
The pointer transform is similar to the [filter](../transforms/filter.md) and [select](../transforms/select.md) transforms: it filters the mark’s index to show a subset of the data. The difference is that the pointer transform is *interactive*: it listens to [pointer events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) and re-renders the mark as the closest point changes. Since the mark is lazily rendered during interaction, it is fast: only the visible elements are rendered as needed. And, like the filter and select transforms, unfiltered channel values are incorporated into default scale domains.
-The pointer transform supports both one- and two-dimensional pointing modes. The two-dimensional mode, [pointer](#pointer-options-1), is used above and is suitable for scatterplots and the general case: it finds the point closest to the pointer by measuring distance in *x* and *y*. The one-dimensional modes, [pointerX](#pointerx-options) and [pointerY](#pointery-options), in contrast only consider distance in one dimension; this is desirable when a chart has a “dominant” dimension, such as time in a time-series chart, the binned quantitative dimension in a histogram, or the categorical dimension of a bar chart.
+The pointer transform supports both one- and two-dimensional pointing modes. The two-dimensional mode, [pointer](#pointer), is used above and is suitable for scatterplots and the general case: it finds the point closest to the pointer by measuring distance in *x* and *y*. The one-dimensional modes, [pointerX](#pointerX) and [pointerY](#pointerY), in contrast only consider distance in one dimension; this is desirable when a chart has a “dominant” dimension, such as time in a time-series chart, the binned quantitative dimension in a histogram, or the categorical dimension of a bar chart.
Try the different modes on the line chart below to get a feel for their behavior.
@@ -180,7 +180,7 @@ To resolve the horizontal target position, the pointer transform applies the fol
The same precedence applies to the **py**, **y**, **y1**, and **y2** channels.
-## pointer(*options*) {#pointer-options-1}
+## pointer(*options*) {#pointer}
```js
Plot.tip(penguins, Plot.pointer({x: "culmen_length_mm", y: "culmen_depth_mm"}))
@@ -188,18 +188,18 @@ Plot.tip(penguins, Plot.pointer({x: "culmen_length_mm", y: "culmen_depth_mm"}))
Applies the pointer render transform to the specified *options* to filter the mark index such that only the point closest to the pointer is rendered; the mark will re-render interactively in response to pointer events.
-## pointerX(*options*)
+## pointerX(*options*) {#pointerX}
```js
Plot.tip(aapl, Plot.pointerX({x: "Date", y: "Close"}))
```
-Like [pointer](#pointer-options-1), except the determination of the closest point considers mostly the *x* (horizontal↔︎) position; this should be used for plots where *x* is the dominant dimension, such as time in a time-series chart, the binned quantitative dimension in a histogram, or the categorical dimension of a bar chart.
+Like [pointer](#pointer), except the determination of the closest point considers mostly the *x* (horizontal↔︎) position; this should be used for plots where *x* is the dominant dimension, such as time in a time-series chart, the binned quantitative dimension in a histogram, or the categorical dimension of a bar chart.
-## pointerY(*options*)
+## pointerY(*options*) {#pointerY}
```js
Plot.tip(alphabet, Plot.pointerY({x: "frequency", y: "letter"}))
```
-Like [pointer](#pointer-options-1), except the determination of the closest point considers mostly the *y* (vertical↕︎) position; this should be used for plots where *y* is the dominant dimension, such as time in a time-series chart, the binned quantitative dimension in a histogram, or the categorical dimension of a bar chart.
+Like [pointer](#pointer), except the determination of the closest point considers mostly the *y* (vertical↕︎) position; this should be used for plots where *y* is the dominant dimension, such as time in a time-series chart, the binned quantitative dimension in a histogram, or the categorical dimension of a bar chart.
diff --git a/docs/marks/area.md b/docs/marks/area.md
index 05b65dd4de..bec175a637 100644
--- a/docs/marks/area.md
+++ b/docs/marks/area.md
@@ -18,7 +18,7 @@ Plot.areaY(aapl, {x: "Date", y: "Close"}).plot()
```
:::
-The area mark has three constructors: [areaY](#areay-data-options) for when the baseline and topline share *x* values, as in a time-series area chart where time goes right→ (or ←left); [areaX](#areax-data-options) for when the baseline and topline share *y* values, as in a time-series area chart where time goes up↑ (or down↓); and lastly the rarely-used [area](#area-data-options) where the baseline and topline share neither *x* nor *y* values.
+The area mark has three constructors: [areaY](#areaY) for when the baseline and topline share *x* values, as in a time-series area chart where time goes right→ (or ←left); [areaX](#areaX) for when the baseline and topline share *y* values, as in a time-series area chart where time goes up↑ (or down↓); and lastly the rarely-used [area](#area) where the baseline and topline share neither *x* nor *y* values.
The area mark is often paired with a [line](./line.md) and [rule](./rule.md) mark to accentuate the topline and baseline.
@@ -102,7 +102,7 @@ Plot.plot({
```
:::
-For a vertically-oriented baseline and topline, such as when time goes up↑ instead of right→, use [areaX](#areax-data-options) instead of [areaY](#areay-data-options) and swap **x** and **y**.
+For a vertically-oriented baseline and topline, such as when time goes up↑ instead of right→, use [areaX](#areaX) instead of [areaY](#areaY) and swap **x** and **y**.
:::plot defer https://observablehq.com/@observablehq/plot-vertical-area-chart
```js
@@ -282,7 +282,7 @@ In addition to the [standard mark options](../features/marks.md#mark-options), t
* **y2** - the vertical position of the topline; bound to the *y* scale
* **z** - a categorical value to group data into series
-If **x2** is not specified, it defaults to **x1**. If **y2** is not specified, it defaults to **y1**. These defaults facilitate sharing *x* or *y* coordinates between the baseline and topline. See also the implicit stack transform and shorthand **x** and **y** options supported by [areaY](#areay-data-options) and [areaX](#areax-data-options).
+If **x2** is not specified, it defaults to **x1**. If **y2** is not specified, it defaults to **y1**. These defaults facilitate sharing *x* or *y* coordinates between the baseline and topline. See also the implicit stack transform and shorthand **x** and **y** options supported by [areaY](#areaY) and [areaX](#areaX).
By default, the data is assumed to represent a single series (*i.e.*, a single value that varies over time). If the **z** channel is specified, data is grouped by **z** to form separate series. Typically **z** is a categorical value such as a series name. If **z** is not specified, it defaults to **fill** if a channel, or **stroke** if a channel.
@@ -292,7 +292,7 @@ Points along the baseline and topline are connected in input order. Likewise, if
The area mark supports [curve options](../features/curves.md) to control interpolation between points. If any of the **x1**, **y1**, **x2**, or **y2** values are invalid (undefined, null, or NaN), the baseline and topline will be interrupted, resulting in a break that divides the area shape into multiple segments. (See [d3-shape’s *area*.defined](https://d3js.org/d3-shape/area#area_defined) for more.) If an area segment consists of only a single point, it may appear invisible unless rendered with rounded or square line caps. In addition, some curves such as *cardinal-open* only render a visible segment if it contains multiple points.
-## areaY(*data*, *options*)
+## areaY(*data*, *options*) {#areaY}
```js
Plot.areaY(aapl, {x: "Date", y: "Close"})
@@ -310,7 +310,7 @@ The **interval** option is recommended to “regularize” sampled data; for exa
The **areaY** mark draws the region between a baseline (*y1*) and a topline (*y2*) as in an area chart. When the baseline is *y* = 0, the *y* channel can be specified instead of *y1* and *y2*. For example, here is an area chart of Apple’s stock price.
-## areaX(*data*, *options*)
+## areaX(*data*, *options*) {#areaX}
```js
Plot.areaX(aapl, {y: "Date", x: "Close"})
@@ -326,10 +326,10 @@ Plot.areaX(observations, {y: "date", x: "temperature", interval: "day"})
The **interval** option is recommended to “regularize” sampled data; for example, if your data represents timestamped temperature measurements and you expect one sample per day, use "day" as the interval.
-## area(*data*, *options*)
+## area(*data*, *options*) {#area}
```js
Plot.area(aapl, {x1: "Date", y1: 0, y2: "Close"})
```
-Returns a new area with the given *data* and *options*. This method is rarely used directly; it is only needed when the baseline and topline have neither common **x** nor **y** values. [areaY](#areay-data-options) is used in the common horizontal orientation where the baseline and topline share **x** values, while [areaX](#areax-data-options) is used in the vertical orientation where the baseline and topline share **y** values.
+Returns a new area with the given *data* and *options*. This method is rarely used directly; it is only needed when the baseline and topline have neither common **x** nor **y** values. [areaY](#areaY) is used in the common horizontal orientation where the baseline and topline share **x** values, while [areaX](#areaX) is used in the vertical orientation where the baseline and topline share **y** values.
diff --git a/docs/marks/arrow.md b/docs/marks/arrow.md
index 991247711c..b1d908de31 100644
--- a/docs/marks/arrow.md
+++ b/docs/marks/arrow.md
@@ -117,7 +117,7 @@ The **bend** option sets the angle between the straight line connecting the two
The **sweep** option can be used to make arrows bend in the same direction, independently of the relative positions of the starting and ending points. It defaults to 1 indicating a positive (clockwise) bend angle; -1 indicates a negative (anticlockwise) bend angle. 0 effectively clears the bend angle. If set to *-x*, the bend angle is flipped when the ending point is to the left of the starting point — ensuring all arrows bulge up (down if bend is negative); if set to *-y*, the bend angle is flipped when the ending point is above the starting point — ensuring all arrows bulge right (left if bend is negative); the sign is negated for *+x* and *+y*.
-## arrow(*data*, *options*)
+## arrow(*data*, *options*) {#arrow}
```js
Plot.arrow(inequality, {x1: "POP_1980", y1: "R90_10_1980", x2: "POP_2015", y2: "R90_10_2015", bend: true})
diff --git a/docs/marks/auto.md b/docs/marks/auto.md
index 6d2e0cd0d6..8de0834bcf 100644
--- a/docs/marks/auto.md
+++ b/docs/marks/auto.md
@@ -82,7 +82,7 @@ Plot.rect(olympians, Plot.bin({fill: "count"}, {x: "weight", y: "height"})).plot
Notice that the code above makes you think about nested functions and two different options objects, which the auto mark flattens. The auto mark infers that it should use a [rect](./rect.md); that it should [bin](../transforms/bin.md) on **x** and **y**; that the kind of color should be a **fill**; and that **fill** is an “output” of the reducer, whereas **x** and **y** are “inputs”.
-This saves you a little bit of typing, but, more importantly, it means that switching from showing one dimension to another only involves changing _one thing_. In the code above, if you change **y** from *weight* to *sex*, it’ll break, because *sex* is ordinal instead of quantitative. (You’d also have to change [rect](./rect.md) to [barX](./bar.md#barx-data-options), and [bin](../transforms/bin.md#bin-outputs-options) to [binX](../transforms/bin.md#binx-outputs-options).) With the auto mark, it just works:
+This saves you a little bit of typing, but, more importantly, it means that switching from showing one dimension to another only involves changing _one thing_. In the code above, if you change **y** from *weight* to *sex*, it’ll break, because *sex* is ordinal instead of quantitative. (You’d also have to change [rect](./rect.md) to [barX](./bar.md#barX), and [bin](../transforms/bin.md#bin) to [binX](../transforms/bin.md#binX).) With the auto mark, it just works:
:::plot defer https://observablehq.com/@observablehq/plot-auto-mark-heatmap-2
```js
@@ -90,7 +90,7 @@ Plot.auto(olympians, {x: "weight", y: "sex", color: "count"}).plot()
```
:::
-Similarly, with explicit marks and transforms, changing a vertical histogram to a horizontal histogram involves switching [rectY](./rect.md#recty-data-options) to [rectX](./rect.md#rectx-data-options), [binX](../transforms/bin.md#binx-outputs-options) to [binY](../transforms/bin.md#biny-outputs-options), **x** to **y**, and **y** to **x**. With the auto mark, just specify **y** instead of **x**:
+Similarly, with explicit marks and transforms, changing a vertical histogram to a horizontal histogram involves switching [rectY](./rect.md#rectY) to [rectX](./rect.md#rectX), [binX](../transforms/bin.md#binX) to [binY](../transforms/bin.md#binY), **x** to **y**, and **y** to **x**. With the auto mark, just specify **y** instead of **x**:
:::plot https://observablehq.com/@observablehq/plot-auto-mark-horizontal-histogram
```js
@@ -220,7 +220,7 @@ The auto mark chooses the mark type automatically based on several simple heuris
The chosen mark type depends both on the options you provide (*e.g.*, whether you specified **x** or **y** or both) and the inferred type of the corresponding data values (whether the associated dimension of data is quantitative, categorical, monotonic, *etc.*).
-## auto(*data*, *options*)
+## auto(*data*, *options*) {#auto}
```js
Plot.auto(olympians, {x: "weight", y: "height", color: "count"}) // equivalent to rect + bin, say
@@ -228,7 +228,7 @@ Plot.auto(olympians, {x: "weight", y: "height", color: "count"}) // equivalent t
Returns an automatically-chosen mark with the given *data* and *options*, suitable for a quick view of the data.
-## autoSpec(*data*, *options*)
+## autoSpec(*data*, *options*) {#autoSpec}
```js
Plot.autoSpec(olympians, {x: "weight", y: "height", color: "count"})
diff --git a/docs/marks/axis.md b/docs/marks/axis.md
index 0807fc5d00..f63e5e2716 100644
--- a/docs/marks/axis.md
+++ b/docs/marks/axis.md
@@ -367,7 +367,7 @@ The axis mark’s default margins depend on its orientation (**anchor**) as foll
For simplicity’s sake and for consistent layout across plots, axis margins are not automatically sized to make room for tick labels; instead, shorten your tick labels (for example using the *k* SI-prefix tick format, or setting a *scale*.transform to show thousands or millions, or setting the **textOverflow** option to *ellipsis* and the **lineWidth** option to clip long labels) or increase the margins as needed.
-## axisX(*data*, *options*)
+## axisX(*data*, *options*) {#axisX}
```js
Plot.axisX({anchor: "bottom", tickSpacing: 80})
@@ -375,7 +375,7 @@ Plot.axisX({anchor: "bottom", tickSpacing: 80})
Returns a new *x* axis with the given *options*.
-## axisY(*data*, *options*)
+## axisY(*data*, *options*) {#axisY}
```js
Plot.axisY({anchor: "left", tickSpacing: 35})
@@ -383,7 +383,7 @@ Plot.axisY({anchor: "left", tickSpacing: 35})
Returns a new *y* axis with the given *options*.
-## axisFx(*data*, *options*)
+## axisFx(*data*, *options*) {#axisFx}
```js
Plot.axisFx({anchor: "top", label: null})
@@ -391,7 +391,7 @@ Plot.axisFx({anchor: "top", label: null})
Returns a new *fx* axis with the given *options*.
-## axisFy(*data*, *options*)
+## axisFy(*data*, *options*) {#axisFy}
```js
Plot.axisFy({anchor: "right", label: null})
diff --git a/docs/marks/bar.md b/docs/marks/bar.md
index 67344dd5b2..9516c3b13b 100644
--- a/docs/marks/bar.md
+++ b/docs/marks/bar.md
@@ -29,7 +29,7 @@ const timeseries = [
The bar mark is one of several marks in Plot for drawing rectangles; it should be used when one dimension is ordinal and the other is quantitative. See also [rect](./rect.md) and [cell](./cell.md).
:::
-The **bar mark** comes in two orientations: [barY](#bary-data-options) extends vertically↑ as in a vertical bar chart or column chart, while [barX](#barx-data-options) extends horizontally→. For example, the bar chart below shows the frequency of letters in the English language.
+The **bar mark** comes in two orientations: [barY](#barY) extends vertically↑ as in a vertical bar chart or column chart, while [barX](#barX) extends horizontally→. For example, the bar chart below shows the frequency of letters in the English language.
:::plot https://observablehq.com/@observablehq/plot-vertical-bars
```js
@@ -213,9 +213,9 @@ Plot.plot({
## Bar options
-For required channels, see [barX](#barx-data-options) and [barY](#bary-data-options). The bar mark supports the [standard mark options](../features/marks.md), including insets and rounded corners. The **stroke** defaults to *none*. The **fill** defaults to *currentColor* if the stroke is *none*, and to *none* otherwise.
+For required channels, see [barX](#barX) and [barY](#barY). The bar mark supports the [standard mark options](../features/marks.md), including insets and rounded corners. The **stroke** defaults to *none*. The **fill** defaults to *currentColor* if the stroke is *none*, and to *none* otherwise.
-## barX(*data*, *options*)
+## barX(*data*, *options*) {#barX}
```js
Plot.barX(alphabet, {y: "letter", x: "frequency"})
@@ -234,7 +234,7 @@ If neither the **x1** nor **x2** option is specified, the **x** option may be sp
If an **interval** is specified, such as d3.utcDay, **x1** and **x2** can be derived from **x**: *interval*.floor(*x*) is invoked for each *x* to produce *x1*, and *interval*.offset(*x1*) is invoked for each *x1* to produce *x2*. If the interval is specified as a number *n*, *x1* and *x2* are taken as the two consecutive multiples of *n* that bracket *x*. Named UTC intervals such as *day* are also supported; see [scale options](../features/scales.md#scale-options).
-## barY(*data*, *options*)
+## barY(*data*, *options*) {#barY}
```js
Plot.barY(alphabet, {x: "letter", y: "frequency"})
diff --git a/docs/marks/box.md b/docs/marks/box.md
index 31972b0e67..43b8dc92cb 100644
--- a/docs/marks/box.md
+++ b/docs/marks/box.md
@@ -15,7 +15,7 @@ onMounted(() => {
# Box mark
-The **box mark** summarizes one-dimensional distributions as boxplots. It is a [composite mark](../features/marks.md#marks-marks) consisting of a [rule](./rule.md) to represent the extreme values (not including outliers), a [bar](./bar.md) to represent the interquartile range (trimmed to the data), a [tick](./tick.md) to represent the median value, and a [dot](./dot.md) to represent any outliers. The [group transform](../transforms/group.md) is used to group and aggregate data.
+The **box mark** summarizes one-dimensional distributions as boxplots. It is a [composite mark](../features/marks.md#marks) consisting of a [rule](./rule.md) to represent the extreme values (not including outliers), a [bar](./bar.md) to represent the interquartile range (trimmed to the data), a [tick](./tick.md) to represent the median value, and a [dot](./dot.md) to represent any outliers. The [group transform](../transforms/group.md) is used to group and aggregate data.
For example, the boxplot below shows [A.A. Michelson’s experimental measurements](https://stat.ethz.ch/R-manual/R-devel/library/datasets/html/morley.html) of the speed of light. (Speed is in km/sec minus 299,000.)
@@ -33,7 +33,7 @@ Plot.plot({
```
:::
-[boxY](#boxy-data-options) produces vertical boxplots; for horizontal boxplots, use [boxX](#boxx-data-options) and swap **x** and **y**.
+[boxY](#boxY) produces vertical boxplots; for horizontal boxplots, use [boxX](#boxX) and swap **x** and **y**.
:::plot https://observablehq.com/@observablehq/plot-horizontal-box-plot
```js
@@ -107,7 +107,7 @@ Plot.plot({
## Box options
-The box mark is a [composite mark](../features/marks.md#marks-marks) consisting of four marks:
+The box mark is a [composite mark](../features/marks.md#marks) consisting of four marks:
* a [rule](../marks/rule.md) representing the extreme values (not including outliers)
* a [bar](../marks/bar.md) representing the interquartile range (trimmed to the data)
@@ -122,7 +122,7 @@ The given *options* are passed through to these underlying marks, with the excep
* **strokeOpacity** - the stroke opacity of the rule, tick, and dot; defaults to 1
* **strokeWidth** - the stroke width of the tick; defaults to 1
-## boxX(*data*, *options*)
+## boxX(*data*, *options*) {#boxX}
```js
Plot.boxX(simpsons.map((d) => d.imdb_rating))
@@ -130,7 +130,7 @@ Plot.boxX(simpsons.map((d) => d.imdb_rating))
Returns a horizontal box mark. If the **x** option is not specified, it defaults to the identity function, as when *data* is an array of numbers. If the **y** option is not specified, it defaults to null; if the **y** option is specified, it should represent an ordinal (discrete) value.
-## boxY(*data*, *options*)
+## boxY(*data*, *options*) {#boxY}
```js
Plot.boxY(simpsons.map((d) => d.imdb_rating))
diff --git a/docs/marks/cell.md b/docs/marks/cell.md
index 1672c5613b..8a8d19b0dd 100644
--- a/docs/marks/cell.md
+++ b/docs/marks/cell.md
@@ -158,7 +158,7 @@ If **x** is not specified, the cell will span the full horizontal extent of the
The **stroke** defaults to *none*. The **fill** defaults to *currentColor* if the stroke is *none*, and to *none* otherwise.
-## cell(*data*, *options*)
+## cell(*data*, *options*) {#cell}
```js
Plot.cell(simpsons, {x: "number_in_season", y: "season", fill: "imdb_rating"})
@@ -166,18 +166,18 @@ Plot.cell(simpsons, {x: "number_in_season", y: "season", fill: "imdb_rating"})
Returns a new cell with the given *data* and *options*. If neither the **x** nor **y** options are specified, *data* is assumed to be an array of pairs [[*x₀*, *y₀*], [*x₁*, *y₁*], [*x₂*, *y₂*], …] such that **x** = [*x₀*, *x₁*, *x₂*, …] and **y** = [*y₀*, *y₁*, *y₂*, …].
-## cellX(*data*, *options*)
+## cellX(*data*, *options*) {#cellX}
```js
Plot.cellX(simpsons.map((d) => d.imdb_rating))
```
-Equivalent to [cell](#cell-data-options), except that if the **x** option is not specified, it defaults to [0, 1, 2, …], and if the **fill** option is not specified and **stroke** is not a channel, the fill defaults to the identity function and assumes that *data* = [*x₀*, *x₁*, *x₂*, …].
+Equivalent to [cell](#cell), except that if the **x** option is not specified, it defaults to [0, 1, 2, …], and if the **fill** option is not specified and **stroke** is not a channel, the fill defaults to the identity function and assumes that *data* = [*x₀*, *x₁*, *x₂*, …].
-## cellY(*data*, *options*)
+## cellY(*data*, *options*) {#cellY}
```js
Plot.cellY(simpsons.map((d) => d.imdb_rating))
```
-Equivalent to [cell](#cell-data-options), except that if the **y** option is not specified, it defaults to [0, 1, 2, …], and if the **fill** option is not specified and **stroke** is not a channel, the fill defaults to the identity function and assumes that *data* = [*y₀*, *y₁*, *y₂*, …].
+Equivalent to [cell](#cell), except that if the **y** option is not specified, it defaults to [0, 1, 2, …], and if the **fill** option is not specified and **stroke** is not a channel, the fill defaults to the identity function and assumes that *data* = [*y₀*, *y₁*, *y₂*, …].
diff --git a/docs/marks/contour.md b/docs/marks/contour.md
index ec15e50624..bf96b6b60c 100644
--- a/docs/marks/contour.md
+++ b/docs/marks/contour.md
@@ -271,7 +271,7 @@ As shorthand, a single channel may be specified, in which case it is promoted to
Plot.contour(volcano.values, {width: volcano.width, height: volcano.height, fill: Plot.identity})
```
-## contour(*data*, *options*)
+## contour(*data*, *options*) {#contour}
```js
Plot.contour(volcano.values, {width: volcano.width, height: volcano.height, fill: Plot.identity})
diff --git a/docs/marks/delaunay.md b/docs/marks/delaunay.md
index 8ef48883b0..1b06741548 100644
--- a/docs/marks/delaunay.md
+++ b/docs/marks/delaunay.md
@@ -21,7 +21,7 @@ onMounted(() => {
Given set of points in **x** and **y**, the **Delaunay marks** compute the [Delaunay triangulation](https://en.wikipedia.org/wiki/Delaunay_triangulation), its dual the [Voronoi tessellation](https://en.wikipedia.org/wiki/Voronoi_diagram), and the [convex hull](https://en.wikipedia.org/wiki/Convex_hull).
-The [voronoi mark](#voronoi-data-options) computes the region closest to each point (its *Voronoi cell*). The cell can be empty if another point shares the exact same coordinates. Together, the cells cover the entire plot. Voronoi diagrams can group related points with color, for example.
+The [voronoi mark](#voronoi) computes the region closest to each point (its *Voronoi cell*). The cell can be empty if another point shares the exact same coordinates. Together, the cells cover the entire plot. Voronoi diagrams can group related points with color, for example.
:::plot https://observablehq.com/@observablehq/plot-voronoi-scatterplot
```js
@@ -38,7 +38,7 @@ Plot.plot({
Each cell is associated with a particular data point, and channels such as **stroke**, **fill**, **fillOpacity**, **strokeOpacity**, **href**, _etc._, work as they do on other marks, such as [dots](./dot.md).
-To show the local density of a scatterplot, one can draw the whole boundary at once with [voronoiMesh](#voronoimesh-data-options). Whereas the [voronoi mark](#voronoi-data-options) will draw shared cell boundaries twice, the mesh will draw them only once.
+To show the local density of a scatterplot, one can draw the whole boundary at once with [voronoiMesh](#voronoiMesh). Whereas the [voronoi mark](#voronoi) will draw shared cell boundaries twice, the mesh will draw them only once.
:::plot https://observablehq.com/@observablehq/plot-voronoi-mesh
```js
@@ -51,7 +51,7 @@ Plot.plot({
```
:::
-The boundary between two neighboring Voronoi cells is a line segment defined by equal distance from their two respective points. The construction of the Voronoi diagram involves the computation of the Delaunay graph, which defines these neighbors. Use [delaunayMesh](#delaunaymesh-data-options) to draw the graph.
+The boundary between two neighboring Voronoi cells is a line segment defined by equal distance from their two respective points. The construction of the Voronoi diagram involves the computation of the Delaunay graph, which defines these neighbors. Use [delaunayMesh](#delaunayMesh) to draw the graph.
:::plot https://observablehq.com/@observablehq/plot-delaunay-mesh
```js
@@ -66,7 +66,7 @@ Plot.plot({
As shown above, the Delaunay graph is computed separately for each color; specifying **z**, **stroke**, or **fill** creates independent series.
-Another derivative of the Delaunay graph is the convex hull of a set of points: the polygon with the minimum perimeter that contains all the points. The [hull mark](#hull-data-options) will draw this hull.
+Another derivative of the Delaunay graph is the convex hull of a set of points: the polygon with the minimum perimeter that contains all the points. The [hull mark](#hull) will draw this hull.
:::plot defer https://observablehq.com/@observablehq/plot-convex-hull
```js
@@ -129,7 +129,7 @@ Distances between projected points are not exactly proportional to the correspon
:::
-## delaunayLink(*data*, *options*)
+## delaunayLink(*data*, *options*) {#delaunayLink}
```js
Plot.delaunayLink(penguins, {x: "culmen_depth_mm", y: "culmen_length_mm"})
@@ -139,7 +139,7 @@ Draws links for each edge of the Delaunay triangulation of the points given by t
If a **z** channel is specified, the input points are grouped by *z*, and separate Delaunay triangulations are constructed for each group.
-## delaunayMesh(*data*, *options*)
+## delaunayMesh(*data*, *options*) {#delaunayMesh}
```js
Plot.delaunayMesh(penguins, {x: "culmen_depth_mm", y: "culmen_length_mm"})
@@ -149,7 +149,7 @@ Draws a mesh of the Delaunay triangulation of the points given by the **x** and
If a **z** channel is specified, the input points are grouped by *z*, and separate Delaunay triangulations are constructed for each group.
-## hull(*data*, *options*)
+## hull(*data*, *options*) {#hull}
```js
Plot.hull(penguins, {x: "culmen_depth_mm", y: "culmen_length_mm"})
@@ -159,7 +159,7 @@ Draws a convex hull around the points given by the **x** and **y** channels. The
If a **z** channel is specified, the input points are grouped by *z*, and separate convex hulls are constructed for each group. If the **z** channel is not specified, it defaults to either the **fill** channel, if any, or the **stroke** channel, if any.
-## voronoi(*data*, *options*)
+## voronoi(*data*, *options*) {#voronoi}
```js
Plot.voronoi(penguins, {x: "culmen_depth_mm", y: "culmen_length_mm"})
@@ -169,7 +169,7 @@ Draws polygons for each cell of the Voronoi tessellation of the points given by
If a **z** channel is specified, the input points are grouped by *z*, and separate Voronoi tessellations are constructed for each group.
-## voronoiMesh(*data*, *options*)
+## voronoiMesh(*data*, *options*) {#voronoiMesh}
```js
Plot.voronoiMesh(penguins, {x: "culmen_depth_mm", y: "culmen_length_mm"})
diff --git a/docs/marks/density.md b/docs/marks/density.md
index 52d8cf1bc6..77db148dab 100644
--- a/docs/marks/density.md
+++ b/docs/marks/density.md
@@ -245,7 +245,7 @@ The **thresholds** option, which defaults to 20, specifies one more than the num
If a **z**, **stroke** or **fill** channel is specified, the input points are grouped by series, and separate sets of contours are generated for each series. If the **stroke** or **fill** is specified as *density*, a color channel is constructed with values representing the density threshold value of each contour.
-## density(*data*, *options*)
+## density(*data*, *options*) {#density}
```js
Plot.density(faithful, {x: "waiting", y: "eruptions"})
diff --git a/docs/marks/dot.md b/docs/marks/dot.md
index f51d13deea..a5b32b3020 100644
--- a/docs/marks/dot.md
+++ b/docs/marks/dot.md
@@ -333,7 +333,7 @@ The **r** option can be specified as either a channel or constant. When the radi
The **stroke** defaults to *none*. The **fill** defaults to *currentColor* if the stroke is *none*, and to *none* otherwise. The **strokeWidth** defaults to 1.5. The **rotate** and **symbol** options can be specified as either channels or constants. When rotate is specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel. When symbol is a valid symbol name or symbol object (implementing the draw method), it is interpreted as a constant; otherwise it is interpreted as a channel. If the **symbol** channel’s values are all symbols, symbol names, or nullish, the channel is unscaled (values are interpreted literally); otherwise, the channel is bound to the *symbol* scale.
-## dot(*data*, *options*)
+## dot(*data*, *options*) {#dot}
```js
Plot.dot(sales, {x: "units", y: "fruit"})
@@ -341,30 +341,30 @@ Plot.dot(sales, {x: "units", y: "fruit"})
Returns a new dot with the given *data* and *options*. If neither the **x** nor **y** nor **frameAnchor** options are specified, *data* is assumed to be an array of pairs [[*x₀*, *y₀*], [*x₁*, *y₁*], [*x₂*, *y₂*], …] such that **x** = [*x₀*, *x₁*, *x₂*, …] and **y** = [*y₀*, *y₁*, *y₂*, …].
-## dotX(*data*, *options*)
+## dotX(*data*, *options*) {#dotX}
```js
Plot.dotX(cars.map((d) => d["economy (mpg)"]))
```
-Equivalent to [dot](#dot-data-options) except that if the **x** option is not specified, it defaults to the identity function and assumes that *data* = [*x₀*, *x₁*, *x₂*, …].
+Equivalent to [dot](#dot) except that if the **x** option is not specified, it defaults to the identity function and assumes that *data* = [*x₀*, *x₁*, *x₂*, …].
If an **interval** is specified, such as d3.utcDay, **y** is transformed to (*interval*.floor(*y*) + *interval*.offset(*interval*.floor(*y*))) / 2. If the interval is specified as a number *n*, *y* will be the midpoint of two consecutive multiples of *n* that bracket *y*. Named UTC intervals such as *day* are also supported; see [scale options](../features/scales.md#scale-options).
-## dotY(*data*, *options*)
+## dotY(*data*, *options*) {#dotY}
```js
Plot.dotY(cars.map((d) => d["economy (mpg)"]))
```
-Equivalent to [dot](#dot-data-options) except that if the **y** option is not specified, it defaults to the identity function and assumes that *data* = [*y₀*, *y₁*, *y₂*, …].
+Equivalent to [dot](#dot) except that if the **y** option is not specified, it defaults to the identity function and assumes that *data* = [*y₀*, *y₁*, *y₂*, …].
If an **interval** is specified, such as d3.utcDay, **x** is transformed to (*interval*.floor(*x*) + *interval*.offset(*interval*.floor(*x*))) / 2. If the interval is specified as a number *n*, *x* will be the midpoint of two consecutive multiples of *n* that bracket *x*. Named UTC intervals such as *day* are also supported; see [scale options](../features/scales.md#scale-options).
-## circle(*data*, *options*)
+## circle(*data*, *options*) {#circle}
-Equivalent to [dot](#dot-data-options) except that the **symbol** option is set to *circle*.
+Equivalent to [dot](#dot) except that the **symbol** option is set to *circle*.
-## hexagon(*data*, *options*)
+## hexagon(*data*, *options*) {#hexagon}
-Equivalent to [dot](#dot-data-options) except that the **symbol** option is set to *hexagon*.
+Equivalent to [dot](#dot) except that the **symbol** option is set to *hexagon*.
diff --git a/docs/marks/frame.md b/docs/marks/frame.md
index de0c5d3c78..77357c52bc 100644
--- a/docs/marks/frame.md
+++ b/docs/marks/frame.md
@@ -48,7 +48,7 @@ Plot.plot({
```
:::
-Unlike most marks, a frame never takes *data*; the first argument to [frame](#frame-options-1) is the *options* object. (For data-driven rectangles, see the [rect mark](./rect.md).)
+Unlike most marks, a frame never takes *data*; the first argument to [frame](#frame) is the *options* object. (For data-driven rectangles, see the [rect mark](./rect.md).)
:::plot
```js
@@ -115,7 +115,7 @@ The frame mark supports the [standard mark options](../features/marks.md#mark-op
If the **anchor** option is specified as one of *left*, *right*, *top*, or *bottom*, that side is rendered as a single line (and the **fill**, **fillOpacity**, **rx**, and **ry** options are ignored).
-## frame(*options*) {#frame-options-1}
+## frame(*options*) {#frame}
```js
Plot.frame({stroke: "red"})
diff --git a/docs/marks/geo.md b/docs/marks/geo.md
index f51ba710ef..b3b0d745d3 100644
--- a/docs/marks/geo.md
+++ b/docs/marks/geo.md
@@ -86,7 +86,7 @@ Plot.plot({
Click on any of the earthquakes above to see details.
:::
-The [graticule](#graticule-options) helper draws a uniform grid of meridians (lines of constant longitude) and parallels (lines of constant latitude) every 10° between ±80° latitude; for the polar regions, meridians are drawn every 90°. The [sphere](#sphere-options) helper draws the outline of the projected sphere.
+The [graticule](#graticule) helper draws a uniform grid of meridians (lines of constant longitude) and parallels (lines of constant latitude) every 10° between ±80° latitude; for the polar regions, meridians are drawn every 90°. The [sphere](#sphere) helper draws the outline of the projected sphere.
:::plot https://observablehq.com/@observablehq/plot-sphere-and-graticule
```js
@@ -176,7 +176,7 @@ The **geometry** channel specifies the geometry (GeoJSON object) to draw; if not
In addition to the [standard mark options](../features/marks.md#mark-options), the **r** option controls the size of Point and MultiPoint geometries. It can be specified as either a channel or constant. When **r** is specified as a number, it is interpreted as a constant radius in pixels; otherwise it is interpreted as a channel and the effective radius is controlled by the *r* scale. If the **r** option is not specified it defaults to 3 pixels. Geometries with a nonpositive radius are not drawn. If **r** is a channel, geometries will be sorted by descending radius by default.
-## geo(*data*, *options*)
+## geo(*data*, *options*) {#geo}
```js
Plot.geo(counties, {fill: (d) => d.properties.rate})
@@ -184,7 +184,7 @@ Plot.geo(counties, {fill: (d) => d.properties.rate})
Returns a new geo mark with the given *data* and *options*. If *data* is a GeoJSON feature collection, then the mark’s data is *data*.features; if *data* is a GeoJSON geometry collection, then the mark’s data is *data*.geometries; if *data* is some other GeoJSON object, then the mark’s data is the single-element array [*data*]. If the **geometry** option is not specified, *data* is assumed to be a GeoJSON object or an iterable of GeoJSON objects.
-## sphere(*options*)
+## sphere(*options*) {#sphere}
```js
Plot.sphere()
@@ -192,7 +192,7 @@ Plot.sphere()
Returns a new geo mark with a *Sphere* geometry object and the given *options*.
-## graticule(*options*)
+## graticule(*options*) {#graticule}
```js
Plot.graticule()
diff --git a/docs/marks/grid.md b/docs/marks/grid.md
index 830717c2ae..3b3fc1ba30 100644
--- a/docs/marks/grid.md
+++ b/docs/marks/grid.md
@@ -77,7 +77,7 @@ The following options are supported as constant or data-driven channels:
All the other common options are supported when applicable (*e.g.*, **title**).
-## gridX(*data*, *options*)
+## gridX(*data*, *options*) {#gridX}
```js
Plot.gridX({strokeDasharray: "5,3"})
@@ -85,7 +85,7 @@ Plot.gridX({strokeDasharray: "5,3"})
Returns a new *x* grid with the given *options*.
-## gridY(*data*, *options*)
+## gridY(*data*, *options*) {#gridY}
```js
Plot.gridY({strokeDasharray: "5,3"})
@@ -93,7 +93,7 @@ Plot.gridY({strokeDasharray: "5,3"})
Returns a new *y* grid with the given *options*.
-## gridFx(*data*, *options*)
+## gridFx(*data*, *options*) {#gridFx}
```js
Plot.gridFx({strokeDasharray: "5,3"})
@@ -101,7 +101,7 @@ Plot.gridFx({strokeDasharray: "5,3"})
Returns a new *fx* grid with the given *options*.
-## gridFy(*data*, *options*)
+## gridFy(*data*, *options*) {#gridFy}
```js
Plot.gridFy({strokeDasharray: "5,3"})
diff --git a/docs/marks/hexgrid.md b/docs/marks/hexgrid.md
index de10e61e5a..2e112e0478 100644
--- a/docs/marks/hexgrid.md
+++ b/docs/marks/hexgrid.md
@@ -25,7 +25,7 @@ Plot.plot({
The hexgrid mark supports the [standard mark options](../features/marks.md#mark-options). It does not accept any data or support channels. The default **stroke** is *currentColor*, the default **strokeOpacity** is 0.1, and the default **clip** is true. The **binWidth** defaults to 20, matching the [hexbin transform](../transforms/hexbin.md). The **fill** option is not supported, but a [frame mark](./frame.md) can be used to the same effect.
-## hexgrid(*options*)
+## hexgrid(*options*) {#hexgrid}
```js
Plot.hexgrid({stroke: "red"})
diff --git a/docs/marks/image.md b/docs/marks/image.md
index 68240b8308..b9944b4349 100644
--- a/docs/marks/image.md
+++ b/docs/marks/image.md
@@ -162,7 +162,7 @@ To crop the image instead of scaling it to fit, set **preserveAspectRatio** to *
Images are drawn in input order, with the last data drawn on top. If sorting is needed, say to mitigate overplotting, consider a [sort transform](../transforms/sort.md).
-## image(*data*, *options*)
+## image(*data*, *options*) {#image}
```js
Plot.image(presidents, {x: "inauguration", y: "favorability", src: "portrait"})
diff --git a/docs/marks/line.md b/docs/marks/line.md
index 5689b34dc1..398ab4cf1d 100644
--- a/docs/marks/line.md
+++ b/docs/marks/line.md
@@ -57,7 +57,7 @@ Plot.line(aapl.map((d) => [d.Date, d.Close])).plot()
This shorthand loses the automatic *x*- and *y*-axis labels, reducing legibility. Use the **label** [scale option](../features/scales.md) to restore them.
:::
-The [lineY constructor](#liney-data-options) provides default channel definitions of **x** = index and **y** = [identity](../features/transforms.md#identity), letting you pass an array of numbers as data. The [lineX constructor](#linex-data-options) similarly provides **x** = identity and **y** = index defaults for lines that go up↑ instead of to the right→. Below, a random walk is made using [d3.cumsum](https://observablehq.com/@d3/d3-cumsum?collection=@d3/d3-array) and [d3.randomNormal](https://observablehq.com/@d3/d3-random?collection=@d3/d3-random).
+The [lineY constructor](#lineY) provides default channel definitions of **x** = index and **y** = [identity](../features/transforms.md#identity), letting you pass an array of numbers as data. The [lineX constructor](#lineX) similarly provides **x** = identity and **y** = index defaults for lines that go up↑ instead of to the right→. Below, a random walk is made using [d3.cumsum](https://observablehq.com/@d3/d3-cumsum?collection=@d3/d3-array) and [d3.randomNormal](https://observablehq.com/@d3/d3-random?collection=@d3/d3-random).
:::plot defer https://observablehq.com/@observablehq/plot-shorthand-liney
```js
@@ -361,7 +361,7 @@ Points along the line are connected in input order. Likewise, if there are multi
The line mark supports [curve options](../features/curves.md) to control interpolation between points, and [marker options](../features/markers.md) to add a marker (such as a dot or an arrowhead) on each of the control points. The default curve is *auto*, which is equivalent to *linear* if there is no [projection](../features/projections.md), and otherwise uses the associated projection. If any of the **x** or **y** values are invalid (undefined, null, or NaN), the line will be interrupted, resulting in a break that divides the line shape into multiple segments. (See [d3-shape’s *line*.defined](https://d3js.org/d3-shape/line#line_defined) for more.) If a line segment consists of only a single point, it may appear invisible unless rendered with rounded or square line caps. In addition, some curves such as *cardinal-open* only render a visible segment if it contains multiple points.
-## line(*data*, *options*)
+## line(*data*, *options*) {#line}
```js
Plot.line(aapl, {x: "Date", y: "Close"})
@@ -369,13 +369,13 @@ Plot.line(aapl, {x: "Date", y: "Close"})
Returns a new line with the given *data* and *options*. If neither the **x** nor **y** options are specified, *data* is assumed to be an array of pairs [[*x₀*, *y₀*], [*x₁*, *y₁*], [*x₂*, *y₂*], …] such that **x** = [*x₀*, *x₁*, *x₂*, …] and **y** = [*y₀*, *y₁*, *y₂*, …].
-## lineX(*data*, *options*)
+## lineX(*data*, *options*) {#lineX}
```js
Plot.lineX(aapl.map((d) => d.Close))
```
-Similar to [line](#line-data-options) except that if the **x** option is not specified, it defaults to the identity function and assumes that *data* = [*x₀*, *x₁*, *x₂*, …]. If the **y** option is not specified, it defaults to [0, 1, 2, …].
+Similar to [line](#line) except that if the **x** option is not specified, it defaults to the identity function and assumes that *data* = [*x₀*, *x₁*, *x₂*, …]. If the **y** option is not specified, it defaults to [0, 1, 2, …].
If the **interval** option is specified, the [binY transform](../transforms/bin.md) is implicitly applied to the specified *options*. The reducer of the output *x* channel may be specified via the **reduce** option, which defaults to *first*. To default to zero instead of showing gaps in data, as when the observed value represents a quantity, use the *sum* reducer.
@@ -385,13 +385,13 @@ Plot.lineX(observations, {y: "date", x: "temperature", interval: "day"})
The **interval** option is recommended to “regularize” sampled data; for example, if your data represents timestamped temperature measurements and you expect one sample per day, use "day" as the interval.
-## lineY(*data*, *options*)
+## lineY(*data*, *options*) {#lineY}
```js
Plot.lineY(aapl.map((d) => d.Close))
```
-Similar to [line](#line-data-options) except that if the **y** option is not specified, it defaults to the identity function and assumes that *data* = [*y₀*, *y₁*, *y₂*, …]. If the **x** option is not specified, it defaults to [0, 1, 2, …].
+Similar to [line](#line) except that if the **y** option is not specified, it defaults to the identity function and assumes that *data* = [*y₀*, *y₁*, *y₂*, …]. If the **x** option is not specified, it defaults to [0, 1, 2, …].
If the **interval** option is specified, the [binX transform](../transforms/bin.md) is implicitly applied to the specified *options*. The reducer of the output *y* channel may be specified via the **reduce** option, which defaults to *first*. To default to zero instead of showing gaps in data, as when the observed value represents a quantity, use the *sum* reducer.
diff --git a/docs/marks/linear-regression.md b/docs/marks/linear-regression.md
index 888122a277..ce651d7b6c 100644
--- a/docs/marks/linear-regression.md
+++ b/docs/marks/linear-regression.md
@@ -99,7 +99,7 @@ The given *options* are passed through to these underlying marks, with the excep
Multiple regressions can be defined by specifying **z**, **fill**, or **stroke**.
-## linearRegressionX(*data*, *options*)
+## linearRegressionX(*data*, *options*) {#linearRegressionX}
```js
Plot.linearRegressionX(mtcars, {y: "wt", x: "hp"})
@@ -107,7 +107,7 @@ Plot.linearRegressionX(mtcars, {y: "wt", x: "hp"})
Returns a linear regression mark where **x** is the dependent variable and **y** is the independent variable. (This is the uncommon orientation.)
-## linearRegressionY(*data*, *options*)
+## linearRegressionY(*data*, *options*) {#linearRegressionY}
```js
Plot.linearRegressionY(mtcars, {x: "wt", y: "hp"})
diff --git a/docs/marks/link.md b/docs/marks/link.md
index 081991fc76..ee6983c3d0 100644
--- a/docs/marks/link.md
+++ b/docs/marks/link.md
@@ -170,7 +170,7 @@ The link mark supports the [standard mark options](../features/marks.md). The **
The link mark supports [curve options](../features/curves.md) to control interpolation between points, and [marker options](../features/markers.md) to add a marker (such as a dot or an arrowhead) on each of the control points. Since a link always has two points by definition, only the following curves (or a custom curve) are recommended: *linear*, *step*, *step-after*, *step-before*, *bump-x*, or *bump-y*. Note that the *linear* curve is incapable of showing a fill since a straight line has zero area. For a curved link, you can use a bent [arrow](./arrow.md) (with no arrowhead, if desired).
-## link(*data*, *options*)
+## link(*data*, *options*) {#link}
```js
Plot.link(inequality, {x1: "POP_1980", y1: "R90_10_1980", x2: "POP_2015", y2: "R90_10_2015"})
diff --git a/docs/marks/raster.md b/docs/marks/raster.md
index f84bdd4131..039326227b 100644
--- a/docs/marks/raster.md
+++ b/docs/marks/raster.md
@@ -292,7 +292,7 @@ The following raster-specific constant options are supported:
The **imageRendering** option may be set to *pixelated* for a sharper image. The **interpolate** option is ignored when **fill** or **fillOpacity** is a function of *x* and *y*.
-## raster(*data*, *options*)
+## raster(*data*, *options*) {#raster}
```js
Plot.raster(volcano.values, {width: volcano.width, height: volcano.height})
@@ -320,15 +320,15 @@ The **interpolate** option can also be specified as a function with the followin
So, *x*[*index*[0]] represents the *x*-position of the first sample, *y*[*index*[0]] its *y*-position, and *value*[*index*[0]] its value (*e.g.*, the observed height for a topographic map).
-## interpolateNone(*index*, *width*, *height*, *x*, *y*, *value*)
+## interpolateNone(*index*, *width*, *height*, *x*, *y*, *value*) {#interpolateNone}
```js
Plot.raster(ca55, {x: "LONGITUDE", y: "LATITUDE", fill: "MAG_IGRF90", interpolate: Plot.interpolateNone})
```
-Applies a simple forward mapping of samples, binning them into pixels in the raster grid without any blending or interpolation. If multiple samples map to the same pixel, the last one wins; this can introduce bias if the points are not in random order, so use [Plot.shuffle](../transforms/sort.md#shuffle-options) to randomize the input if needed.
+Applies a simple forward mapping of samples, binning them into pixels in the raster grid without any blending or interpolation. If multiple samples map to the same pixel, the last one wins; this can introduce bias if the points are not in random order, so use [Plot.shuffle](../transforms/sort.md#shuffle) to randomize the input if needed.
-## interpolateNearest(*index*, *width*, *height*, *x*, *y*, *value*)
+## interpolateNearest(*index*, *width*, *height*, *x*, *y*, *value*) {#interpolateNearest}
```js
Plot.raster(ca55, {x: "LONGITUDE", y: "LATITUDE", fill: "MAG_IGRF90", interpolate: Plot.interpolateNearest})
@@ -336,7 +336,7 @@ Plot.raster(ca55, {x: "LONGITUDE", y: "LATITUDE", fill: "MAG_IGRF90", interpolat
Assigns each pixel in the raster grid the value of the closest sample; effectively a Voronoi diagram.
-## interpolatorBarycentric(*options*)
+## interpolatorBarycentric(*options*) {#interpolatorBarycentric}
```js
Plot.raster(ca55, {x: "LONGITUDE", y: "LATITUDE", fill: "MAG_IGRF90", interpolate: Plot.interpolatorBarycentric()})
@@ -344,7 +344,7 @@ Plot.raster(ca55, {x: "LONGITUDE", y: "LATITUDE", fill: "MAG_IGRF90", interpolat
Constructs a Delaunay triangulation of the samples, and then for each pixel in the raster grid, determines the triangle that covers the pixel’s centroid and interpolates the values associated with the triangle’s vertices using [barycentric coordinates](https://en.wikipedia.org/wiki/Barycentric_coordinate_system). If the interpolated values are ordinal or categorical (_i.e._, anything other than numbers or dates), then one of the three values will be picked randomly weighted by the barycentric coordinates; the given **random** number generator will be used, which defaults to a [linear congruential generator](https://d3js.org/d3-random#randomLcg) with a fixed seed (for deterministic results).
-## interpolatorRandomWalk(*options*)
+## interpolatorRandomWalk(*options*) {#interpolatorRandomWalk}
```js
Plot.raster(ca55, {x: "LONGITUDE", y: "LATITUDE", fill: "MAG_IGRF90", interpolate: Plot.interpolatorRandomWalk()})
diff --git a/docs/marks/rect.md b/docs/marks/rect.md
index e9b2447458..a0431fb19f 100644
--- a/docs/marks/rect.md
+++ b/docs/marks/rect.md
@@ -49,7 +49,7 @@ Plot.plot({
```
:::
-More commonly, the rect mark is used to produce histograms or heatmaps of quantitative data. For example, given some binned observations computed by [d3.bin](https://d3js.org/d3-array/bin), we can produce a basic histogram with [rectY](#recty-data-options) as follows:
+More commonly, the rect mark is used to produce histograms or heatmaps of quantitative data. For example, given some binned observations computed by [d3.bin](https://d3js.org/d3-array/bin), we can produce a basic histogram with [rectY](#rectY) as follows:
:::plot https://observablehq.com/@observablehq/plot-rects-and-bins
```js
@@ -73,7 +73,7 @@ Plot.rectY(d3.range(1000).map(d3.randomNormal()), Plot.binX()).plot()
```
:::
-Like the [bar mark](./bar.md), the rect mark has two convenience constructors for common orientations: [rectX](#rectx-data-options) is for horizontal→ rects and applies an implicit [stackX transform](../transforms/stack.md#stackx-stack-options), while [rectY](#recty-data-options) is for vertical↑ rects and applies an implicit [stackY transform](../transforms/stack.md#stacky-stack-options).
+Like the [bar mark](./bar.md), the rect mark has two convenience constructors for common orientations: [rectX](#rectX) is for horizontal→ rects and applies an implicit [stackX transform](../transforms/stack.md#stackX), while [rectY](#rectY) is for vertical↑ rects and applies an implicit [stackY transform](../transforms/stack.md#stackY).
:::plot defer https://observablehq.com/@observablehq/plot-vertical-histogram
```js
@@ -119,7 +119,7 @@ Plot.plot({
```
:::
-The [rect constructor](#rect-data-options), again with the [bin transform](../transforms/bin.md), can produce two-dimensional histograms (heatmaps) where density is represented by the **fill** color encoding.
+The [rect constructor](#rect), again with the [bin transform](../transforms/bin.md), can produce two-dimensional histograms (heatmaps) where density is represented by the **fill** color encoding.
:::plot defer https://observablehq.com/@observablehq/plot-continuous-dimensions-heatmap
```js-vue
@@ -205,7 +205,7 @@ If an **interval** is specified, such as d3.utcDay, **x1** and **x2** can be der
The rect mark supports the [standard mark options](../features/marks.md#mark-options), including insets and rounded corners. The **stroke** defaults to *none*. The **fill** defaults to *currentColor* if the stroke is *none*, and to *none* otherwise.
-## rect(*data*, *options*)
+## rect(*data*, *options*) {#rect}
```js
Plot.rect(olympians, Plot.bin({fill: "count"}, {x: "weight", y: "height"}))
@@ -213,18 +213,18 @@ Plot.rect(olympians, Plot.bin({fill: "count"}, {x: "weight", y: "height"}))
Returns a new rect with the given *data* and *options*.
-## rectX(*data*, *options*)
+## rectX(*data*, *options*) {#rectX}
```js
Plot.rectX(olympians, Plot.binY({x: "count"}, {y: "weight"}))
```
-Equivalent to [rect](#rect-data-options), except that if neither the **x1** nor **x2** option is specified, the **x** option may be specified as shorthand to apply an implicit [stackX transform](../transforms/stack.md); this is the typical configuration for a histogram with horizontal→ rects aligned at *x* = 0. If the **x** option is not specified, it defaults to the identity function.
+Equivalent to [rect](#rect), except that if neither the **x1** nor **x2** option is specified, the **x** option may be specified as shorthand to apply an implicit [stackX transform](../transforms/stack.md); this is the typical configuration for a histogram with horizontal→ rects aligned at *x* = 0. If the **x** option is not specified, it defaults to the identity function.
-## rectY(*data*, *options*)
+## rectY(*data*, *options*) {#rectY}
```js
Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"}))
```
-Equivalent to [rect](#rect-data-options), except that if neither the **y1** nor **y2** option is specified, the **y** option may be specified as shorthand to apply an implicit [stackY transform](../transforms/stack.md); this is the typical configuration for a histogram with vertical↑ rects aligned at *y* = 0. If the **y** option is not specified, it defaults to the identity function.
+Equivalent to [rect](#rect), except that if neither the **y1** nor **y2** option is specified, the **y** option may be specified as shorthand to apply an implicit [stackY transform](../transforms/stack.md); this is the typical configuration for a histogram with vertical↑ rects aligned at *y* = 0. If the **y** option is not specified, it defaults to the identity function.
diff --git a/docs/marks/rule.md b/docs/marks/rule.md
index a06917a925..dece412095 100644
--- a/docs/marks/rule.md
+++ b/docs/marks/rule.md
@@ -22,7 +22,7 @@ onMounted(() => {
The rule mark is one of two marks in Plot for drawing horizontal or vertical lines; it should be used when the secondary position dimension, if any, is quantitative. When it is ordinal, use a [tick](./tick.md).
:::
-The **rule mark** comes in two orientations: [ruleY](#ruley-data-options) draws a horizontal↔︎ line with a given *y* value, while [ruleX](#rulex-data-options) draws a vertical↕︎ line with a given *x* value. Rules are often used as annotations, say to mark the *y* = 0 baseline (in red below for emphasis) in a line chart.
+The **rule mark** comes in two orientations: [ruleY](#ruleY) draws a horizontal↔︎ line with a given *y* value, while [ruleX](#ruleX) draws a vertical↕︎ line with a given *x* value. Rules are often used as annotations, say to mark the *y* = 0 baseline (in red below for emphasis) in a line chart.
:::plot https://observablehq.com/@observablehq/plot-rule-zero
```js
@@ -139,9 +139,9 @@ Rules are also used by the [grid mark](./grid.md) to draw grid lines.
## Rule options
-For the required channels, see [ruleX](#rulex-data-options) and [ruleY](#ruley-data-options). The rule mark supports the [standard mark options](../features/marks.md#mark-options), including insets along its secondary dimension, and [marker options](../features/markers.md) to add a marker (such as a dot or an arrowhead) to the start or end of the rule. The **stroke** defaults to *currentColor*.
+For the required channels, see [ruleX](#ruleX) and [ruleY](#ruleY). The rule mark supports the [standard mark options](../features/marks.md#mark-options), including insets along its secondary dimension, and [marker options](../features/markers.md) to add a marker (such as a dot or an arrowhead) to the start or end of the rule. The **stroke** defaults to *currentColor*.
-## ruleX(*data*, *options*)
+## ruleX(*data*, *options*) {#ruleX}
```js
Plot.ruleX([0]) // as annotation
@@ -162,7 +162,7 @@ If **y** is specified, it is shorthand for **y2** with **y1** equal to zero; thi
If an **interval** is specified, such as d3.utcDay, **y1** and **y2** can be derived from **y**: *interval*.floor(*y*) is invoked for each *y* to produce *y1*, and *interval*.offset(*y1*) is invoked for each *y1* to produce *y2*. If the interval is specified as a number *n*, *y1* and *y2* are taken as the two consecutive multiples of *n* that bracket *y*. Named UTC intervals such as *day* are also supported; see [scale options](../features/scales.md#scale-options).
-## ruleY(*data*, *options*)
+## ruleY(*data*, *options*) {#ruleY}
```js
Plot.ruleY([0]) // as annotation
diff --git a/docs/marks/text.md b/docs/marks/text.md
index 58346ba82f..b909e50473 100644
--- a/docs/marks/text.md
+++ b/docs/marks/text.md
@@ -240,7 +240,7 @@ If the **frameAnchor** option is not specified, then **textAnchor** and **lineAn
The **paintOrder** option defaults to *stroke* and the **strokeWidth** option defaults to 3. By setting **fill** to the foreground color and **stroke** to the background color (such as *black* and *white*, respectively), you can surround text with a “halo” which may improve legibility against a busy background.
-## text(*data*, *options*)
+## text(*data*, *options*) {#text}
```js
Plot.text(driving, {x: "miles", y: "gas", text: "year"})
@@ -248,22 +248,22 @@ Plot.text(driving, {x: "miles", y: "gas", text: "year"})
Returns a new text mark with the given *data* and *options*. If neither the **x** nor **y** nor **frameAnchor** options are specified, *data* is assumed to be an array of pairs [[*x₀*, *y₀*], [*x₁*, *y₁*], [*x₂*, *y₂*], …] such that **x** = [*x₀*, *x₁*, *x₂*, …] and **y** = [*y₀*, *y₁*, *y₂*, …].
-## textX(*data*, *options*)
+## textX(*data*, *options*) {#textX}
```js
Plot.textX(alphabet.map((d) => d.frequency))
```
-Equivalent to [text](#text-data-options), except **x** defaults to [identity](../features/transforms.md#identity) and assumes that *data* = [*x₀*, *x₁*, *x₂*, …].
+Equivalent to [text](#text), except **x** defaults to [identity](../features/transforms.md#identity) and assumes that *data* = [*x₀*, *x₁*, *x₂*, …].
If an **interval** is specified, such as d3.utcDay, **y** is transformed to (*interval*.floor(*y*) + *interval*.offset(*interval*.floor(*y*))) / 2. If the interval is specified as a number *n*, *y* will be the midpoint of two consecutive multiples of *n* that bracket *y*. Named UTC intervals such as *day* are also supported; see [scale options](../features/scales.md#scale-options).
-## textY(*data*, *options*)
+## textY(*data*, *options*) {#textY}
```js
Plot.textY(alphabet.map((d) => d.frequency))
```
-Equivalent to [text](#text-data-options), except **y** defaults to [identity](../features/transforms.md#identity) and assumes that *data* = [*y₀*, *y₁*, *y₂*, …].
+Equivalent to [text](#text), except **y** defaults to [identity](../features/transforms.md#identity) and assumes that *data* = [*y₀*, *y₁*, *y₂*, …].
If an **interval** is specified, such as d3.utcDay, **x** is transformed to (*interval*.floor(*x*) + *interval*.offset(*interval*.floor(*x*))) / 2. If the interval is specified as a number *n*, *x* will be the midpoint of two consecutive multiples of *n* that bracket *x*. Named UTC intervals such as *day* are also supported; see [scale options](../features/scales.md#scale-options).
diff --git a/docs/marks/tick.md b/docs/marks/tick.md
index b0b467a37c..9212f4b810 100644
--- a/docs/marks/tick.md
+++ b/docs/marks/tick.md
@@ -23,7 +23,7 @@ onMounted(() => {
The tick mark is one of two marks in Plot for drawing horizontal or vertical lines; it should be used when the secondary position dimension, if any, is ordinal. When it is quantitative, use a [rule](./rule.md).
:::
-The **tick mark** comes in two orientations: [tickY](#ticky-data-options) draws a horizontal↔︎ line with a given *y* value, while [tickX](#tickx-data-options) draws a vertical↕︎ line with a given *x* value. Ticks have an optional secondary position dimension (**x** for tickY and **y** for tickX); this second dimension is ordinal, unlike a [rule](./rule.md), and requires a corresponding [band scale](../features/scales.md).
+The **tick mark** comes in two orientations: [tickY](#tickY) draws a horizontal↔︎ line with a given *y* value, while [tickX](#tickX) draws a vertical↕︎ line with a given *x* value. Ticks have an optional secondary position dimension (**x** for tickY and **y** for tickX); this second dimension is ordinal, unlike a [rule](./rule.md), and requires a corresponding [band scale](../features/scales.md).
Ticks are often used to show one-dimensional distributions, as in the “barcode” plot below showing the proportion of the population in each age bracket across U.S. states.
@@ -86,9 +86,9 @@ Ticks are also used by the [box mark](./box.md) to denote the median value for e
## Tick options
-For the required channels, see [tickX](#tickx-data-options) and [tickY](#ticky-data-options). The tick mark supports the [standard mark options](../features/marks.md#mark-options), including insets, and [marker options](../features/markers.md) to add a marker (such as a dot or an arrowhead) to the start or end of the rule. The **stroke** defaults to *currentColor*.
+For the required channels, see [tickX](#tickX) and [tickY](#tickY). The tick mark supports the [standard mark options](../features/marks.md#mark-options), including insets, and [marker options](../features/markers.md) to add a marker (such as a dot or an arrowhead) to the start or end of the rule. The **stroke** defaults to *currentColor*.
-## tickX(*data*, *options*)
+## tickX(*data*, *options*) {#tickX}
```js
Plot.tickX(stateage, {x: "population", y: "age"})
@@ -104,7 +104,7 @@ The following optional channels are supported:
If the **y** channel is not specified, the tick will span the full vertical extent of the frame.
-## tickY(*data*, *options*)
+## tickY(*data*, *options*) {#tickY}
```js
Plot.tickY(stateage, {y: "population", x: "age"})
diff --git a/docs/marks/tip.md b/docs/marks/tip.md
index c73fdb08a5..8ee8940a1b 100644
--- a/docs/marks/tip.md
+++ b/docs/marks/tip.md
@@ -221,7 +221,7 @@ These [standard text options](./text.md#text-options) control the display of tex
- **lineWidth** - the line width in ems, for wrapping; defaults to Infinity
- **textOverflow** - how to wrap or clip lines longer than the specified line width
-## tip(*data*, *options*)
+## tip(*data*, *options*) {#tip}
```js
Plot.tip(aapl, {x: "Date", y: "Close"})
diff --git a/docs/marks/tree.md b/docs/marks/tree.md
index 25907a2ebb..08c3951943 100644
--- a/docs/marks/tree.md
+++ b/docs/marks/tree.md
@@ -32,7 +32,7 @@ function indent() {
# Tree mark
-The **tree mark** produces tree diagrams using the [tree transform](../transforms/tree.md). It is a [composite mark](../features/marks.md#marks-marks), consisting of a [link](./link.md) to render links from parent to child, an optional [dot](./dot.md) for nodes, and one or two [text](./text.md) for node labels. The link mark uses the [treeLink transform](../transforms/tree.md#treelink-options), while the dot and text marks use the [treeNode transform](../transforms/tree.md#treenode-options).
+The **tree mark** produces tree diagrams using the [tree transform](../transforms/tree.md). It is a [composite mark](../features/marks.md#marks), consisting of a [link](./link.md) to render links from parent to child, an optional [dot](./dot.md) for nodes, and one or two [text](./text.md) for node labels. The link mark uses the [treeLink transform](../transforms/tree.md#treeLink), while the dot and text marks use the [treeNode transform](../transforms/tree.md#treeNode).
For example, here is a little family tree of Greek gods.
@@ -75,7 +75,7 @@ Plot.plot({
```
:::
-The **treeLayout** option specifies the layout algorithm. The tree mark uses the Reingold–Tilford “tidy” tree algorithm, [d3.tree](https://d3js.org/d3-hierarchy/tree), by default. The [cluster](#cluster-data-options) convenience method sets **treeLayout** to [d3.cluster](https://d3js.org/d3-hierarchy/cluster), aligning the leaf nodes.
+The **treeLayout** option specifies the layout algorithm. The tree mark uses the Reingold–Tilford “tidy” tree algorithm, [d3.tree](https://d3js.org/d3-hierarchy/tree), by default. The [cluster](#cluster) convenience method sets **treeLayout** to [d3.cluster](https://d3js.org/d3-hierarchy/cluster), aligning the leaf nodes.
:::plot https://observablehq.com/@observablehq/plot-cluster-flare
```js
@@ -164,7 +164,7 @@ The **textLayout** option controls how text labels are anchored to the node. Two
If the **treeLayout** is d3.tree or d3.cluster, the **textLayout** defaults to *mirrored*; otherwise it defaults to *normal*.
-## tree(*data*, *options*)
+## tree(*data*, *options*) {#tree}
```js
Plot.tree(flare, {path: "name", delimiter: "."})
@@ -172,10 +172,10 @@ Plot.tree(flare, {path: "name", delimiter: "."})
Returns a new tree mark with the given *data* and *options*.
-## cluster(*data*, *options*)
+## cluster(*data*, *options*) {#cluster}
```js
Plot.cluster(flare, {path: "name", delimiter: "."})
```
-Like [tree](#tree-data-options), except sets the **treeLayout** option to [d3.cluster](https://d3js.org/d3-hierarchy/cluster), aligning leaf nodes, and defaults the **textLayout** option to *mirrored*.
+Like [tree](#tree), except sets the **treeLayout** option to [d3.cluster](https://d3js.org/d3-hierarchy/cluster), aligning leaf nodes, and defaults the **textLayout** option to *mirrored*.
diff --git a/docs/marks/vector.md b/docs/marks/vector.md
index d108cff3c6..bd866e1bef 100644
--- a/docs/marks/vector.md
+++ b/docs/marks/vector.md
@@ -88,7 +88,7 @@ Plot.plot({
```
:::
-The **shape** option controls the vector’s appearance, while the **anchor** option positions the vector relative to its anchor point specified in **x** and **y**. The [spike constructor](#spike-data-options) sets the **shape** to *spike* and the **anchor** to *start*. For example, this can be used to produce a [spike map](https://observablehq.com/@observablehq/plot-spike) of U.S. county population.
+The **shape** option controls the vector’s appearance, while the **anchor** option positions the vector relative to its anchor point specified in **x** and **y**. The [spike constructor](#spike) sets the **shape** to *spike* and the **anchor** to *start*. For example, this can be used to produce a [spike map](https://observablehq.com/@observablehq/plot-spike) of U.S. county population.
:::plot defer https://observablehq.com/@observablehq/plot-spike-map-example
```js
@@ -168,7 +168,7 @@ The **stroke** defaults to *currentColor*. The **strokeWidth** defaults to 1.5,
Vectors are drawn in input order, with the last data drawn on top. If sorting is needed, say to mitigate overplotting by drawing the smallest vectors on top, consider a [sort transform](../transforms/sort.md).
-## vector(*data*, *options*)
+## vector(*data*, *options*) {#vector}
```js
Plot.vector(wind, {x: "longitude", y: "latitude", length: "speed", rotate: "direction"})
@@ -176,26 +176,26 @@ Plot.vector(wind, {x: "longitude", y: "latitude", length: "speed", rotate: "dire
Returns a new vector with the given *data* and *options*. If neither the **x** nor **y** options are specified, *data* is assumed to be an array of pairs [[*x₀*, *y₀*], [*x₁*, *y₁*], [*x₂*, *y₂*], …] such that **x** = [*x₀*, *x₁*, *x₂*, …] and **y** = [*y₀*, *y₁*, *y₂*, …].
-## vectorX(*data*, *options*)
+## vectorX(*data*, *options*) {#vectorX}
```js
Plot.vectorX(cars.map((d) => d["economy (mpg)"]))
```
-Equivalent to [vector](#vector-data-options) except that if the **x** option is not specified, it defaults to the identity function and assumes that *data* = [*x₀*, *x₁*, *x₂*, …].
+Equivalent to [vector](#vector) except that if the **x** option is not specified, it defaults to the identity function and assumes that *data* = [*x₀*, *x₁*, *x₂*, …].
-## vectorY(*data*, *options*)
+## vectorY(*data*, *options*) {#vectorY}
```js
Plot.vectorY(cars.map((d) => d["economy (mpg)"]))
```
-Equivalent to [vector](#vector-data-options) except that if the **y** option is not specified, it defaults to the identity function and assumes that *data* = [*y₀*, *y₁*, *y₂*, …].
+Equivalent to [vector](#vector) except that if the **y** option is not specified, it defaults to the identity function and assumes that *data* = [*y₀*, *y₁*, *y₂*, …].
-## spike(*data*, *options*)
+## spike(*data*, *options*) {#spike}
```js
Plot.spike(counties, Plot.geoCentroid({length: (d) => d.properties.population}))
```
-Equivalent to [vector](#vector-data-options) except that the **shape** defaults to *spike*, the **stroke** defaults to *currentColor*, the **strokeWidth** defaults to 1, the **fill** defaults to **stroke**, the **fillOpacity** defaults to 0.3, and the **anchor** defaults to *start*.
+Equivalent to [vector](#vector) except that the **shape** defaults to *spike*, the **stroke** defaults to *currentColor*, the **strokeWidth** defaults to 1, the **fill** defaults to **stroke**, the **fillOpacity** defaults to 0.3, and the **anchor** defaults to *start*.
diff --git a/docs/transforms/bin.md b/docs/transforms/bin.md
index 2fa707d4b7..d624d40c80 100644
--- a/docs/transforms/bin.md
+++ b/docs/transforms/bin.md
@@ -87,9 +87,9 @@ While the **mixBlendMode** option is useful for mitigating occlusion, it can be
The bin transform comes in three orientations:
-- [binX](#binx-outputs-options) bins on **x**, and often outputs **y** as in a histogram with vertical↑ rects;
-- [binY](#biny-outputs-options) bins on **y**, and often outputs **x** as in a histogram with horizontal→ rects; and
-- [bin](#bin-outputs-options) bins on both **x** and **y**, and often outputs to **fill** or **r** as in a heatmap.
+- [binX](#binX) bins on **x**, and often outputs **y** as in a histogram with vertical↑ rects;
+- [binY](#binY) bins on **y**, and often outputs **x** as in a histogram with horizontal→ rects; and
+- [bin](#bin) bins on both **x** and **y**, and often outputs to **fill** or **r** as in a heatmap.
As you might guess, the binY transform with the rectX mark produces a histogram with horizontal→ rects.
@@ -346,7 +346,7 @@ Plot.binX({y: "count"}, {x: "body_mass_g", fill: "species"})
Lastly, the bin transform changes the default [mark insets](../features/marks.md#mark-options): binX changes the defaults for **insetLeft** and **insetRight**; binY changes the defaults for **insetTop** and **insetBottom**; bin changes all four.
-## bin(*outputs*, *options*)
+## bin(*outputs*, *options*) {#bin}
```js
Plot.rect(olympians, Plot.bin({fill: "count"}, {x: "weight", y: "height"}))
@@ -354,7 +354,7 @@ Plot.rect(olympians, Plot.bin({fill: "count"}, {x: "weight", y: "height"}))
Bins on **x** and **y**. Also groups on the first channel of **z**, **fill**, or **stroke**, if any.
-## binX(*outputs*, *options*)
+## binX(*outputs*, *options*) {#binX}
```js
Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"}))
@@ -362,7 +362,7 @@ Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"}))
Bins on **x**. Also groups on **y** and the first channel of **z**, **fill**, or **stroke**, if any.
-## binY(*outputs*, *options*)
+## binY(*outputs*, *options*) {#binY}
```js
Plot.rectX(olympians, Plot.binY({x: "count"}, {y: "weight"}))
diff --git a/docs/transforms/centroid.md b/docs/transforms/centroid.md
index fb11d21c24..cc7f899a2e 100644
--- a/docs/transforms/centroid.md
+++ b/docs/transforms/centroid.md
@@ -19,7 +19,7 @@ onMounted(() => {
# Centroid transform
-Plot offers two transforms that derive centroids from GeoJSON geometries: [centroid](#centroid-options) and [geoCentroid](#geocentroid-options). These transforms can be used by any mark that accepts **x** and **y** channels. Below, a [text mark](../marks/text.md) labels the U.S. states.
+Plot offers two transforms that derive centroids from GeoJSON geometries: [centroid](#centroid) and [geoCentroid](#geoCentroid). These transforms can be used by any mark that accepts **x** and **y** channels. Below, a [text mark](../marks/text.md) labels the U.S. states.
:::plot defer https://observablehq.com/@observablehq/plot-state-labels
```js
@@ -84,7 +84,7 @@ Plot.plot({
```
:::
-## centroid(*options*)
+## centroid(*options*) {#centroid}
```js
Plot.centroid({geometry: Plot.identity})
@@ -92,7 +92,7 @@ Plot.centroid({geometry: Plot.identity})
The centroid initializer derives **x** and **y** channels representing the planar (projected) centroids for the given GeoJSON geometry. If the **geometry** option is not specified, the mark’s data is assumed to be GeoJSON objects.
-## geoCentroid(*options*)
+## geoCentroid(*options*) {#geoCentroid}
```js
Plot.geoCentroid({geometry: Plot.identity})
diff --git a/docs/transforms/dodge.md b/docs/transforms/dodge.md
index 45e007f539..78f9b2cb18 100644
--- a/docs/transforms/dodge.md
+++ b/docs/transforms/dodge.md
@@ -19,7 +19,7 @@ onMounted(() => {
# Dodge transform
-Given one position dimension (either **x** or **y**), the **dodge** transform computes the other position dimension such that dots are packed densely without overlapping. The [dodgeX transform](#dodgex-dodgeoptions-options) computes **x** (horizontal position) given **y** (vertical position), while the [dodgeY transform](#dodgey-dodgeoptions-options) computes **y** given **x**.
+Given one position dimension (either **x** or **y**), the **dodge** transform computes the other position dimension such that dots are packed densely without overlapping. The [dodgeX transform](#dodgeX) computes **x** (horizontal position) given **y** (vertical position), while the [dodgeY transform](#dodgeY) computes **y** given **x**.
The dodge transform is commonly used to produce beeswarm 🐝 plots, a way of showing a one-dimensional distribution that preserves the visual identity of individual data points. For example, the dots below represent the weights of cars; the rough shape of the pile gives a sense of the overall distribution (peaking around 2,100 pounds), and you can hover an individual dot to see which car it represents.
@@ -245,7 +245,7 @@ The dodge transforms accept the following options:
The **anchor** option may one of *middle*, *right*, and *left* for dodgeX, and one of *middle*, *top*, and *bottom* for dodgeY. With the *middle* anchor the piles will grow from the center in both directions; with the other anchors, the piles will grow from the specified anchor towards the opposite direction.
-## dodgeY(*dodgeOptions*, *options*)
+## dodgeY(*dodgeOptions*, *options*) {#dodgeY}
```js
Plot.dodgeY({x: "date"})
@@ -253,7 +253,7 @@ Plot.dodgeY({x: "date"})
Given marks arranged along the *x* axis, the dodgeY transform piles them vertically by defining a *y* position channel that avoids overlapping. The *x* position channel is unchanged.
-## dodgeX(*dodgeOptions*, *options*)
+## dodgeX(*dodgeOptions*, *options*) {#dodgeX}
```js
Plot.dodgeX({y: "value"})
diff --git a/docs/transforms/filter.md b/docs/transforms/filter.md
index da2a36d794..09587e1f67 100644
--- a/docs/transforms/filter.md
+++ b/docs/transforms/filter.md
@@ -48,7 +48,7 @@ Plot.plot({
As an alternative to the filter transform here, you could set the **text** channel value to null using a function: `text: (d) => d.highlight ? d.nyt_display : null`.
:::
-The filter transform can be applied either via the **filter** [mark option](../features/marks.md#mark-options), as above, or as an explicit [filter transform](#filter-test-options). The latter is generally only needed when composing multiple transforms.
+The filter transform can be applied either via the **filter** [mark option](../features/marks.md#mark-options), as above, or as an explicit [filter transform](#filter). The latter is generally only needed when composing multiple transforms.
To highlight the vowels in a bar chart of English letter frequency, you can use a filtered bar with a red stroke. A filtered mark allows you to set options on a subset of the data, even if those options — such as mark insets — are not expressible as a channels.
@@ -104,7 +104,7 @@ Plot.plot({
```
:::
-## filter(*test*, *options*)
+## filter(*test*, *options*) {#filter}
```js
Plot.filter((d) => /[aeiouy]/i.test(d.letter), {x: "letter", y: "frequency"})
diff --git a/docs/transforms/group.md b/docs/transforms/group.md
index a66f7d99d2..0584a1413b 100644
--- a/docs/transforms/group.md
+++ b/docs/transforms/group.md
@@ -199,10 +199,10 @@ Plot.plot({
The group transform comes in four orientations:
-- [groupX](#groupx-outputs-options) groups on **x**, and often outputs **y** as in a vertical↑ bar chart;
-- [groupY](#groupy-outputs-options) groups on **y**, and often outputs **x** as in a horizontal→ bar chart;
-- [groupZ](#groupz-outputs-options) groups on *neither* **x** nor **y**, combining everything into one group; and
-- [group](#group-outputs-options) groups on *both* **x** and **y**, and often outputs to **fill** or **r** as in a heatmap.
+- [groupX](#groupX) groups on **x**, and often outputs **y** as in a vertical↑ bar chart;
+- [groupY](#groupY) groups on **y**, and often outputs **x** as in a horizontal→ bar chart;
+- [groupZ](#groupZ) groups on *neither* **x** nor **y**, combining everything into one group; and
+- [group](#group) groups on *both* **x** and **y**, and often outputs to **fill** or **r** as in a heatmap.
As you might guess, the groupY transform with the barX mark produces a horizontal→ bar chart. (We must increase the **marginLeft** to avoid the *y* axis labels from being cut off.)
@@ -284,7 +284,7 @@ Plot.plot({
```
:::
-To group solely on **z** (or **fill** or **stroke**), use [groupZ](#groupz-outputs-options). The single stacked bar chart below (an alternative to a pie chart) shows the proportion of athletes by sport. The *proportion* reducer converts counts into normalized proportions adding up to 1, while the *first* reducer pulls out the name of the sport for labeling.
+To group solely on **z** (or **fill** or **stroke**), use [groupZ](#groupZ). The single stacked bar chart below (an alternative to a pie chart) shows the proportion of athletes by sport. The *proportion* reducer converts counts into normalized proportions adding up to 1, while the *first* reducer pulls out the name of the sport for labeling.
:::plot defer https://observablehq.com/@observablehq/plot-single-stacked-bar
```js
@@ -404,7 +404,7 @@ If any of **z**, **fill**, or **stroke** is a channel, the first of these channe
The default reducer for the **title** channel returns a summary list of the top 5 values with the corresponding number of occurrences.
-## group(*outputs*, *options*)
+## group(*outputs*, *options*) {#group}
```js
Plot.group({fill: "count"}, {x: "island", y: "species"})
@@ -412,7 +412,7 @@ Plot.group({fill: "count"}, {x: "island", y: "species"})
Groups on **x**, **y**, and the first channel of **z**, **fill**, or **stroke**, if any.
-## groupX(*outputs*, *options*)
+## groupX(*outputs*, *options*) {#groupX}
```js
Plot.groupX({y: "sum"}, {x: "species", y: "body_mass_g"})
@@ -420,7 +420,7 @@ Plot.groupX({y: "sum"}, {x: "species", y: "body_mass_g"})
Groups on **x** and the first channel of **z**, **fill**, or **stroke**, if any.
-## groupY(*outputs*, *options*)
+## groupY(*outputs*, *options*) {#groupY}
```js
Plot.groupY({x: "sum"}, {y: "species", x: "body_mass_g"})
@@ -428,7 +428,7 @@ Plot.groupY({x: "sum"}, {y: "species", x: "body_mass_g"})
Groups on **y** and the first channel of **z**, **fill**, or **stroke**, if any.
-## groupZ(*outputs*, *options*)
+## groupZ(*outputs*, *options*) {#groupZ}
```js
Plot.groupZ({x: "proportion"}, {fill: "species"})
diff --git a/docs/transforms/hexbin.md b/docs/transforms/hexbin.md
index 051b75bc82..200372f1ac 100644
--- a/docs/transforms/hexbin.md
+++ b/docs/transforms/hexbin.md
@@ -133,7 +133,7 @@ Plot.plot({
```
:::
-The hexbin transform defaults the **symbol** option to *hexagon*, but you can override it. The [circle constructor](../marks/dot.md#circle-data-options) changes it to *circle*.
+The hexbin transform defaults the **symbol** option to *hexagon*, but you can override it. The [circle constructor](../marks/dot.md#circle) changes it to *circle*.
:::plot defer https://observablehq.com/@observablehq/plot-hexbin-circle
```js
@@ -198,7 +198,7 @@ The following aggregation methods are supported:
* a function to be passed the array of values for each bin and the extent of the bin
* an object with a *reduceIndex* method
-## hexbin(*outputs*, *options*)
+## hexbin(*outputs*, *options*) {#hexbin}
```js
Plot.dot(olympians, Plot.hexbin({fill: "count"}, {x: "weight", y: "height"}))
diff --git a/docs/transforms/map.md b/docs/transforms/map.md
index 2e859520f5..79201cc86b 100644
--- a/docs/transforms/map.md
+++ b/docs/transforms/map.md
@@ -47,9 +47,9 @@ Plot.plot({
```
:::
-The [mapY transform](#mapy-map-options) above is shorthand for applying the given map method to all *y* channels. There’s also a less-common [mapX transform](#mapx-map-options) for *x* channels.
+The [mapY transform](#mapY) above is shorthand for applying the given map method to all *y* channels. There’s also a less-common [mapX transform](#mapX) for *x* channels.
-The more explicit [map](#map-outputs-options) transform lets you specify which channels to map, and what map method to use for each channel. Like the [group](./group.md) and [bin](./bin.md) transforms, it takes two arguments: an *outputs* object that describes the output channels to compute, and an *options* object that describes the input channels and additional options. So this:
+The more explicit [map](#map) transform lets you specify which channels to map, and what map method to use for each channel. Like the [group](./group.md) and [bin](./bin.md) transforms, it takes two arguments: an *outputs* object that describes the output channels to compute, and an *options* object that describes the input channels and additional options. So this:
```js
Plot.mapY("cumsum", {y: d3.randomNormal()})
@@ -119,7 +119,7 @@ The following map methods are supported:
If a function is used, it must return an array of the same length as the given input. If a *mapIndex* method is used, it is repeatedly passed the index for each series (an array of integers), the corresponding input channel’s array of values, and the output channel’s array of values; it must populate the slots specified by the index in the output array.
-## map(*outputs*, *options*)
+## map(*outputs*, *options*) {#map}
```js
Plot.map({y: "cumsum"}, {y: d3.randomNormal()})
@@ -127,7 +127,7 @@ Plot.map({y: "cumsum"}, {y: d3.randomNormal()})
Groups on the first channel of **z**, **fill**, or **stroke**, if any, and then for each channel declared in the specified *outputs* object, applies the corresponding map method. Each channel in *outputs* must have a corresponding input channel in *options*.
-## mapX(*map*, *options*)
+## mapX(*map*, *options*) {#mapX}
```js
Plot.mapX("cumsum", {x: d3.randomNormal()})
@@ -135,7 +135,7 @@ Plot.mapX("cumsum", {x: d3.randomNormal()})
Equivalent to Plot.map({x: *map*, x1: *map*, x2: *map*}, *options*), but ignores any of **x**, **x1**, and **x2** not present in *options*. In addition, if none of **x**, **x1**, or **x2** are specified, then **x** defaults to [identity](../features/transforms.md#identity).
-## mapY(*map*, *options*)
+## mapY(*map*, *options*) {#mapY}
```js
Plot.mapY("cumsum", {y: d3.randomNormal()})
diff --git a/docs/transforms/normalize.md b/docs/transforms/normalize.md
index a4622428f9..6bf4c9a95c 100644
--- a/docs/transforms/normalize.md
+++ b/docs/transforms/normalize.md
@@ -66,7 +66,7 @@ The [select transform](./select.md) is used to label the endpoints of each line.
This example uses an [immediately-invoked function expression (IIFE)](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) for the **tickFormat** option so that the [d3.format](https://d3js.org/d3-format) only needs to be constructed once.
:::
-The normalize transform converts absolute values into relative ones. So, if **y** is [*y₀*, *y₁*, *y₂*, …] and the *first* basis is used with [normalizeY](#normalizey-basis-options), the resulting output **y** channel is [*y₀* / *y₀*, *y₁* / *y₀*, *y₂* / *y₀*, …]. But it’s a bit more complicated than this in practice since **y** is first grouped by **z**, **fill**, or **stroke** into separate series.
+The normalize transform converts absolute values into relative ones. So, if **y** is [*y₀*, *y₁*, *y₂*, …] and the *first* basis is used with [normalizeY](#normalizeY), the resulting output **y** channel is [*y₀* / *y₀*, *y₁* / *y₀*, *y₂* / *y₀*, …]. But it’s a bit more complicated than this in practice since **y** is first grouped by **z**, **fill**, or **stroke** into separate series.
As another example, the normalize transform can be used to compute proportional demographics from absolute populations. The plot below compares the demographics of U.S. states: color represents age group, **y** represents the state, and **x** represents the proportion of the state’s population in that age group.
@@ -121,7 +121,7 @@ The **basis** option specifies how to normalize the series values; it is one of:
* a function to be passed an array of values, returning the desired basis
* a function to be passed an index and channel value array, returning the desired basis
-## normalize(*basis*)
+## normalize(*basis*) {#normalize}
```js
Plot.map({y: Plot.normalize("first")}, {x: "Date", y: "Close", stroke: "Symbol"})
@@ -129,13 +129,13 @@ Plot.map({y: Plot.normalize("first")}, {x: "Date", y: "Close", stroke: "Symbol"}
Returns a normalize map method for the given *basis*, suitable for use with the [map transform](./map.md).
-## normalizeX(*basis*, *options*)
+## normalizeX(*basis*, *options*) {#normalizeX}
```js
Plot.normalizeX("first", {y: "Date", x: "Close", stroke: "Symbol"})
```
-Like [mapX](./map.md#mapx-map-options), but applies the normalize map method with the given *basis*. The **basis** option can also be mixed into the specified *options* like so:
+Like [mapX](./map.md#mapX), but applies the normalize map method with the given *basis*. The **basis** option can also be mixed into the specified *options* like so:
```js
Plot.normalizeX({basis: "first", y: "Date", x: "Close", stroke: "Symbol"})
@@ -143,13 +143,13 @@ Plot.normalizeX({basis: "first", y: "Date", x: "Close", stroke: "Symbol"})
If not specified, the *basis* defaults to *first*.
-## normalizeY(*basis*, *options*)
+## normalizeY(*basis*, *options*) {#normalizeY}
```js
Plot.normalizeY("first", {x: "Date", y: "Close", stroke: "Symbol"})
```
-Like [mapY](./map.md#mapy-map-options), but applies the normalize map method with the given *basis*. The **basis** option can also be mixed into the specified *options* like so:
+Like [mapY](./map.md#mapY), but applies the normalize map method with the given *basis*. The **basis** option can also be mixed into the specified *options* like so:
```js
Plot.normalizeY({basis: "first", x: "Date", y: "Close", stroke: "Symbol"})
diff --git a/docs/transforms/select.md b/docs/transforms/select.md
index 66bbeff211..a69d8ab7b0 100644
--- a/docs/transforms/select.md
+++ b/docs/transforms/select.md
@@ -69,7 +69,7 @@ Plot.plot({
```
:::
-## select(*selector*, *options*)
+## select(*selector*, *options*) {#select}
```js
Plot.select("first", {x: "Date", y: "Close"}) // selectFirst
@@ -130,7 +130,7 @@ function selectorSample(I) {
}
```
-## selectFirst(*options*)
+## selectFirst(*options*) {#selectFirst}
```js
Plot.selectFirst({x: "Date", y: "Close"})
@@ -138,7 +138,7 @@ Plot.selectFirst({x: "Date", y: "Close"})
Selects the first point of each series according to input order.
-## selectLast(*options*)
+## selectLast(*options*) {#selectLast}
```js
Plot.selectLast({x: "Date", y: "Close"})
@@ -146,7 +146,7 @@ Plot.selectLast({x: "Date", y: "Close"})
Selects the last point of each series according to input order.
-## selectMinX(*options*)
+## selectMinX(*options*) {#selectMinX}
```js
Plot.selectMinX({x: "Date", y: "Close"})
@@ -154,7 +154,7 @@ Plot.selectMinX({x: "Date", y: "Close"})
Selects the leftmost point of each series.
-## selectMinY(*options*)
+## selectMinY(*options*) {#selectMinY}
```js
Plot.selectMinY({x: "Date", y: "Close"})
@@ -162,7 +162,7 @@ Plot.selectMinY({x: "Date", y: "Close"})
Selects the lowest point of each series.
-## selectMaxX(*options*)
+## selectMaxX(*options*) {#selectMaxX}
```js
Plot.selectMaxX({x: "Date", y: "Close"})
@@ -170,7 +170,7 @@ Plot.selectMaxX({x: "Date", y: "Close"})
Selects the rightmost point of each series.
-## selectMaxY(*options*)
+## selectMaxY(*options*) {#selectMaxY}
```js
Plot.selectMaxY({x: "Date", y: "Close"})
diff --git a/docs/transforms/sort.md b/docs/transforms/sort.md
index b56505c1a0..cfcbdbc785 100644
--- a/docs/transforms/sort.md
+++ b/docs/transforms/sort.md
@@ -60,7 +60,7 @@ Plot.plot({
Dots are sorted by descending **r** by default, so you may not need the **sort** option.
:::
-The sort transform can be applied either via the **sort** [mark option](../features/marks.md#mark-options), as above, or as an explicit [sort transform](#sort-order-options). The latter is generally only needed when composing multiple transforms, or to disambiguate the sort transform from imputed ordinal scale domains, *i.e.*, [scale sorting](../features/scales.md#sort-mark-option).
+The sort transform can be applied either via the **sort** [mark option](../features/marks.md#mark-options), as above, or as an explicit [sort transform](#sort). The latter is generally only needed when composing multiple transforms, or to disambiguate the sort transform from imputed ordinal scale domains, *i.e.*, [scale sorting](../features/scales.md#sort-mark-option).
As another example, in the line chart of unemployment rates below, lines for metropolitan areas in Michigan (which saw exceptionally high unemployment following the [financial crisis of 2008](https://en.wikipedia.org/wiki/2007–2008_financial_crisis), in part due to the [auto industry collapse](https://en.wikipedia.org/wiki/2008–2010_automotive_industry_crisis)) are highlighted in red, and the **sort** option is used to draw them on top of other series.
@@ -119,9 +119,9 @@ Plot.plot({
```
:::
-The closely-related [reverse transform](#reverse-options) likewise reverses the mark index, while the [shuffle transform](#shuffle-options) for randomizes the mark index’s order.
+The closely-related [reverse transform](#reverse) likewise reverses the mark index, while the [shuffle transform](#shuffle) for randomizes the mark index’s order.
-## sort(*order*, *options*)
+## sort(*order*, *options*) {#sort}
```js
Plot.sort("body_mass_g", {x: "culmen_length_mm", y: "culmen_depth_mm"})
@@ -138,7 +138,7 @@ In the object case, the **channel** option specifies the name of the channel, wh
In the function case, if the sort function does not take exactly one argument, it is interpreted as a comparator function; otherwise it is interpreted as an accessor function.
-## shuffle(*options*)
+## shuffle(*options*) {#shuffle}
```js
Plot.shuffle({x: "culmen_length_mm", y: "culmen_depth_mm"})
@@ -146,7 +146,7 @@ Plot.shuffle({x: "culmen_length_mm", y: "culmen_depth_mm"})
Shuffles the data randomly. If a **seed** option is specified, a [linear congruential generator](https://d3js.org/d3-random#randomLcg) with the given seed is used to generate random numbers; otherwise, Math.random is used.
-## reverse(*options*)
+## reverse(*options*) {#reverse}
```js
Plot.reverse({x: "culmen_length_mm", y: "culmen_depth_mm"})
diff --git a/docs/transforms/stack.md b/docs/transforms/stack.md
index b23badfaff..2275c52b75 100644
--- a/docs/transforms/stack.md
+++ b/docs/transforms/stack.md
@@ -51,7 +51,7 @@ const likert = Likert([
# Stack transform
-The **stack transform** comes in two orientations: [stackY](#stacky-stack-options) replaces **y** with **y1** and **y2** to form vertical↑ stacks grouped on **x**, while [stackX](#stackx-stack-options) replaces **x** with **x1** and **x2** for horizontal→ stacks grouped on **y**. In effect, stacking transforms a *length* into *lower* and *upper* positions: the upper position of each element equals the lower position of the next element in the stack. Stacking makes it easier to perceive a total while still showing its parts.
+The **stack transform** comes in two orientations: [stackY](#stackY) replaces **y** with **y1** and **y2** to form vertical↑ stacks grouped on **x**, while [stackX](#stackX) replaces **x** with **x1** and **x2** for horizontal→ stacks grouped on **y**. In effect, stacking transforms a *length* into *lower* and *upper* positions: the upper position of each element equals the lower position of the next element in the stack. Stacking makes it easier to perceive a total while still showing its parts.
For example, below is a stacked area chart of [deaths in the Crimean War](https://en.wikipedia.org/wiki/Florence_Nightingale#Crimean_War) — predominantly from disease — using Florence Nightingale’s data.
@@ -391,7 +391,7 @@ In addition to the **y1** and **y2** output channels, stackY computes a **y** ou
If two arguments are passed to the stack transform functions below, the stack-specific options (**offset**, **order**, and **reverse**) are pulled exclusively from the first *options* argument, while any channels (*e.g.*, **x**, **y**, and **z**) are pulled from second *options* argument. Options from the second argument that are not consumed by the stack transform will be passed through. Using two arguments is sometimes necessary is disambiguate the option recipient when chaining transforms.
-## stackY(*stack*, *options*)
+## stackY(*stack*, *options*) {#stackY}
```js
Plot.stackY({x: "year", y: "revenue", z: "format", fill: "group"})
@@ -399,42 +399,42 @@ Plot.stackY({x: "year", y: "revenue", z: "format", fill: "group"})
Creates new channels **y1** and **y2**, obtained by stacking the original **y** channel for data points that share a common **x** (and possibly **z**) value. A new **y** channel is also returned, which lazily computes the middle value of **y1** and **y2**. The input **y** channel defaults to a constant 1, resulting in a count of the data points. The stack options (**offset**, **order**, and **reverse**) may be specified as part of the *options* object, if the only argument, or as a separate *stack* options argument.
-## stackY1(*stack*, *options*)
+## stackY1(*stack*, *options*) {#stackY1}
```js
Plot.stackY1({x: "year", y: "revenue", z: "format", fill: "group"})
```
-Like [stackY](#stacky-stack-options), except that the **y1** channel is returned as the **y** channel. This can be used, for example, to draw a line at the bottom of each stacked area.
+Like [stackY](#stackY), except that the **y1** channel is returned as the **y** channel. This can be used, for example, to draw a line at the bottom of each stacked area.
-## stackY2(*stack*, *options*)
+## stackY2(*stack*, *options*) {#stackY2}
```js
Plot.stackY2({x: "year", y: "revenue", z: "format", fill: "group"})
```
-Like [stackY](#stacky-stack-options), except that the **y2** channel is returned as the **y** channel. This can be used, for example, to draw a line at the top of each stacked area.
+Like [stackY](#stackY), except that the **y2** channel is returned as the **y** channel. This can be used, for example, to draw a line at the top of each stacked area.
-## stackX(*stack*, *options*)
+## stackX(*stack*, *options*) {#stackX}
```js
Plot.stackX({y: "year", x: "revenue", z: "format", fill: "group"})
```
-Like [stackY](#stacky-stack-options), but with *x* as the input value channel, *y* as the stack index, *x1*, *x2* and *x* as the output channels.
+Like [stackY](#stackY), but with *x* as the input value channel, *y* as the stack index, *x1*, *x2* and *x* as the output channels.
-## stackX1(*stack*, *options*)
+## stackX1(*stack*, *options*) {#stackX1}
```js
Plot.stackX1({y: "year", x: "revenue", z: "format", fill: "group"})
```
-Like [stackX](#stackx-stack-options), except that the **x1** channel is returned as the **x** channel. This can be used, for example, to draw a line at the left edge of each stacked area.
+Like [stackX](#stackX), except that the **x1** channel is returned as the **x** channel. This can be used, for example, to draw a line at the left edge of each stacked area.
-## stackX2(*stack*, *options*)
+## stackX2(*stack*, *options*) {#stackX2}
```js
Plot.stackX2({y: "year", x: "revenue", z: "format", fill: "group"})
```
-Like [stackX](#stackx-stack-options), except that the **x2** channel is returned as the **x** channel. This can be used, for example, to draw a line at the right edge of each stacked area.
+Like [stackX](#stackX), except that the **x2** channel is returned as the **x** channel. This can be used, for example, to draw a line at the right edge of each stacked area.
diff --git a/docs/transforms/tree.md b/docs/transforms/tree.md
index 527597fb05..97feccdceb 100644
--- a/docs/transforms/tree.md
+++ b/docs/transforms/tree.md
@@ -25,7 +25,7 @@ function indent() {
# Tree transform
-The **tree transform** is rarely used directly; the two variants, [treeNode](#treenode-options) and [treeLink](#treelink-options), are typically used internally by the composite [tree mark](../marks/tree.md). The tree transform arranges a tabular dataset into a hierarchy according to the given **path** channel, which is typically a slash-separated string; it then executes a tree layout algorithm to compute **x** and **y**; these channels can then be used to construct a node-link diagram.
+The **tree transform** is rarely used directly; the two variants, [treeNode](#treeNode) and [treeLink](#treeLink), are typically used internally by the composite [tree mark](../marks/tree.md). The tree transform arranges a tabular dataset into a hierarchy according to the given **path** channel, which is typically a slash-separated string; it then executes a tree layout algorithm to compute **x** and **y**; these channels can then be used to construct a node-link diagram.
As a contrived example, we can construct the equivalent of the tree mark using a [link](../marks/link.md), [dot](../marks/dot.md), and [text](../marks/text.md), and the corresponding tree transforms.
@@ -71,7 +71,7 @@ The following options control how the node-link diagram is laid out:
* **treeSort** - a node comparator, or null to preserve input order
* **treeSeparation** - a node separation function, or null for uniform separation
-The default **treeLayout** implements the Reingold–Tilford “tidy” algorithm based on Buchheim _et al._’s linear time approach. Use [d3.cluster](https://d3js.org/d3-hierarchy/cluster) instead to align leaf nodes; see also the [cluster mark](../marks/tree.md#cluster-data-options).
+The default **treeLayout** implements the Reingold–Tilford “tidy” algorithm based on Buchheim _et al._’s linear time approach. Use [d3.cluster](https://d3js.org/d3-hierarchy/cluster) instead to align leaf nodes; see also the [cluster mark](../marks/tree.md#cluster).
If **treeAnchor** is *left*, the root of the tree will be aligned with the left side of the frame; if **treeAnchor** is *right*, the root of the tree will be aligned with the right side of the frame; use the **insetLeft** and **insetRight** [scale options](../features/scales.md) if horizontal padding is desired, say to make room for labels.
@@ -79,7 +79,7 @@ If the **treeSort** option is not null, it is typically a function that is passe
If the **treeSeparation** is not null, it is a function that is passed two nodes in the hierarchy and returns the desired (relative) amount of separation; see [d3-hierarchy’s _tree_.separation](https://d3js.org/d3-hierarchy/tree#tree_separation) for more. By default, non-siblings are at least twice as far apart as siblings.
-## treeNode(*options*)
+## treeNode(*options*) {#treeNode}
Populates **x** and **y** with the positions for each node in the tree. The default **frameAnchor** inherits the **treeAnchor**. This transform is often used with the [dot](../marks/dot.md) or [text](../marks/text.md) mark.
@@ -94,7 +94,7 @@ The treeNode transform will derive output columns for any *options* that have on
In addition, if any option value is specified as an object with a **node** method, a derived output column will be generated by invoking the **node** method for each node in the tree.
-## treeLink(*options*)
+## treeLink(*options*) {#treeLink}
Populates **x1**, **y1**, **x2**, and **y2** with the positions for each link in the tree, where **x1** & **y1** represents the position of the parent node and **x2** & **y2** the position of the child node. The default **curve** is *bump-x*, the default **stroke** is #555, the default **strokeWidth** is 1.5, and the default **strokeOpacity** is 0.5. This transform is often used with the [link](../marks/link.md) or [arrow](../marks/arrow.md) mark.
diff --git a/docs/transforms/window.md b/docs/transforms/window.md
index 6b0eefc6c9..060d103aab 100644
--- a/docs/transforms/window.md
+++ b/docs/transforms/window.md
@@ -183,7 +183,7 @@ The following named reducers are supported:
A reducer may also be specified as a function to be passed an index of size **k** and the corresponding input channel array; or if the function only takes one argument, an array of **k** values.
-## window(*k*)
+## window(*k*) {#window}
```js
Plot.map({y: Plot.window(24)}, {x: "Date", y: "Close", stroke: "Symbol"})
@@ -191,18 +191,18 @@ Plot.map({y: Plot.window(24)}, {x: "Date", y: "Close", stroke: "Symbol"})
Returns a window map method for the given window size *k*, suitable for use with Plot.map. For additional options to the window transform, replace the number *k* with an object with properties **k**, **anchor**, **reduce**, or **strict**.
-## windowX(*k*, *options*)
+## windowX(*k*, *options*) {#windowX}
```js
Plot.windowX(24, {y: "Date", x: "Anomaly"})
```
-Like [mapX](./map.md#mapx-map-options), but applies the window map method with the given window size *k*. For additional options to the window transform, replace the number *k* with an object with properties **k**, **anchor**, or **reduce**.
+Like [mapX](./map.md#mapX), but applies the window map method with the given window size *k*. For additional options to the window transform, replace the number *k* with an object with properties **k**, **anchor**, or **reduce**.
-## windowY(*k*, *options*)
+## windowY(*k*, *options*) {#windowY}
```js
Plot.windowY(24, {x: "Date", y: "Anomaly"})
```
-Like [mapY](./map.md#mapy-map-options), but applies the window map method with the given window size *k*. For additional options to the window transform, replace the number *k* with an object with properties **k**, **anchor**, or **reduce**.
+Like [mapY](./map.md#mapY), but applies the window map method with the given window size *k*. For additional options to the window transform, replace the number *k* with an object with properties **k**, **anchor**, or **reduce**.