fix for scheme + range for diverging scales

Author: mbostock

src/scales/diverging.js

@@ -1,4 +1,5 @@
 import {
+  interpolateNumber,
   interpolateRgb,
   piecewise,
   scaleDiverging,
@@ -9,34 +10,41 @@ import {
 import {positive, negative} from "../defined.js";
 import {quantitativeScheme} from "./schemes.js";
 import {registry, color} from "./index.js";
-import {inferDomain, Interpolator, flip} from "./quantitative.js";
+import {inferDomain, Interpolator, flip, interpolatePiecewise} from "./quantitative.js";
 
 function ScaleD(key, scale, transform, channels, {
+  type,
   nice,
   clamp,
   domain = inferDomain(channels),
   unknown,
   pivot = 0,
+  scheme,
   range,
-  scheme = "rdbu",
   symmetric = true,
-  interpolate = registry.get(key) === color ? (range !== undefined ? interpolateRgb : quantitativeScheme(scheme)) : undefined,
-  reverse,
-  type
+  interpolate = registry.get(key) === color ? (scheme == null && range !== undefined ? interpolateRgb : quantitativeScheme(scheme !== undefined ? scheme : "rdbu")) : interpolateNumber,
+  reverse
 }) {
   pivot = +pivot;
   let [min, max] = domain;
   min = Math.min(min, pivot);
   max = Math.max(max, pivot);
 
   // Sometimes interpolate is a named interpolator, such as "lab" for Lab color
-  // space; other times it is a function that takes t in [0, 1].
-  if (interpolate !== undefined && typeof interpolate !== "function") {
+  // space. Other times interpolate is a function that takes two arguments and
+  // is used in conjunction with the range. And other times the interpolate
+  // function is a “fixed” interpolator on the [0, 1] interval, as when a
+  // color scheme such as interpolateRdBu is used.
+  if (typeof interpolate !== "function") {
     interpolate = Interpolator(interpolate);
   }
 
   // If an explicit range is specified, promote it to a piecewise interpolator.
-  if (range !== undefined) interpolate = piecewise(interpolate, range);
+  if (range !== undefined) {
+    interpolate = interpolate.length === 1
+      ? interpolatePiecewise(interpolate)(...range)
+      : piecewise(interpolate, range);
+  }
 
   // Normalize the interpolator for symmetric difference around the pivot.
   if (symmetric) {

src/scales/quantitative.js

@@ -48,15 +48,15 @@ export function Interpolator(interpolate) {
 }
 
 export function ScaleQ(key, scale, channels, {
+  type,
   nice,
   clamp,
   zero,
   domain = (registry.get(key) === radius || registry.get(key) === opacity ? inferZeroDomain : inferDomain)(channels),
   unknown,
   round,
-  range = registry.get(key) === radius ? inferRadialRange(channels, domain) : registry.get(key) === opacity ? unit : undefined,
-  type,
   scheme,
+  range = registry.get(key) === radius ? inferRadialRange(channels, domain) : registry.get(key) === opacity ? unit : undefined,
   interpolate = registry.get(key) === color ? (scheme == null && range !== undefined ? interpolateRgb : quantitativeScheme(scheme !== undefined ? scheme : type === "cyclical" ? "rainbow" : "turbo")) : round ? interpolateRound : interpolateNumber,
   reverse,
   inset = 0
@@ -70,25 +70,21 @@ export function ScaleQ(key, scale, channels, {
   // is used in conjunction with the range. And other times the interpolate
   // function is a “fixed” interpolator on the [0, 1] interval, as when a
   // color scheme such as interpolateRdBu is used.
-  if (interpolate !== undefined) {
-    if (typeof interpolate !== "function") {
-      interpolate = Interpolator(interpolate);
+  if (typeof interpolate !== "function") {
+    interpolate = Interpolator(interpolate);
+  }
+  if (interpolate.length === 1) {
+    if (reverse) {
+      interpolate = flip(interpolate);
+      reverse = false;
     }
-    if (interpolate.length === 1) {
-      if (reverse) {
-        interpolate = flip(interpolate);
-        reverse = false;
-      }
-      if (range === undefined) {
-        range = Float64Array.from(domain, (_, i) => i / (domain.length - 1));
-        if (range.length === 2) range = unit; // optimize common case of [0, 1]
-      }
-      scale.interpolate((range === unit ? constant : interpolatePiecewise)(interpolate));
-    } else {
-      scale.interpolate(interpolate);
+    if (range === undefined) {
+      range = Float64Array.from(domain, (_, i) => i / (domain.length - 1));
+      if (range.length === 2) range = unit; // optimize common case of [0, 1]
     }
+    scale.interpolate((range === unit ? constant : interpolatePiecewise)(interpolate));
   } else {
-    interpolate = scale.interpolate();
+    scale.interpolate(interpolate);
   }
 
   // If a zero option is specified, we assume that the domain is numeric, and we
@@ -205,6 +201,6 @@ function inferQuantileDomain(channels) {
   return domain;
 }
 
-function interpolatePiecewise(interpolate) {
+export function interpolatePiecewise(interpolate) {
   return (i, j) => t => interpolate(i + t * (j - i));
 }

test/scales/scales-test.js

@@ -407,6 +407,39 @@ it("plot(…).scale('color') can return a symmetric diverging scale", async () =
   }
 });
 
+it("plot(…).scale('color') can return a diverging scale with an explicit range", async () => {
+  const gistemp = await d3.csv("data/gistemp.csv", d3.autoType);
+  const plot = Plot.dot(gistemp, {x: "Date", stroke: "Anomaly"}).plot({color: {type: "diverging", symmetric: false, range: ["red", "white", "blue"]}});
+  const {interpolate, ...color} = plot.scale("color");
+  assert.deepStrictEqual(color, {
+    type: "diverging",
+    domain: [-0.78, 1.35],
+    pivot: 0,
+    clamp: false,
+    label: "Anomaly"
+  });
+  const interpolateColors = d3.piecewise(d3.interpolateRgb, ["red", "white", "blue"]);
+  for (const t of d3.ticks(0, 1, 100)) {
+    assert.strictEqual(interpolate(t), interpolateColors(t));
+  }
+});
+
+it("plot(…).scale('color') can return a diverging scale with an explicit scheme and range", async () => {
+  const gistemp = await d3.csv("data/gistemp.csv", d3.autoType);
+  const plot = Plot.dot(gistemp, {x: "Date", stroke: "Anomaly"}).plot({color: {type: "diverging", symmetric: false, range: [0, 0.5], scheme: "rdbu"}});
+  const {interpolate, ...color} = plot.scale("color");
+  assert.deepStrictEqual(color, {
+    type: "diverging",
+    domain: [-0.78, 1.35],
+    pivot: 0,
+    clamp: false,
+    label: "Anomaly"
+  });
+  for (const t of d3.ticks(0, 1, 100)) {
+    assert.strictEqual(interpolate(t), d3.interpolateRdBu(t / 2));
+  }
+});
+
 it("plot(…).scale('color') can return a transformed diverging scale", async () => {
   const transform = d => d * 100;
   const gistemp = await d3.csv("data/gistemp.csv", d3.autoType);