Merge branch 'main' into fil/document-geo-centroid

Author: Fil

docs/features/facets.md

@@ -274,7 +274,7 @@ The **facet** margin options behave largely the same as the margin [plot options
 
 The **facet** plot option is also an alternative to the **fx** and **fy** mark options. It is useful when multiple marks share the same data; the **x** and **y** facet channels are then shared by all marks that use the facet data. (Other marks will be repeated across facets.) For example, we can visualize the famous [Anscombe’s quartet](https://en.wikipedia.org/wiki/Anscombe's_quartet) as a scatterplot with horizontal facets.
 
-:::plot
+:::plot https://observablehq.com/@observablehq/plot-anscombes-quartet
 ```js
 Plot.plot({
   grid: true,

docs/features/interactions.md

@@ -25,7 +25,7 @@ When looking at a scatterplot, the reader may wonder, *what abstract values does
 
 The [pointer transform](../interactions/pointer.md) can provide an answer: it dynamically [filters](../transforms/filter.md) a mark such that only the data closest to the pointer (such as the mouse) is rendered. The pointer transform is often paired with the [tip mark](../marks/tip.md) for interactive tooltips, revealing exact values as the pointer moves over the plot. The tip can show additional fields not otherwise visible, such as the *name* and *sport* of Olympic athletes below.
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/scatterplot-with-interactive-tips
 ```js
 Plot.dot(olympians, {
   x: "weight",
@@ -39,7 +39,7 @@ Plot.dot(olympians, {
 
 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
+:::plot defer https://observablehq.com/@observablehq/plot-crosshair
 ```js
 Plot.plot({
   marks: [
@@ -70,6 +70,6 @@ With the exception of render transforms (see the [pointer transform](https://git
 
 That said, you can simply throw away an old plot and replace it with a new one! This allows plotting of dynamic data: data which can change in real-time as it streams in, or because it is derived in response to external inputs such as range sliders and search boxes.
 
-On Observable, you can use [viewof](https://observablehq.com/@observablehq/views) in conjunction with [Observable Inputs](https://observablehq.com/@observablehq/inputs) for interactivity. If your cell references another cell, it will automatically re-run whenever the upstream cell’s value changes. For example, try dragging the slider in this [hexbin example](https://observablehq.com/@observablehq/plot-hexbin-binwidth?intent=fork). In React, use [useEffect](https://react.dev/reference/react/useEffect) and [useRef](https://react.dev/reference/react/useRef) to re-render the plot when data changes. In Vue, use [ref](https://vuejs.org/api/reactivity-core.html#ref). For more, see our [getting started guide](../getting-started.md).
+On Observable, you can use [viewof](https://observablehq.com/@observablehq/views) in conjunction with [Observable Inputs](https://observablehq.com/@observablehq/inputs) (or other plots!) for interactivity. If your cell references another cell, it will automatically re-run whenever the upstream cell’s value changes. For example, try dragging the slider in this [hexbin example](https://observablehq.com/@observablehq/plot-hexbin-binwidth?intent=fork). In React, use [useEffect](https://react.dev/reference/react/useEffect) and [useRef](https://react.dev/reference/react/useRef) to re-render the plot when data changes. In Vue, use [ref](https://vuejs.org/api/reactivity-core.html#ref). For more, see our [getting started guide](../getting-started.md).
 
 You can also manipulate the SVG that Plot creates, if you are comfortable using lower-level APIs; see examples by [Mike Freeman](https://observablehq.com/@mkfreeman/plot-animation) and [Philippe Rivière](https://observablehq.com/@fil/plot-animate-a-bar-chart).

docs/features/legends.md

@@ -41,7 +41,7 @@ Plot.plot({
 
 The legend above is a *swatches* legend because the *color* scale is *ordinal* (with a *categorical* scheme). When the *color* scale is continuous, a *ramp* legend with a smooth gradient is generated instead. The plot below of global average surface temperature ([GISTEMP](https://data.giss.nasa.gov/gistemp/)) uses a *diverging* *color* scale to indicate the deviation from the 1951–1980 average in degrees Celsius.
 
-:::plot defer https://observablehq.com/@observablehq/plot-colored-scatterplot
+:::plot defer https://observablehq.com/@observablehq/plot-diverging-color-scatterplot
 ```js
 Plot.plot({
   color: {

docs/features/scales.md

@@ -435,7 +435,7 @@ Plot.plot({
 
 Below we again show observed global surface temperatures. The reversed *BuRd* color scheme is used since <span :style="{borderBottom: `solid 2px ${d3.interpolateRdBu(0.9)}`}">blue</span> and <span :style="{borderBottom: `solid 2px ${d3.interpolateRdBu(0.1)}`}">red</span> are semantically associated with cold and hot, respectively.
 
-:::plot https://observablehq.com/@observablehq/plot-colored-scatterplot
+:::plot https://observablehq.com/@observablehq/plot-diverging-color-scatterplot
 ```js
 Plot.plot({
   grid: true,

docs/interactions/crosshair.md

@@ -12,7 +12,7 @@ import penguins from "../data/penguins.ts";
 
 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
+:::plot defer https://observablehq.com/@observablehq/plot-crosshair
 ```js
 Plot.plot({
   marks: [
@@ -25,7 +25,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.
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-crosshairx
 ```js
 Plot.plot({
   marks: [
@@ -38,7 +38,7 @@ Plot.plot({
 
 If either **x** or **y** is not specified, the crosshair is one-dimensional.
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-one-dimensional-crosshair
 ```js
 Plot.plot({
   marks: [
@@ -51,7 +51,7 @@ Plot.plot({
 
 The **color** option sets the fill color of the text and the stroke color of the rule. This option can be specified as a channel to reinforce a color encoding.
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-color-crosshair
 ```js
 Plot.plot({
   marks: [
@@ -91,3 +91,19 @@ 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*)
+
+```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.
+
+## crosshairY(*data*, *options*)
+
+```js
+Plot.crosshairY(aapl, {x: "Date", y: "Close"})
+```
+
+Like crosshair, but using [pointerY](./pointer.md#pointery-options) when *y* is the dominant dimension.

docs/interactions/pointer.md

@@ -34,7 +34,7 @@ To demonstrate, below the pointer transform filters a filled <span style="border
   </label>
 </p>
 
-:::plot defer hidden
+:::plot defer hidden https://observablehq.com/@observablehq/plot-pointer-transform
 ```js
 Plot.plot({
   marks: [
@@ -74,7 +74,7 @@ The pointer transform is similar to the [filter](../transforms/filter.md) and [s
 
 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.
 
-Try the different modes on the line chart below to get a feel for how their behavior.
+Try the different modes on the line chart below to get a feel for their behavior.
 
 <p>
   <span class="label-input">
@@ -85,15 +85,15 @@ Try the different modes on the line chart below to get a feel for how their beha
   </span>
 </p>
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-pointer-modes-x-y-and-xy
 ```js-vue
 Plot.lineY(aapl, {x: "Date", y: "Close", tip: "{{linetip}}"}).plot()
 ```
 :::
 
 “One-dimensional” is a slight misnomer: the pointerX and pointerY transforms consider distance in both dimensions, but the distance along the non-dominant dimension is divided by 100. Below, the pointerX transform is applied to a multi-series line chart; the closest point in *x* is chosen, while *y* is used to “break ties” such that you can focus different series by moving the mouse vertically.
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-multi-series-line-chart-interactive-tips
 ```js
 Plot.plot({
   marks: [
@@ -114,7 +114,7 @@ One-dimensional pointing makes even small bars or rects easily hoverable. If you
   </span>
 </p>
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-one-dimensional-pointing
 ```js-vue
 Plot.plot({
   x: {label: "Daily volume (log₁₀)"},
@@ -134,7 +134,7 @@ The pointer transform will prefer the midpoint of the **x1** and **x2** channels
 
 The **px** and **py** channels may be used to specify pointing target positions independent of the displayed mark. Below, text in the top-left corner shows the focused date and closing price. The focused point is also highlighted with a red dot and rule.
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-pointer-target-position
 ```js
 Plot.plot({
   height: 160,
@@ -153,6 +153,8 @@ As the above chart shows, a plot can have multiple pointer transforms. Each poin
 
 The pointer transform supports “click-to-stick”: clicking on the chart locks the currently-focused point until you click again. By locking the pointer, you can select text from the tip for copy and paste. If a plot has multiple pointer transforms, clicking will lock all pointer transforms.
 
+The pointer transform emits an [*input* event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) whenever the focused points changes, and sets the value of the plot element to the focused data. This allows you to use a plot as an [Observable view](https://observablehq.com/@observablehq/views) (viewof), or to register an *input* event listener to react to pointing.
+
 ## Pointer options
 
 The following options control the pointer transform:

docs/marks/axis.md

@@ -207,27 +207,27 @@ Plot.plot({
 
 The color of an axis can be controlled with the **color**, **stroke**, and **fill** options, which affect the axis’ component marks differently. The **stroke** option affects the tick vector; the **fill** option affects the label texts. The **color** option is shorthand for setting both **fill** and **stroke**. While these options are typically set to constant colors (such as _red_ or the default _currentColor_), they can be specified as channels to assign colors dynamically based on the associated tick value.
 
-:::plot https://observablehq.com/@observablehq/plot-colored-axes
+:::plot https://observablehq.com/@observablehq/plot-axes-with-color
 ```js
 Plot.axisX(d3.ticks(0, 1, 10), {color: "red"}).plot() // text fill and tick stroke
 ```
 :::
 
-:::plot https://observablehq.com/@observablehq/plot-colored-axes
+:::plot https://observablehq.com/@observablehq/plot-axes-with-color
 ```js
 Plot.axisX(d3.ticks(0, 1, 10), {stroke: Plot.identity, strokeWidth: 3, tickSize: 10}).plot() // tick stroke
 ```
 :::
 
-:::plot https://observablehq.com/@observablehq/plot-colored-axes
+:::plot https://observablehq.com/@observablehq/plot-axes-with-color
 ```js
 Plot.axisX(d3.ticks(0, 1, 10), {fill: "red"}).plot() // text fill
 ```
 :::
 
 To draw an outline around the tick labels, say to improve legibility when drawing an axes atop other marks, use the **textStroke** (default _none_), **textStrokeWidth** (default 3), and **textStrokeOpacity**  (default 1) options.
 
-:::plot https://observablehq.com/@observablehq/plot-colored-axes
+:::plot https://observablehq.com/@observablehq/plot-axes-with-color
 ```js
 Plot.plot({
   height: 40,

docs/marks/bar.md

@@ -49,7 +49,7 @@ There is typically one ordinal value associated with each bar, such as a name (o
 
 Above, since **y** was specified instead of **y1** and **y2**, the bar spans from zero to the given *y* value: if you only specify a single quantitative value, barY applies an implicit [stackY transform](../transforms/stack.md) and likewise barX implicitly applies stackX. The stacked horizontal bar chart below draws one bar (of unit width in **x**) per penguin, colored and sorted by the penguin’s body mass, and grouped by species along **y**.
 
-:::plot defer https://observablehq.com/@observablehq/plot-colored-stacked-bar-chart
+:::plot defer https://observablehq.com/@observablehq/plot-stacked-unit-chart
 ```js
 Plot.plot({
   marginLeft: 60,

docs/marks/cell.md

@@ -116,7 +116,7 @@ Here the *x*-scale domain contains the *id* of every episode. An ordinal scale b
 
 One-dimensional cells can be a compact alternative to a bar chart, where the *fill* color of the cell replaces the length of the bar. However, position is a more salient encoding and should be preferred to color if space is available.
 
-:::plot https://observablehq.com/@observablehq/plot-colored-cells
+:::plot https://observablehq.com/@observablehq/plot-color-cells
 ```js
 Plot.cell(alphabet, {x: "letter", fill: "frequency"}).plot()
 ```

docs/marks/dot.md

@@ -69,7 +69,7 @@ Plot.plot({
 
 Dots support **stroke** and **fill** channels in addition to position along **x** and **y**. Below, color is used as a redundant encoding to emphasize the rising trend in average global surface temperatures. A *diverging* color scale encodes values below zero blue and above zero red.
 
-:::plot defer https://observablehq.com/@observablehq/plot-colored-scatterplot
+:::plot defer https://observablehq.com/@observablehq/plot-diverging-color-scatterplot
 ```js
 Plot.plot({
   y: {