more example links (#1644)

Co-authored-by: Mike Bostock <[email protected]>

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/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-colored-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/tip.md

@@ -26,7 +26,7 @@ onMounted(() => {
 
 The **tip mark** displays text, or several name-value pairs, in a floating box anchored to a given position in **x** and **y**. The tip mark is often paired with the [pointer transform](../interactions/pointer.md) to reveal details on demand when hovering over a chart, as in this line chart of Apple stock price:
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-line-chart-interactive-tip
 ```js
 Plot.lineY(aapl, {x: "Date", y: "Close", tip: true}).plot({y: {grid: true}})
 ```
@@ -46,7 +46,7 @@ Plot.plot({
 
 The tip mark can also be used for static annotations, say to draw attention to elements of interest or to add context. The tip text is supplied via the **title** channel. If the tip mark‘s data is an array of strings, the **title** channel defaults to [identity](../features/transforms.md#identity).
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-static-annotations
 ```js
 Plot.plot({
   y: {grid: true},
@@ -69,7 +69,7 @@ When using the **title** channel, the tip mark wraps text to 20 ems by default,
 
 The **title** channel can be used with interactive tips, too. If you have a few moments, hover the chart below to read about various athletes who competed at Rio 2016.
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-tips-longer-text
 ```js
 Plot.plot({
   grid: true,
@@ -95,7 +95,7 @@ Plot.plot({
 
 If no **title** channel is supplied, the tip mark displays all channel values. You can supply additional name-value pairs by registering extra channels using the **channels** mark option. In the scatterplot of Olympic athletes below, you can hover to see the *name* and *sport* of each athlete. This is helpful for noticing patterns—tall basketball players, giant weightlifters and judoka, diminutive gymnasts—and for seeing individuals.
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-tips-additional-channels
 ```js
 Plot.dot(olympians, {
   x: "weight",
@@ -115,15 +115,15 @@ If a channel is bound to the *color* or *opacity* scale, the tip mark displays a
 
 The tip mark recognizes that **x1** & **x2** and **y1** & **y2** are paired channels. Below, observe that the *weight* shown in the tip is a range such as 64–66 kg; however, the *frequency* is shown as the difference between the **y1** and **y2** channels. The latter is achieved by the stack transform setting a channel hint to indicate that **y1** and **y2** represent a length.
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-tips-paired-channels
 ```js
 Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight", fill: "sex", tip: true})).plot()
 ```
 :::
 
 This even works when stacking negative values, say to mirror the histogram instead of stacking it. (The tip displays negative frequency, but this is consistent with the *y* axis.)
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-tips-paired-channels
 ```js
 Plot.rectY(olympians, Plot.binX({y: "sum"}, {x: "weight", y: (d) => d.sex === "male" ? 1 : -1, fill: "sex", tip: true})).plot({y: {label: "Frequency"}})
 ```
@@ -156,7 +156,7 @@ If you don’t specify an **anchor**, the tip mark will choose one automatically
 
 The tip mark is compatible with transforms that derive **x** and **y** dynamically from data, such as the [centroid transform](../transforms/centroid.md) which computes polygon centroids. Below, a map of the United States shows state names. We reduce the size of the tips by setting the **textPadding** option to 3 pixels instead of the default 8.
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-maps-tips
 ```js
 Plot.plot({
   projection: "albers-usa",