default z: null for redundant color encoding (#2379)

* defalt z: null for redundant color encoding

* prettier

* preddier

* document z null default

---------

Co-authored-by: Philippe Rivière <fil@rezo.net>

Author: mbostock

docs/marks/area.md

@@ -205,7 +205,7 @@ Plot.plot({
 ```
 :::
 
-To vary **fill** within a single series, set the **z** option to null.
+To vary **fill** within a single series, set the **z** option to null. For areaY, **z** defaults to null if the **fill** and **y** channels are strictly equal, as when the color encoding is redundant with position; for areaX, **z** defaults to null if **fill** and **x** are strictly equal. <VersionBadge pr="2379" />
 
 :::plot defer https://observablehq.com/@observablehq/plot-variable-fill-area
 ```js

docs/marks/line.md

@@ -176,7 +176,7 @@ Plot.plot({
 Here the [normalize transform](../transforms/normalize.md) normalizes each time series (**z**) relative to its initial value, while the [select transform](../transforms/select.md) extracts the last point for labeling. A custom tick format converts multiples to percentage change (*e.g.*, 1.6× = +60%).
 :::
 
-Varying-color lines are supported. If the **stroke** value varies within series, the line will be segmented by color. (The same behavior applies to other channels, such as **strokeWidth** and **title**.) Specifying the **z** channel (say to null for a single series) is recommended.
+Varying-color lines are supported. If the **stroke** value varies within series, the line will be segmented by color. (The same behavior applies to other channels, such as **strokeWidth** and **title**.) The **z** channel determines how data is grouped into series.
 
 :::plot defer https://observablehq.com/@observablehq/plot-varying-stroke-line
 ```js
@@ -201,6 +201,14 @@ Plot.plot({
 ```
 :::
 
+If the **stroke** and **y** channels are strictly equal, as when the color encoding is redundant with position, **z** defaults to null, producing a single varying-color line. <VersionBadge pr="2379" />
+
+:::plot
+```js
+Plot.lineY(aapl, {x: "Date", y: "Close", stroke: "Close"}).plot({y: {grid: true}})
+```
+:::
+
 Color encodings can also be used to highlight specific series, such as here to emphasize high unemployment in Michigan.
 
 :::plot defer https://observablehq.com/@observablehq/plot-multiple-line-highlight

src/marks/area.js

@@ -77,11 +77,11 @@ export function area(data, options) {
 }
 
 export function areaX(data, options) {
-  const {y = indexOf, ...rest} = maybeDenseIntervalY(options);
-  return new Area(data, maybeStackX(maybeIdentityX({...rest, y1: y, y2: undefined}, y === indexOf ? "x2" : "x")));
+  const {x, y = indexOf, fill, z = x === fill ? null : undefined, ...rest} = maybeDenseIntervalY(options);
+  return new Area(data, maybeStackX(maybeIdentityX({...rest, x, y1: y, y2: undefined, z, fill}, y === indexOf ? "x2" : "x"))); // prettier-ignore
 }
 
 export function areaY(data, options) {
-  const {x = indexOf, ...rest} = maybeDenseIntervalX(options);
-  return new Area(data, maybeStackY(maybeIdentityY({...rest, x1: x, x2: undefined}, x === indexOf ? "y2" : "y")));
+  const {x = indexOf, y, fill, z = y === fill ? null : undefined, ...rest} = maybeDenseIntervalX(options);
+  return new Area(data, maybeStackY(maybeIdentityY({...rest, x1: x, x2: undefined, y, z, fill}, x === indexOf ? "y2" : "y"))); // prettier-ignore
 }

src/marks/line.js

@@ -103,10 +103,10 @@ export function line(data, {x, y, ...options} = {}) {
   return new Line(data, {...options, x, y});
 }
 
-export function lineX(data, {x = identity, y = indexOf, ...options} = {}) {
-  return new Line(data, maybeDenseIntervalY({...options, x, y}));
+export function lineX(data, {x = identity, y = indexOf, stroke, z = stroke === x ? null : undefined, ...options} = {}) {
+  return new Line(data, maybeDenseIntervalY({...options, x, y, z, stroke}));
 }
 
-export function lineY(data, {x = indexOf, y = identity, ...options} = {}) {
-  return new Line(data, maybeDenseIntervalX({...options, x, y}));
+export function lineY(data, {x = indexOf, y = identity, stroke, z = stroke === y ? null : undefined, ...options} = {}) {
+  return new Line(data, maybeDenseIntervalX({...options, x, y, z, stroke}));
 }