better anchors (#1771)

Author: mbostock

docs/api.md

@@ -10,15 +10,15 @@ import {data} from "./data/api.data";
 
 <ul :class="$style.oneline">
   <li v-for="({name, href, comment}) in data.methods">
-    <span><a :href="href">{{ name }}</a> - {{ comment }}</span>
+    <span><a :href="`${href}#${name}`">{{ name }}</a> - {{ comment }}</span>
   </li>
 </ul>
 
 ## Options
 
 <ul>
   <li v-for="[name, contexts] in data.options">
-    <b>{{ name }}</b> - <span v-for="({name, href}, index) in contexts"><a :href="href">{{ name }}</a><span v-if="index < contexts.length - 1">, </span></span>
+    <b>{{ name }}</b> - <span v-for="({name: context, href}, index) in contexts"><a :href="href">{{ context }}</a><span v-if="index < contexts.length - 1">, </span></span>
   </li>
 </ul>
 

docs/features/formats.md

@@ -9,15 +9,15 @@ 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"
 ```
 
 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

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.
 

docs/features/marks.md

@@ -48,7 +48,7 @@ onMounted(() => {
 
 </script>
 
-# 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(

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,29 +285,29 @@ 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
 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.

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.)
 

docs/features/scales.md

@@ -1007,17 +1007,17 @@ 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*:
 
 ```js
 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:
 

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,15 +236,15 @@ 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})
 ```
 
 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})