version badge (observablehq#1793)

* version badge

* fix anchor parsing

Author: mbostock

docs/.vitepress/theme/VersionBadge.vue

@@ -0,0 +1,12 @@
+<script setup>
+
+const {version} = defineProps(["version"]);
+
+</script>
+<template>
+  <Badge type="tip">
+    <a :href="`https://github.com/observablehq/plot/releases/tag/v${version}`" :title="`added in v${version}`" target="_blank" rel="external" style="color: inherit;">
+      ^{{ version }}
+    </a>
+  </Badge>
+</template>

docs/.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import {useData} from "vitepress";
 import {watch} from "vue";
 import PlotRender from "../../components/PlotRender.js";
 import CustomLayout from "./CustomLayout.vue";
+import VersionBadge from "./VersionBadge.vue";
 import "./custom.css";
 
 export default {
@@ -11,6 +12,7 @@ export default {
   enhanceApp({app, router}) {
     Object.defineProperty(app.config.globalProperties, "$dark", {get: () => useData().isDark.value});
     app.component("PlotRender", PlotRender);
+    app.component("VersionBadge", VersionBadge);
     enableAnalytics(router);
   }
 };

docs/components/links.js

@@ -2,13 +2,14 @@ import {readdir, readFile, stat} from "fs/promises";
 
 // Anchors can be derived from headers, or explicitly written as {#names}.
 export function getAnchors(text) {
+  text = text.replace(/<(?:Version)?Badge[^/]*\/>/g, ""); // ignore badges
   const anchors = [];
   for (const [, header] of text.matchAll(/^#+ ([*\w][*().,\w\d -]+)\n/gm)) {
     anchors.push(
       header
-        .replaceAll(/[^\w\d\s]+/g, " ")
+        .replace(/[^\w\d\s]+/g, " ")
         .trim()
-        .replaceAll(/ +/g, "-")
+        .replace(/ +/g, "-")
         .toLowerCase()
     );
   }

docs/features/curves.md

@@ -79,7 +79,7 @@ The following named curve methods are supported:
 * *step* - a piecewise constant function where *y* changes at the midpoint of *x*
 * *step-after* - a piecewise constant function where *y* changes after *x*
 * *step-before* - a piecewise constant function where *x* changes after *y*
-* *auto* - like *linear*, but use the (possibly spherical) [projection](./projections.md), if any
+* *auto* - like *linear*, but use the (possibly spherical) [projection](./projections.md), if any <VersionBadge version="0.6.1" />
 
 If **curve** is a function, it will be invoked with a given *context* in the same fashion as a [D3 curve factory](https://d3js.org/d3-shape/curve#custom-curves). The *auto* curve is only available for the [line mark](../marks/line.md) and [link mark](../marks/link.md) and is typically used in conjunction with a spherical [projection](./projections.md) to interpolate along [geodesics](https://en.wikipedia.org/wiki/Geodesic).
 

docs/features/facets.md

@@ -232,7 +232,7 @@ Plot.plot({
 
 ## Mark facet options
 
-Facets can be defined for each mark via the **fx** or **fy** channels. The **fx** and **fy** channels are computed prior to the [mark’s transform](./transforms.md), if any (*i.e.*, facet channels are not transformed). Alternatively, the [**facet** plot option](#plot-facet-options) allows top-level faceting based on data.
+Facets can be defined for each mark via the **fx** or **fy** channels. <VersionBadge version="0.6.1" /> The **fx** and **fy** channels are computed prior to the [mark’s transform](./transforms.md), if any (*i.e.*, facet channels are not transformed). Alternatively, the [**facet** plot option](#plot-facet-options) allows top-level faceting based on data.
 
 Faceting can be explicitly enabled or disabled on a mark with the **facet** option, which accepts the following values:
 
@@ -245,7 +245,7 @@ Faceting can be explicitly enabled or disabled on a mark with the **facet** opti
 When mark-level faceting is used, the default *auto* setting is equivalent to *include*: the mark will be faceted if either the **fx** or **fy** channel option (or both) is specified. The null or false option will disable faceting, while *exclude* draws the subset of the mark’s data *not* in the current facet. When a mark uses *super* faceting, it is not allowed to use position scales (*x*, *y*, *fx*, or *fy*); *super* faceting is intended for decorations, such as labels and legends.
 
 
-The **facetAnchor** option controls the placement of the mark with respect to the facets. Based on the value, the mark will be displayed on:
+The **facetAnchor** option <VersionBadge version="0.6.3" /> controls the placement of the mark with respect to the facets. Based on the value, the mark will be displayed on:
 
 * null - non-empty facets
 * *top*, *right*, *bottom*, or *left* - the given side

docs/features/legends.md

@@ -89,7 +89,7 @@ Categorical and ordinal color legends are rendered as swatches, unless the **leg
 * **columns** - the number of swatches per row
 * **marginLeft** - the legend’s left margin
 * **className** - a class name, that defaults to a randomly generated string scoping the styles
-* **opacity** - the swatch fill opacity
+* **opacity** - the swatch fill opacity <VersionBadge version="0.6.5" />
 * **width** - the legend’s width (in pixels)
 
 Symbol legends are rendered as swatches and support the options above in addition to the following options:

docs/features/marks.md

@@ -476,7 +476,7 @@ All marks support the following style options:
 * **strokeDashoffset** - the [stroke dash offset](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset) (typically in pixels)
 * **opacity** - object opacity (a number between 0 and 1)
 * **mixBlendMode** - the [blend mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) (*e.g.*, *multiply*)
-* **imageFilter** - a CSS [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) (*e.g.*, *blur(5px)*)
+* **imageFilter** - a CSS [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) (*e.g.*, *blur(5px)*) <VersionBadge version="0.6.7" />
 * **shapeRendering** - the [shape-rendering mode](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering) (*e.g.*, *crispEdges*)
 * **paintOrder** - the [paint order](https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order) (*e.g.*, *stroke*)
 * **dx** - horizontal offset (in pixels; defaults to 0)
@@ -486,7 +486,7 @@ All marks support the following style options:
 * **ariaHidden** - if true, hide this content from the accessibility tree
 * **pointerEvents** - the [pointer events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) (*e.g.*, *none*)
 * **clip** - whether and how to clip the mark
-* **tip** - whether to generate an implicit [pointer](../interactions/pointer.md) [tip](../marks/tip.md)
+* **tip** - whether to generate an implicit [pointer](../interactions/pointer.md) [tip](../marks/tip.md) <VersionBadge version="0.6.7" />
 
 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).
 

docs/features/plots.md

@@ -218,7 +218,7 @@ The default **width** is 640. On Observable, the width can be set to the [standa
 Plot does not adjust margins automatically to make room for long tick labels. If your *y* axis labels are too long, you can increase the **marginLeft** to make more room. Also consider using a different **tickFormat** for short labels (*e.g.*, `s` for SI prefix notation), or a scale **transform** (say to convert units to millions or billions).
 :::
 
-The **aspectRatio** option<a id="aspectratio" class="header-anchor" href="#aspectratio" aria-label="Permalink to &quot;aspectRatio&quot;"></a>, if not null, computes a default **height** such that a variation of one unit in the *x* dimension is represented by the corresponding number of pixels as a variation in the *y* dimension of one unit.
+The **aspectRatio** option<a id="aspectRatio" class="header-anchor" href="#aspectRatio" aria-label="Permalink to &quot;aspectRatio&quot;"></a> <VersionBadge version="0.6.4" />, if not null, computes a default **height** such that a variation of one unit in the *x* dimension is represented by the corresponding number of pixels as a variation in the *y* dimension of one unit.
 
 <p>
   <label class="label-input">

docs/features/projections.md

@@ -28,7 +28,7 @@ onMounted(() => {
 
 </script>
 
-# Projections
+# Projections <VersionBadge version="0.6.1" />
 
 A **projection** maps abstract coordinates in *x* and *y* to pixel positions on screen. Most often, abstract coordinates are spherical (degrees longitude and latitude), as when rendering a geographic map. For example, below we show earthquakes in the last seven days with a magnitude of 2.5 or higher as reported by the [USGS](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php). Use the slider to adjust the *orthographic* projection’s center of longitude.
 

docs/features/scales.md

@@ -703,7 +703,7 @@ The default range depends on the scale: for position scales (*x*, *y*, *fx*, and
 
 The behavior of the **unknown** scale option depends on the scale type. For quantitative and temporal scales, the unknown value is used whenever the input value is undefined, null, or NaN. For ordinal or categorical scales, the unknown value is returned for any input value outside the domain. For band or point scales, the unknown option has no effect; it is effectively always equal to undefined. If the unknown option is set to undefined (the default), or null or NaN, then the affected input values will be considered undefined and filtered from the output.
 
-For data at regular intervals, such as integer values or daily samples, the [**interval** option](#scale-transforms) can be used to enforce uniformity. The specified *interval* — such as d3.utcMonth — must expose an *interval*.floor(*value*), *interval*.offset(*value*), and *interval*.range(*start*, *stop*) functions. The option can also be specified as a number, in which case it will be promoted to a numeric interval with the given step. The option can alternatively be specified as a string (*second*, *minute*, *hour*, *day*, *week*, *month*, *quarter*, *half*, *year*, *monday*, *tuesday*, *wednesday*, *thursday*, *friday*, *saturday*, *sunday*) naming the corresponding time interval, or a skip interval consisting of a number followed by the interval name (possibly pluralized), such as *3 months* or *10 years*. This option sets the default *scale*.transform to the given interval’s *interval*.floor function. In addition, the default *scale*.domain is an array of uniformly-spaced values spanning the extent of the values associated with the scale.
+For data at regular intervals, such as integer values or daily samples, the [**interval** option](#scale-transforms) can be used to enforce uniformity. The specified *interval* — such as d3.utcMonth — must expose an *interval*.floor(*value*), *interval*.offset(*value*), and *interval*.range(*start*, *stop*) functions. The option can also be specified as a number, in which case it will be promoted to a numeric interval with the given step. The option can alternatively be specified as a string (*second*, *minute*, *hour*, *day*, *week*, *month*, *quarter*, *half*, *year*, *monday*, *tuesday*, *wednesday*, *thursday*, *friday*, *saturday*, *sunday*) <VersionBadge version="0.6.2" /> naming the corresponding time interval, or a skip interval consisting of a number followed by the interval name (possibly pluralized), such as *3 months* or *10 years*. This option sets the default *scale*.transform to the given interval’s *interval*.floor function. In addition, the default *scale*.domain is an array of uniformly-spaced values spanning the extent of the values associated with the scale.
 
 Quantitative scales can be further customized with additional options:
 
@@ -943,7 +943,7 @@ Plot implicitly generates an [axis mark](../marks/axis.md) for position scales i
 * **fontVariant** - the font-variant attribute for ticks; defaults to *tabular-nums* if quantitative
 * **label** - a string to label the axis
 * **labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*
-* **labelArrow** - the label arrow: *auto* (default), *up*, *right*, *down*, *left*, *none*, or true
+* **labelArrow** - the label arrow: *auto* (default), *up*, *right*, *down*, *left*, *none*, or true <VersionBadge version="0.6.7" />
 * **labelOffset** - the label position offset (in pixels; default depends on margins and orientation)
 * **ariaLabel** - a short label representing the axis in the accessibility tree
 * **ariaDescription** - a textual description for the axis

docs/features/transforms.md

@@ -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 <VersionBadge version="0.6.2" /> {#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 <VersionBadge version="0.6.6" /> {#indexOf}
 
 ```js
 Plot.lineY(numbers, {x: Plot.indexOf, y: Plot.identity})

docs/interactions/crosshair.md

@@ -8,7 +8,7 @@ import penguins from "../data/penguins.ts";
 
 </script>
 
-# Crosshair mark
+# Crosshair mark <VersionBadge version="0.6.7" />
 
 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.
 

docs/interactions/pointer.md

@@ -21,7 +21,7 @@ onMounted(() => {
 
 </script>
 
-# Pointer transform
+# Pointer transform <VersionBadge version="0.6.7" />
 
 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.
 

docs/marks/auto.md

@@ -15,7 +15,7 @@ onMounted(() => {
 
 </script>
 
-# Auto mark
+# Auto mark <VersionBadge version="0.6.3" />
 
 The magic ✨ **auto mark** automatically selects a mark type that best represents the given dimensions of the data according to some simple heuristics. The auto mark — which powers [Observable’s chart cell](https://observablehq.com/@observablehq/chart-cell) — is intended to support fast exploratory analysis where the goal is to get a useful plot as quickly as possible. For example, two quantitative dimensions make a scatterplot:
 
@@ -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}
+## autoSpec(*data*, *options*) <VersionBadge version="0.6.4" /> {#autoSpec}
 
 ```js
 Plot.autoSpec(olympians, {x: "weight", y: "height", color: "count"})

docs/marks/axis.md

@@ -21,7 +21,7 @@ const responses = [
 
 </script>
 
-# Axis mark
+# Axis mark <VersionBadge version="0.6.3" />
 
 The **axis mark** conveys the meaning of a position [scale](../features/scales.md): _x_ or _y_, and _fx_ or _fy_ when [faceting](../features/facets.md). Plot automatically adds default axis marks as needed, but you can customize the appearance of axes either through scale options or by explicitly declaring an axis mark.
 
@@ -143,7 +143,7 @@ Plot.plot({
 ```
 :::
 
-Time axes default to a consistent multi-line tick format, [à la Datawrapper](https://blog.datawrapper.de/new-axis-ticks/), for example showing the first month of each quarter, and the year:
+Time axes default to a consistent multi-line tick format <VersionBadge version="0.6.9" />, [à la Datawrapper](https://blog.datawrapper.de/new-axis-ticks/), for example showing the first month of each quarter, and the year:
 
 :::plot https://observablehq.com/@observablehq/plot-datawrapper-style-date-axis
 ```js
@@ -345,7 +345,7 @@ In addition to the [standard mark options](../features/marks.md), the axis mark
 * **fontVariant** - the ticks’ font-variant; defaults to *tabular-nums* for quantitative axes
 * **label** - a string to label the axis; defaults to the scale’s label, perhaps with an arrow
 * **labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*
-* **labelArrow** - the label arrow: *auto* (default), *up*, *right*, *down*, *left*, *none*, or true
+* **labelArrow** - the label arrow: *auto* (default), *up*, *right*, *down*, *left*, *none*, or true <VersionBadge version="0.6.7" />
 * **labelOffset** - the label position offset (in pixels; default depends on margins and orientation)
 * **color** - the color of the ticks and labels (defaults to *currentColor*)
 * **textStroke** - the color of the stroke around tick labels (defaults to *none*)

docs/marks/bollinger.md

@@ -10,7 +10,7 @@ const k = ref(2);
 
 </script>
 
-# Bollinger mark
+# Bollinger mark <Badge type="warning" text="prerelease" />
 
 The **bollinger mark** is a [composite mark](../features/marks.md#marks) consisting of a [line](./line.md) representing a moving average and an [area](./area.md) representing volatility as a band; the band thickness is proportional to the deviation of nearby values. The bollinger mark is often used to analyze the price of financial instruments such as stocks.
 

docs/marks/contour.md

@@ -23,7 +23,7 @@ function mandelbrot(x, y) {
 
 </script>
 
-# Contour mark
+# Contour mark <VersionBadge version="0.6.2" />
 
 :::tip
 To produce a heatmap instead of contours, see the [raster mark](./raster.md). For contours of estimated point density, see the [density mark](./density.md).

docs/marks/frame.md

@@ -93,7 +93,7 @@ Plot.plot({
 Or: `Plot.rect({length: 1}, {fy: ["Gentoo"], stroke: "currentColor"})`.
 :::
 
-The **anchor** option, if specified to a value of *left*, *right*, *top* or *bottom*, draws only that side of the frame. In that case, the **fill** and **rx**, **ry** options are ignored.
+The **anchor** option <VersionBadge version="0.6.3" />, if specified to a value of *left*, *right*, *top* or *bottom*, draws only that side of the frame. In that case, the **fill** and **rx**, **ry** options are ignored.
 
 :::plot
 ```js

docs/marks/geo.md

@@ -31,7 +31,7 @@ onMounted(() => {
 
 </script>
 
-# Geo mark
+# Geo mark <VersionBadge version="0.6.1" />
 
 The **geo mark** draws geographic features — polygons, lines, points, and other geometry — often as thematic maps. It works with Plot’s [projection system](../features/projections.md). For example, the [choropleth map](https://en.wikipedia.org/wiki/Choropleth_map) below shows unemployment by county in the United States.
 
@@ -184,15 +184,15 @@ 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}
+## sphere(*options*) <VersionBadge version="0.6.1" /> {#sphere}
 
 ```js
 Plot.sphere()
 ```
 
 Returns a new geo mark with a *Sphere* geometry object and the given *options*.
 
-## graticule(*options*) {#graticule}
+## graticule(*options*) <VersionBadge version="0.6.1" /> {#graticule}
 
 ```js
 Plot.graticule()

docs/marks/grid.md

@@ -9,7 +9,7 @@ const atop = ref(true);
 
 </script>
 
-# Grid mark
+# Grid mark <VersionBadge version="0.6.3" />
 
 The **grid mark** is a specially-configured [rule](./rule.md) for drawing an axis-aligned grid. Like the [axis mark](./axis.md), a grid mark is automatically generated by Plot when you use the **grid** scale option. But you can also declare a grid mark explicitly, for example to draw grid lines atop rather than below bars.