per-channel scale override; "auto" scale

Author: mbostock

src/channel.js

@@ -1,37 +1,71 @@
 import {ascending, descending, rollup, sort} from "d3";
-import {first, isIterable, labelof, map, maybeValue, range, valueof} from "./options.js";
+import {first, isColor, isEvery, isIterable, labelof, map, maybeValue, range, valueof} from "./options.js";
 import {registry} from "./scales/index.js";
+import {isSymbol, maybeSymbol} from "./symbols.js";
 import {maybeReduce} from "./transforms/group.js";
 
 // TODO Type coercion?
-export function Channel(data, {scale, type, value, filter, hint}) {
+export function Channel(data, {scale, type, value, filter, hint}, name) {
+  let V = valueof(data, value);
+
+  // If the channel uses the "auto" scale, infer the scale from the channel name
+  // and the provided values. For color and symbol channels, no scale is applied
+  // if the values are literal; however for symbols, we must promote symbol
+  // names (e.g., "plus") to symbol implementations (symbolPlus).
+  if (scale === "auto") {
+    scale = inferChannelScale(name);
+    if (V) {
+      if (scale === "color") {
+        if (isEvery(V, isColor)) {
+          scale = undefined;
+        }
+      } else if (scale === "symbol") {
+        if (isEvery(V, isSymbol)) {
+          V = map(V, maybeSymbol);
+          scale = undefined;
+        }
+      }
+    }
+  }
+
   return {
     scale,
     type,
-    value: valueof(data, value),
+    value: V,
     label: labelof(value),
     filter,
     hint
   };
 }
 
-export function Channels(descriptors, data) {
-  return Object.fromEntries(Object.entries(descriptors).map(([name, channel]) => [name, Channel(data, channel)]));
+export function Channels(channels, data) {
+  return Object.fromEntries(Object.entries(channels).map(([name, channel]) => [name, Channel(data, channel, name)]));
 }
 
 // TODO Use Float64Array for scales with numeric ranges, e.g. position?
 export function valueObject(channels, scales) {
   return Object.fromEntries(
     Object.entries(channels).map(([name, {scale: scaleName, value}]) => {
       let scale;
-      if (scaleName !== undefined) {
-        scale = scales[scaleName];
-      }
+      if (scaleName != null) scale = scales[scaleName];
       return [name, scale === undefined ? value : map(value, scale)];
     })
   );
 }
 
+// Returns the default scale for the channel with the given name.
+export function inferChannelScale(name) {
+  switch (name) {
+    case "fill":
+    case "stroke":
+      return "color";
+    case "fillOpacity":
+    case "strokeOpacity":
+      return "opacity";
+  }
+  return registry.has(name) ? name : null;
+}
+
 // Note: mutates channel.domain! This is set to a function so that it is lazily
 // computed; i.e., if the scale’s domain is set explicitly, that takes priority
 // over the sort option, and we don’t need to do additional work.

src/mark.js

@@ -1,7 +1,7 @@
 import {Channels, channelDomain, valueObject} from "./channel.js";
 import {defined} from "./defined.js";
 import {maybeFacetAnchor} from "./facet.js";
-import {arrayify, isDomainSort, range} from "./options.js";
+import {arrayify, isDomainSort, isOptions, range} from "./options.js";
 import {keyword, maybeNamed} from "./options.js";
 import {maybeProject} from "./projection.js";
 import {maybeClip, styles} from "./style.js";
@@ -41,11 +41,20 @@ export class Mark {
     if (extraChannels !== undefined) channels = {...maybeNamed(extraChannels), ...channels};
     if (defaults !== undefined) channels = {...styles(this, options, defaults), ...channels};
     this.channels = Object.fromEntries(
-      Object.entries(channels).filter(([name, {value, optional}]) => {
-        if (value != null) return true;
-        if (optional) return false;
-        throw new Error(`missing channel value: ${name}`);
-      })
+      Object.entries(channels)
+        .map(([name, channel]) => {
+          const {value} = channel;
+          if (isOptions(value)) {
+            channel = {...channel, value: value.value};
+            if (value.scale !== undefined) channel.scale = value.scale;
+          }
+          return [name, channel];
+        })
+        .filter(([name, {value, optional}]) => {
+          if (value != null) return true;
+          if (optional) return false;
+          throw new Error(`missing channel value: ${name}`);
+        })
     );
     this.dx = +dx;
     this.dy = +dy;

src/marks/dot.js

@@ -41,7 +41,7 @@ export class Dot extends Mark {
         y: {value: y, scale: "y", optional: true},
         r: {value: vr, scale: "r", filter: positive, optional: true},
         rotate: {value: vrotate, optional: true},
-        symbol: {value: vsymbol, scale: "symbol", optional: true}
+        symbol: {value: vsymbol, scale: "auto", optional: true}
       },
       withDefaultSort(options),
       defaults

src/options.js

@@ -336,23 +336,18 @@ export function isNumeric(values) {
   }
 }
 
-export function isFirst(values, is) {
-  for (const value of values) {
-    if (value == null) continue;
-    return is(value);
-  }
-}
-
-// Whereas isFirst only tests the first defined value and returns undefined for
-// an empty array, this tests all defined values and only returns true if all of
-// them are valid colors. It also returns true for an empty array, and thus
-// should generally be used in conjunction with isFirst.
+// Returns true if every non-null value in the specified iterable of values
+// passes the specified predicate, and there is at least one non-null value;
+// returns false if at least one non-null value does not pass the specified
+// predicate; otherwise returns undefined (as if all values are null).
 export function isEvery(values, is) {
+  let every;
   for (const value of values) {
     if (value == null) continue;
     if (!is(value)) return false;
+    every = true;
   }
-  return true;
+  return every;
 }
 
 // Mostly relies on d3-color, with a few extra color keywords. Currently this

src/plot.js

@@ -1,5 +1,5 @@
 import {select} from "d3";
-import {Channel} from "./channel.js";
+import {Channel, inferChannelScale} from "./channel.js";
 import {Context, create} from "./context.js";
 import {Dimensions} from "./dimensions.js";
 import {Facets, facetExclude, facetGroups, facetOrder, facetTranslate, facetFilter} from "./facet.js";
@@ -156,7 +156,7 @@ export function plot(options = {}) {
         state.facets = update.facets;
       }
       if (update.channels !== undefined) {
-        inferChannelScale(update.channels, mark);
+        inferChannelScales(update.channels);
         Object.assign(state.channels, update.channels);
         for (const channel of Object.values(update.channels)) {
           const {scale} = channel;
@@ -370,27 +370,10 @@ function applyScaleTransform(channel, options) {
 // An initializer may generate channels without knowing how the downstream mark
 // will use them. Marks are typically responsible associated scales with
 // channels, but here we assume common behavior across marks.
-function inferChannelScale(channels) {
+function inferChannelScales(channels) {
   for (const name in channels) {
     const channel = channels[name];
-    let {scale} = channel;
-    if (scale === true) {
-      switch (name) {
-        case "fill":
-        case "stroke":
-          scale = "color";
-          break;
-        case "fillOpacity":
-        case "strokeOpacity":
-        case "opacity":
-          scale = "opacity";
-          break;
-        default:
-          scale = scaleRegistry.has(name) ? name : null;
-          break;
-      }
-      channel.scale = scale;
-    }
+    if (channel.scale === true) channel.scale = inferChannelScale(name);
   }
 }
 

src/scales.js

@@ -1,9 +1,6 @@
 import {parse as isoParse} from "isoformat";
 import {
-  isColor,
-  isEvery,
   isOrdinal,
-  isFirst,
   isTemporal,
   isTemporalString,
   isNumericString,
@@ -34,7 +31,7 @@ import {
 import {isDivergingScheme} from "./scales/schemes.js";
 import {ScaleTime, ScaleUtc} from "./scales/temporal.js";
 import {ScaleOrdinal, ScalePoint, ScaleBand, ordinalImplicit} from "./scales/ordinal.js";
-import {isSymbol, maybeSymbol} from "./symbols.js";
+import {maybeSymbol} from "./symbols.js";
 import {warn} from "./warnings.js";
 
 export function Scales(
@@ -406,20 +403,8 @@ function inferScaleType(key, channels, {type, domain, range, scheme, pivot, proj
   // If there’s no data (and no type) associated with this scale, don’t create a scale.
   if (domain === undefined && !channels.some(({value}) => value !== undefined)) return;
 
-  const kind = registry.get(key);
-
-  // For color scales, if no range or scheme is specified and all associated
-  // defined values (from the domain if present, and otherwise from channels)
-  // are valid colors, then default to the identity scale. This allows, for
-  // example, a fill channel to return literal colors; without this, the colors
-  // would be remapped to a categorical scheme!
-  if (kind === color && range === undefined && scheme === undefined && isAll(domain, channels, isColor))
-    return "identity";
-
-  // Similarly for symbols…
-  if (kind === symbol && range === undefined && isAll(domain, channels, isSymbol)) return "identity";
-
   // Some scales have default types.
+  const kind = registry.get(key);
   if (kind === radius) return "sqrt";
   if (kind === opacity || kind === length) return "linear";
   if (kind === symbol) return "ordinal";
@@ -461,13 +446,6 @@ function asOrdinalType(kind) {
   }
 }
 
-function isAll(domain, channels, is) {
-  return domain !== undefined
-    ? isFirst(domain, is) && isEvery(domain, is)
-    : channels.some(({value}) => value !== undefined && isFirst(value, is)) &&
-        channels.every(({value}) => value === undefined || isEvery(value, is));
-}
-
 export function isTemporalScale({type}) {
   return type === "time" || type === "utc";
 }

src/style.js

@@ -143,9 +143,9 @@ export function styles(
     title: {value: title, optional: true},
     href: {value: href, optional: true},
     ariaLabel: {value: variaLabel, optional: true},
-    fill: {value: vfill, scale: "color", optional: true},
+    fill: {value: vfill, scale: "auto", optional: true},
     fillOpacity: {value: vfillOpacity, scale: "opacity", optional: true},
-    stroke: {value: vstroke, scale: "color", optional: true},
+    stroke: {value: vstroke, scale: "auto", optional: true},
     strokeOpacity: {value: vstrokeOpacity, scale: "opacity", optional: true},
     strokeWidth: {value: vstrokeWidth, optional: true},
     opacity: {value: vopacity, scale: "opacity", optional: true}

test/marks/area-test.js

@@ -73,7 +73,7 @@ it("area(data, {fill}) allows fill to be a variable color", () => {
   assert.strictEqual(area.fill, undefined);
   const {fill} = area.channels;
   assert.strictEqual(fill.value, "x");
-  assert.strictEqual(fill.scale, "color");
+  assert.strictEqual(fill.scale, "auto");
 });
 
 it("area(data, {fill}) implies a default z channel if fill is variable", () => {
@@ -98,7 +98,7 @@ it("area(data, {stroke}) allows stroke to be a variable color", () => {
   assert.strictEqual(area.stroke, undefined);
   const {stroke} = area.channels;
   assert.strictEqual(stroke.value, "x");
-  assert.strictEqual(stroke.scale, "color");
+  assert.strictEqual(stroke.scale, "auto");
 });
 
 it("area(data, {stroke}) implies a default z channel if stroke is variable", () => {

test/marks/bar-test.js

@@ -62,7 +62,7 @@ it("barX(data, {fill}) allows fill to be a variable color", () => {
   assert.strictEqual(bar.fill, undefined);
   const {fill} = bar.channels;
   assert.strictEqual(fill.value, "x");
-  assert.strictEqual(fill.scale, "color");
+  assert.strictEqual(fill.scale, "auto");
 });
 
 it("barX(data, {stroke}) allows stroke to be a constant color", () => {
@@ -80,7 +80,7 @@ it("barX(data, {stroke}) allows stroke to be a variable color", () => {
   assert.strictEqual(bar.stroke, undefined);
   const {stroke} = bar.channels;
   assert.strictEqual(stroke.value, "x");
-  assert.strictEqual(stroke.scale, "color");
+  assert.strictEqual(stroke.scale, "auto");
 });
 
 it("barX(data, {x, y}) defaults x1 to zero and x2 to x", () => {
@@ -162,7 +162,7 @@ it("barY(data, {fill}) allows fill to be a variable color", () => {
   assert.strictEqual(bar.fill, undefined);
   const {fill} = bar.channels;
   assert.strictEqual(fill.value, "x");
-  assert.strictEqual(fill.scale, "color");
+  assert.strictEqual(fill.scale, "auto");
 });
 
 it("barY(data, {stroke}) allows stroke to be a constant color", () => {
@@ -180,7 +180,7 @@ it("barY(data, {stroke}) allows stroke to be a variable color", () => {
   assert.strictEqual(bar.stroke, undefined);
   const {stroke} = bar.channels;
   assert.strictEqual(stroke.value, "x");
-  assert.strictEqual(stroke.scale, "color");
+  assert.strictEqual(stroke.scale, "auto");
 });
 
 it("barY(data, {x, y}) defaults y1 to zero and y2 to y", () => {

test/marks/cell-test.js

@@ -67,7 +67,7 @@ it("cell(data, {fill}) allows fill to be a variable color", () => {
   assert.strictEqual(cell.fill, undefined);
   const {fill} = cell.channels;
   assert.strictEqual(fill.value, "x");
-  assert.strictEqual(fill.scale, "color");
+  assert.strictEqual(fill.scale, "auto");
 });
 
 it("cell(data, {stroke}) allows stroke to be a constant color", () => {
@@ -85,7 +85,7 @@ it("cell(data, {stroke}) allows stroke to be a variable color", () => {
   assert.strictEqual(cell.stroke, undefined);
   const {stroke} = cell.channels;
   assert.strictEqual(stroke.value, "x");
-  assert.strictEqual(stroke.scale, "color");
+  assert.strictEqual(stroke.scale, "auto");
 });
 
 it("cellX() defaults x to identity and y to null", () => {
@@ -102,7 +102,7 @@ it("cellX() defaults x to identity and y to null", () => {
   );
   assert.deepStrictEqual(
     Object.values(cell.channels).map((c) => c.scale),
-    ["color", "x"]
+    ["auto", "x"]
   );
   assert.strictEqual(cell.channels.x.type, "band");
 });
@@ -121,7 +121,7 @@ it("cellY() defaults y to identity and x to null", () => {
   );
   assert.deepStrictEqual(
     Object.values(cell.channels).map((c) => c.scale),
-    ["color", "y"]
+    ["auto", "y"]
   );
   assert.strictEqual(cell.channels.y.type, "band");
 });