0.6.12 (#1934)

* 0.6.12 CHANGELOG.md

* cha-cha-changes

* 0.6.12

* more badges

* observable10

---------

Co-authored-by: Mike Bostock <mbostock@gmail.com>

CHANGELOG.md

@@ -2,6 +2,124 @@
 
 Year: **Current (2023)** · [2022](./CHANGELOG-2022.md) · [2021](./CHANGELOG-2021.md)
 
+## 0.6.12
+
+[Released December 7, 2023.](https://github.com/observablehq/plot/releases/tag/v0.6.12)
+
+To better support dark mode, we’ve made a breaking change to default styles: the background color is now `unset` (transparent) instead of `white`. Additionally, marks that expect to use the same color as the background (for instance, the tip mark) now use the CSS custom property `--plot-background` instead of `white`.
+
+As since [version 0.6.6](#066), you can override Plot’s styles via the `plot-d6a7b5` class. For example, the following stylesheet applies a dark background and white foreground:
+
+```css
+.plot-d6a7b5 {
+  --plot-background: #333;
+  background: var(--plot-background);
+  color: white;
+}
+```
+
+Previously Plot forced you to choose between [rect](https://observablehq.com/plot/marks/rect), [bar](https://observablehq.com/plot/marks/bar), and [cell](https://observablehq.com/plot/marks/cell) based on whether the *x* and *y* scales were ordinal or quantitative. Rejoice: the [rect mark](https://observablehq.com/plot/marks/rect) now supports *band* scales so you can simply use rect in all cases! 🎉 (The bar and cell marks still offer conveniences for ordinal scales, so use them if you like.)
+
+<img src="./img/rect-band.png" width="626" alt="A bar chart showing the relative frequency of English letters.">
+
+```js
+Plot.rectY(alphabet, {x: "letter", y: "frequency"}).plot()
+```
+
+Categorical color scales now default to the new *observable10* color scheme by [Jeff Pettiross](https://github.com/pettiross). These colors are intended as a drop-in replacement for *tableau10* with similar ease of discrimination and ordering, but with a slightly more saturated vibe that helps charts pop.
+
+<img src="./img/observable10.png" width="600" alt="Color swatches of the ten colors in the observable10 color scheme: blue, yellow, red, teal, purple, pink, brown, light blue, green, and gray.">
+
+```js
+Plot.cellX(d3.range(10)).plot({color: {type: "categorical"}})
+```
+
+The new [difference mark](https://observablehq.com/plot/marks/difference) puts a metric in context by comparing it to another metric or constant value. Like the [area mark](https://observablehq.com/plot/marks/area), the region between two lines is filled; unlike the area mark, alternating color shows when the metric is above or below the comparison.
+
+<img src="./img/difference-zero.png" width="630" alt="A difference chart showing a moving average of global temperature anomaly; positive anomalies are shown in green, and negative anomalies are shown in blue.">
+
+```js
+Plot.differenceY(gistemp, Plot.windowY(28, {x: "Date", y: "Anomaly"})).plot()
+```
+
+The chart above shows a moving average of global temperature anomaly; above-average temperatures are shown in green and below-average temperatures are shown in blue.
+
+The difference mark can also compare a metric to its earlier self, showing change over time. The chart below shows the year-over-year change in Apple stock price; the gray region represents an increase over last year while the red region represents a decrease.
+
+<img src="./img/difference-shift.png" width="630" alt="A difference chart showing the year-over-year change in Apple stock price; the gray region represents an increase over last year, while the red region represents a decrease.">
+
+```js
+Plot.differenceY(
+  aapl,
+  Plot.shiftX("year", {
+    x: "Date",
+    y: "Close",
+    positiveFillOpacity: 0.2,
+    positiveFill: "currentColor",
+    negativeFillOpacity: 0.8,
+    negativeFill: "red"
+  })
+).plot()
+```
+
+The chart above is constructed using the new [shift transform](https://observablehq.com/plot/transforms/shift), which derives a time-shifted copy of a metric for the given time interval, enabling year–over-year, month-over-month, or any other period-over-period comparison.
+
+The new [find reducer](https://observablehq.com/plot/transforms/group#find) allows you to pivot data with the [bin](https://observablehq.com/plot/transforms/bin) and [group](https://observablehq.com/plot/transforms/group) transforms, effectively turning “tall” data (with fewer columns) into “wide” data (with more columns). For example, say you have time-series data that has separate rows for observed daily temperatures in San Francisco (SF) and San Jose (SJ):
+
+```csv
+date,station,tmax,tmin
+2020-12-31,SJ,59,43
+2020-12-31,SF,60,47
+2020-12-30,SJ,58,33
+2020-12-30,SF,57,40
+2020-12-29,SJ,62,38
+2020-12-29,SF,61,41
+2020-12-28,SJ,57,43
+2020-12-28,SF,56,47
+2020-12-27,SJ,62,43
+2020-12-27,SF,57,46
+2020-12-26,SJ,60,46
+2020-12-26,SF,61,49
+```
+
+To compare the average minimum temperatures of San Francisco and San Jose as another difference chart:
+
+<img src="./img/difference-find.png" width="630" alt="A difference chart showing moving averages of daily minimum temperatures of San Francisco and San Jose; the green region represents when San Francisco was warmer than San Jose, and the blue region when San Francisco was cooler than San Jose.">
+
+```js
+Plot.plot({
+  x: {tickFormat: "%b"},
+  y: {grid: true},
+  marks: [
+    Plot.ruleY([32]),
+    Plot.differenceY(
+      temperature,
+      Plot.windowY(
+        14,
+        Plot.groupX(
+          {y1: Plot.find((d) => d.station === "SJ"), y2: Plot.find((d) => d.station === "SF")},
+          {x: "date", y: "tmin"}
+        )
+      )
+    )
+  ]
+})
+```
+
+The green region above represents when San Francisco was warmer than San Jose, and the blue region when San Francisco was cooler than San Jose.
+
+The [tip mark](https://observablehq.com/plot/marks/tip) now supports a **preferredAnchor** option, providing greater control over tip placement: if the tip  fits within the frame at the preferred anchor, this anchor will be used. (In contrast, the **anchor** option uses the specified anchor regardless of whether it will fit.) The tip mark now also prefers the *bottom* anchor by default for a more traditional, less comic-like appearance.
+
+The [**marker** option](https://observablehq.com/plot/features/markers) now supports new marker types: *tick*, *tick-x*, and *tick-y*. The [bin](https://observablehq.com/plot/transforms/bin) and [group](https://observablehq.com/plot/transforms/group) transforms now pass _data_ to reducers. The [group](https://observablehq.com/plot/transforms/group) and [hexbin](https://observablehq.com/plot/transforms/hexbin) transforms now support _x_ and _y_ reducers.
+
+This release includes several additional fixes:
+
+* The default axis for a *time* scale now uses local time.
+* The text mark’s **lineWidth** option is now more accurate when **monospace** is true.
+* The tip mark no longer truncates **title** text.
+* The scale **type** option is now case-insensitive.
+* Transform type definitions have correct overload precedence.
+
 ## 0.6.11
 
 [Released September 20, 2023.](https://github.com/observablehq/plot/releases/tag/v0.6.11)

docs/features/markers.md

@@ -56,9 +56,9 @@ The following named markers are supported:
 * *dot* - a filled *circle* without a stroke and 2.5px radius
 * *circle*, equivalent to *circle-fill* - a filled circle with a white stroke and 3px radius
 * *circle-stroke* - a hollow circle with a colored stroke and a white fill and 3px radius
-* *tick* - a small opposing line
-* *tick-x* - a small horizontal line
-* *tick-y* - a small vertical line
+* *tick* <VersionBadge version="0.6.12" pr="1872" /> - a small opposing line
+* *tick-x* <VersionBadge version="0.6.12" pr="1872" /> - a small horizontal line
+* *tick-y* <VersionBadge version="0.6.12" pr="1872" /> - a small vertical line
 
 If **marker** is true, it defaults to *circle*. If **marker** is a function, it will be called with a given *color* and must return an [SVG marker element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker).
 

docs/features/scales.md

@@ -11,7 +11,7 @@ const align = ref(0.5);
 const radius = ref(8);
 const schemeq = ref("turbo");
 const schemed = ref("rdbu");
-const schemeo = ref("Tableau10");
+const schemeo = ref("Observable10");
 const interpolateq = ref("rgb");
 const anomaly = gistemp.map((d) => d.Anomaly);
 const aapl = shallowRef([]);
@@ -457,6 +457,7 @@ Plot also provides color schemes for discrete data. Use the *categorical* type f
         <option>Accent</option>
         <option>Category10</option>
         <option>Dark2</option>
+        <option>Observable10</option>
         <option>Paired</option>
         <option>Pastel1</option>
         <option>Pastel2</option>
@@ -730,7 +731,7 @@ Plot.plot({
 
 The normal scale types — *linear*, *sqrt*, *pow*, *log*, *symlog*, and *ordinal* — can be used to encode color. In addition, Plot supports special scale types for color:
 
-* *categorical* - like *ordinal*, but defaults to *tableau10*
+* *categorical* - like *ordinal*, but defaults to *observable10*
 * *sequential* - like *linear*
 * *cyclical* - like *linear*, but defaults to *rainbow*
 * *threshold* - discretizes using thresholds given as the **domain**; defaults to *rdylbu*
@@ -878,6 +879,7 @@ Plot.plot({
       ["Accent", d3.schemeAccent],
       ["Category10", d3.schemeCategory10],
       ["Dark2", d3.schemeDark2],
+      ["Observable10", Plot.scale({color: {type: "categorical"}}).range],
       ["Paired", d3.schemePaired],
       ["Pastel1", d3.schemePastel1],
       ["Pastel2", d3.schemePastel2],

docs/marks/difference.md

@@ -18,7 +18,7 @@ onMounted(() => {
 
 </script>
 
-# Difference mark <VersionBadge pr="1896" />
+# Difference mark <VersionBadge version="0.6.12" pr="1896" />
 
 The **difference mark** puts a metric in context by comparing it. Like the [area mark](./area.md), the region between two lines is filled; unlike the area mark, alternating color shows when the metric is above or below the comparison value.
 

docs/marks/tip.md

@@ -184,7 +184,7 @@ Plot.plot({
 ```
 :::
 
-If you don’t specify an explicit **anchor**, the tip mark will choose one automatically, using the **preferredAnchor** <VersionBadge pr="1872" /> if it fits. The preferred anchor defaults to *bottom*, except when using the **tip** option and the [pointerY pointing mode](../interactions/pointer.md), in which case it defaults to *left*. In some cases, it may not be possible to fit the tip within the plot’s frame; consider setting the plot’s **style** to `overflow: visible;` to prevent the tip from being truncated.
+If you don’t specify an explicit **anchor**, the tip mark will choose one automatically, using the **preferredAnchor** <VersionBadge version="0.6.12" pr="1872" /> if it fits. The preferred anchor defaults to *bottom*, except when using the **tip** option and the [pointerY pointing mode](../interactions/pointer.md), in which case it defaults to *left*. In some cases, it may not be possible to fit the tip within the plot’s frame; consider setting the plot’s **style** to `overflow: visible;` to prevent the tip from being truncated.
 
 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.
 

docs/transforms/group.md

@@ -368,8 +368,8 @@ The following named reducers are supported:
 * *deviation* - the standard deviation
 * *variance* - the variance per [Welford’s algorithm](https://en.wikipedia.org/wiki/Algorithms_for_calculating_variance#Welford's_online_algorithm)
 * *identity* - the array of values
-* *x* - the group’s *x* value (when grouping on *x*)
-* *y* - the group’s *y* value (when grouping on *y*)
+* *x* <VersionBadge version="0.6.12" pr="1916" /> - the group’s *x* value (when grouping on *x*)
+* *y* <VersionBadge version="0.6.12" pr="1916" /> - the group’s *y* value (when grouping on *y*)
 
 In addition, a reducer may be specified as:
 
@@ -440,7 +440,7 @@ Plot.groupZ({x: "proportion"}, {fill: "species"})
 
 Groups on the first channel of **z**, **fill**, or **stroke**, if any. If none of **z**, **fill**, or **stroke** are channels, then all data (within each facet) is placed into a single group.
 
-## find(*test*) {#find}
+## find(*test*) {#find} <VersionBadge version="0.6.12" pr="1914" />
 
 ```js
 Plot.groupX(

docs/transforms/hexbin.md

@@ -197,8 +197,8 @@ The following named reducers are supported:
 * *variance* - the variance per [Welford’s algorithm](https://en.wikipedia.org/wiki/Algorithms_for_calculating_variance#Welford's_online_algorithm)
 * *mode* - the value with the most occurrences
 * *identity* - the array of values
-* *x* - the hexagon’s *x* center
-* *y* - the hexagon’s *y* center
+* *x* <VersionBadge version="0.6.12" pr="1916" /> - the hexagon’s *x* center
+* *y* <VersionBadge version="0.6.12" pr="1916" /> - the hexagon’s *y* center
 
 In addition, a reducer may be specified as:
 

docs/transforms/shift.md

@@ -13,7 +13,7 @@ onMounted(() => {
 
 </script>
 
-# Shift transform <VersionBadge pr="1896" />
+# Shift transform <VersionBadge version="0.6.12" pr="1896" />
 
 The **shift transform** is a specialized [map transform](./map.md) that derives an output **x1** channel by shifting the **x** channel; it can be used with the [difference mark](../marks/difference.md) to show change over time. For example, the chart below shows the price of Apple stock. The <span style="border-bottom: solid #01ab63 3px;">green region</span> shows when the price went up over the given interval, while the <span style="border-bottom: solid #4269d0 3px;">blue region</span> shows when the price went down.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@observablehq/plot",
   "description": "A JavaScript library for exploratory data visualization.",
-  "version": "0.6.11",
+  "version": "0.6.12",
   "author": {
     "name": "Observable, Inc.",
     "url": "https://observablehq.com"