Merge branch 'main' into fil/clip-path-perf

Author: Fil

.github/workflows/test.yml

@@ -7,7 +7,7 @@ on:
     branches: [main]
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -16,11 +16,12 @@ jobs:
           node-version: 16
           cache: 'yarn'
       - run: yarn --frozen-lockfile
+      - run: yarn test:mocha
+      - run: yarn test:tsc
       - run: |
           echo ::add-matcher::.github/eslint.json
           yarn run eslint src test --format=compact
-      - run: yarn run prettier --check src test
-      - run: yarn test:mocha
+      - run: yarn test:prettier
       - run: yarn prepublishOnly
       - run: yarn docs:build
       - uses: actions/upload-artifact@v3

CHANGELOG.md

@@ -2,6 +2,62 @@
 
 Year: **Current (2023)** · [2022](./CHANGELOG-2022.md) · [2021](./CHANGELOG-2021.md)
 
+## 0.6.11
+
+[Released September 20, 2023.](https://github.com/observablehq/plot/releases/tag/v0.6.11)
+
+The **tip** mark option can now pass options to the derived [tip mark](https://observablehq.com/plot/marks/tip); the options object can also specify the **pointer** option to control the derived tip’s pointer mode (_x_, _y_, or _xy_). The new **format** tip mark option enables greater control over order and formatting of channels.
+
+<img src="./img/tip-custom.png" width="674" alt="A tip with a custom order and formatting of the channel values.">
+
+```js
+Plot.dot(olympians, {
+  x: "weight",
+  y: "height",
+  stroke: "sex",
+  channels: {
+    name: "name",
+    nationality: "nationality",
+    sport: "sport"
+  },
+  tip: {
+    format: {
+      name: true, // show name first
+      y: (d) => `${d}m`, // units in meters
+      x: (d) => `${d}kg`, // units in kilograms
+      stroke: false // suppress stroke channel
+    }
+  }
+}).plot()
+```
+
+Axes for ordinal scales now generalize the scale’s temporal or quantitative **interval** if any, resulting in more readable ticks. For instance, the bar chart below of monthly values now sports multi-line tick labels.
+
+<img src="./img/temporal-ordinal.png" width="672" alt="A temporal bar chart with a multi-line axis.">
+
+```js
+Plot.plot({
+  x: {interval: "month"},
+  marks: [
+    Plot.barY(aapl, Plot.groupX({y: "median"}, {x: "Date", y: "Close"}))
+  ]
+})
+```
+
+Plot now recognizes CSS Color Module [Level 4](https://www.w3.org/TR/css-color-4/) and [Level 5](https://www.w3.org/TR/css-color-5/) syntax as literal colors, making it easier to use modern color syntax such as [oklab()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab), [color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix), and alternative color spaces such as [display-p3](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color).
+
+A channel value can now be given a label by specifying it as a {value, label} object; this may affect the label used in axes, legends, and tips.
+
+This release also includes numerous bug fixes:
+- exposed ordinal domains are now correctly deduplicated;
+- the default symbol set is now inferred correctly when **fill** is *currentColor*;
+- the **fontVariant** axis option now applies to the axis label in addition to ticks;
+- the tip mark is no longer briefly visible before asynchronous rendering;
+- the bin transform no longer generates undefined colors for empty bins;
+- the bin transform now uses the **interval** option to reduce *x1* & *x2* (and *y1* & *y2*);
+- the stack transform now correctly handles the *exclude* **facet** option;
+- the tree transform now correctly handles escaping with the **delimiter** option.
+
 ## 0.6.10
 
 [Released August 14, 2023.](https://github.com/observablehq/plot/releases/tag/v0.6.10)

docs/.vitepress/theme/custom.css

@@ -13,6 +13,8 @@
 }
 
 :root {
+  --vp-c-red: #f43f5e;
+  --vp-c-green: #10b981;
   --vp-c-blue: #0092ff;
   --vp-c-purple: #a463f2;
   --vp-c-brand-1: var(--vp-c-purple-1);

docs/community.md

@@ -10,8 +10,6 @@ Please star ⭐️ our [GitHub repo](https://github.com/observablehq/plot) to sh
 
 Plot is getting better all the time; catch up on [recent releases](https://github.com/observablehq/plot/releases) by reading our [CHANGELOG](https://github.com/observablehq/plot/blob/main/CHANGELOG.md).
 
-For email updates, sign up for the [Observable Plot Twist](https://observablehq.com/@observablehq/plot-twist-newsletter-signup) newsletter. (See our [back issues](https://observablehq.com/collection/@observablehq/newsletters/2) and [blog](https://observablehq.com/blog), too.) This monthly newsletter will let you know about new features in Plot, inspiring work by the community, upcoming workshops and community events, and more.
-
 And of course, follow us on [Observable](https://observablehq.com/@observablehq?tab=profile), [Mastodon](https://vis.social/@observablehq), [Twitter](https://twitter.com/observablehq), and [LinkedIn](https://www.linkedin.com/company/observable)!
 
 ## Getting help

docs/features/marks.md

@@ -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), [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.)
+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 an options object, these options will be passed to the derived tip mark. If the **tip** option (or, if an object, its **pointer** 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.
 

docs/features/scales.md

@@ -940,7 +940,7 @@ Plot implicitly generates an [axis mark](../marks/axis.md) for position scales i
 * **tickPadding** - the separation between the tick and its label (in pixels; default 3)
 * **tickFormat** - either a function or specifier string to format tick values; see [Formats](./formats.md)
 * **tickRotate** - whether to rotate tick labels (an angle in degrees clockwise; default 0)
-* **fontVariant** - the font-variant attribute for ticks; defaults to *tabular-nums* if quantitative
+* **fontVariant** - the font-variant attribute; 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 <VersionBadge version="0.6.7" />

docs/marks/tip.md

@@ -129,7 +129,37 @@ Plot.rectY(olympians, Plot.binX({y: "sum"}, {x: "weight", y: (d) => d.sex === "m
 ```
 :::
 
-The tip mark does not provide options for formatting channel names or values. When a channel is bound to a scale, the scale’s label is shown instead of the channel name. If you desire greater customization, please upvote [#1612](https://github.com/observablehq/plot/issues/1612).
+The order and formatting of channels in the tip can be customized with the **format** option <VersionBadge version="0.6.11" pr="1823" />, which accepts a key-value object mapping channel names to formats. Each [format](../features/formats.md) can be a string (for number or time formats), a function that receives the value as input and returns a string, true to use the default format, and null or false to suppress. The order of channels in the tip follows their order in the format object followed by any additional channels.
+
+A channel’s label can be specified alongside its value as a {value, label} object; if a channel label is not specified, the associated scale’s label is used, if any; if there is no associated scale, or if the scale has no label, the channel name is used instead.
+
+:::plot defer https://observablehq.com/@observablehq/plot-tip-format
+```js
+Plot.dot(olympians, {
+  x: "weight",
+  y: "height",
+  stroke: "sex",
+  channels: {
+    name: "name",
+    nationality: {
+      value: "nationality",
+      label: "country"
+    },
+    sport: "sport"
+  },
+  tip: {
+    format: {
+      name: true,
+      sport: true,
+      nationality: true,
+      y: (d) => `${d}m`,
+      x: (d) => `${d}kg`,
+      stroke: false
+    }
+  }
+}).plot()
+```
+:::
 
 The tip mark supports nine different orientations specified by the **anchor** option: the four sides (*top*, *right*, *bottom*, *left*), the four corners (*top-left*, *top-right*, *bottom-right*, *bottom-left*), and *middle*. Note that when *middle* is used, the tip will obscure its anchor point.
 

docs/transforms/tree.md

@@ -60,7 +60,7 @@ Given a text file, you can use `text.split("\n")` to split the contents into mul
 The following options control how the tabular data is organized into a hierarchy:
 
 * **path** - a column specifying each node’s hierarchy location; defaults to identity
-* **delimiter** - the path separator; defaults to forward slash (/)
+* **delimiter** - the path separator, a single character; defaults to forward slash (/)
 
 The **path** column is typically slash-separated, as with UNIX-based file systems or URLs.