move crosshair to interactions

Author: mbostock

CHANGELOG.md

@@ -65,7 +65,7 @@ Plot.plot({
 
 The pointer interaction supports both two-dimensional (pointer) and one-dimensional (pointerX and pointerY) pointing modes. Above, one-dimensional pointing is used for a time-series chart to find the closest *x*-value; below, two-dimensional pointing is used for a scatterplot to find the closest point in *x* and *y*.
 
-The pointer interaction also powers the new [crosshair mark](https://observablehq.com/plot/marks/crosshair) which shows the *x* (horizontal↔︎ position) and *y* (vertical↕︎ position) value of the point closest to the pointer on the bottom and left sides of the frame, respectively.
+The pointer interaction also powers the new [crosshair mark](https://observablehq.com/plot/interactions/crosshair) which shows the *x* (horizontal↔︎ position) and *y* (vertical↕︎ position) value of the point closest to the pointer on the bottom and left sides of the frame, respectively.
 
 <img src="./img/crosshair-dot.webp" width="640" alt="A scatterplot of penguins, comparing culmen depth (y) and culmen length (x); a pointer moves around the chart highlighting the x and y values of the closest point.">
 

docs/.vitepress/config.ts

@@ -80,7 +80,6 @@ export default defineConfig({
           {text: "Box", link: "/marks/box"},
           {text: "Cell", link: "/marks/cell"},
           {text: "Contour", link: "/marks/contour"},
-          {text: "Crosshair", link: "/marks/crosshair"},
           {text: "Delaunay", link: "/marks/delaunay"},
           {text: "Density", link: "/marks/density"},
           {text: "Dot", link: "/marks/dot"},
@@ -126,6 +125,7 @@ export default defineConfig({
         text: "Interactions",
         collapsed: true,
         items: [
+          {text: "Crosshair", link: "/interactions/crosshair"},
           {text: "Pointer", link: "/interactions/pointer"}
         ]
       }

docs/features/interactions.md

@@ -37,7 +37,7 @@ Plot.dot(olympians, {
 ```
 :::
 
-The [crosshair mark](../marks/crosshair.md) uses the pointer transform internally to display a [rule](../marks/rule.md) and a [text](../marks/text.md) showing the **x** (horizontal↔︎ position) and **y** (vertical↕︎ position) value of the nearest data.
+The [crosshair mark](../interactions/crosshair.md) uses the pointer transform internally to display a [rule](../marks/rule.md) and a [text](../marks/text.md) showing the **x** (horizontal↔︎ position) and **y** (vertical↕︎ position) value of the nearest data.
 
 :::plot defer
 ```js

docs/interactions/pointer.md

@@ -23,7 +23,7 @@ onMounted(() => {
 
 # Pointer transform
 
-The **pointer transform** filters a mark interactively such that only the point closest to the pointer is rendered. It is typically used to show details on hover, often with a [tip](../marks/tip.md) or [crosshair](../marks/crosshair.md) mark, but it can be paired with any mark.
+The **pointer transform** filters a mark interactively such that only the point closest to the pointer is rendered. It is typically used to show details on hover, often with a [tip](../marks/tip.md) or [crosshair](./crosshair.md) mark, but it can be paired with any mark.
 
 To demonstrate, below the pointer transform filters a filled <span style="border-bottom: solid 2px var(--vp-c-red);">red</span> dot behind a stroked <span style="border-bottom: solid 2px currentColor;">{{ $dark ? "white" : "black"}}</span> dot. As you hover the chart, only the closest red dot to the pointer is rendered. If you remove the pointer transform by toggling the checkbox, all the red dots will be visible.
 

docs/marks/crosshair.md

@@ -10,7 +10,7 @@ import penguins from "../data/penguins.ts";
 
 # Crosshair mark
 
-The **crosshair mark** shows the *x* (horizontal↔︎ position) and *y* (vertical↕︎ position) value of the point closest to the [pointer](../interactions/pointer.md) on the bottom and left sides of the frame, respectively.
+The **crosshair mark** shows the *x* (horizontal↔︎ position) and *y* (vertical↕︎ position) value of the point closest to the [pointer](./pointer.md) on the bottom and left sides of the frame, respectively.
 
 :::plot defer
 ```js
@@ -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](../interactions/pointer.md#pointerx-options) or [pointerY](../interactions/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-options) or [pointerY](./pointer.md#pointery-options) transform as appropriate.
 
 :::plot defer
 ```js
@@ -62,7 +62,7 @@ Plot.plot({
 ```
 :::
 
-The crosshair mark does not currently support any format options; values are displayed with the default format. If you are interested in this feature, please upvote [#1596](https://github.com/observablehq/plot/issues/1596). In the meantime, you can implement a custom crosshair using the [pointer transform](../interactions/pointer.md) and a [text mark](./text.md).
+The crosshair mark does not currently support any format options; values are displayed with the default format. If you are interested in this feature, please upvote [#1596](https://github.com/observablehq/plot/issues/1596). In the meantime, you can implement a custom crosshair using the [pointer transform](./pointer.md) and a [text mark](../marks/text.md).
 
 ## Crosshair options