Shorthand syntax for d3.piecewise

[Fil]

as discussed in #1633 it would be nice to provide a shorthand syntax for piecewise/polylinear scales with a simple domain [min, max].

Instead of

  type: "log",
   domain: [1, 5, 21, 100],
   range: ["#d3e7fa", "#5784c5", "#fc004b", "#ffec44"],

or

    type: "log",
    domain: [1, 100],
    interpolate: d3.piecewise(["#d3e7fa", "#5784c5", "#fc004b", "#ffec44"]),

you would then just say

    type: "log",
    domain: [1, 100],
    range: ["#d3e7fa", "#5784c5", "#fc004b", "#ffec44"],
    something: something

something could be interpolate: "piecewise", maybe?

[mbostock]

From that discussion:

What if the domain contains three elements [d1, d2, d3] and the range contains four elements [r1, r2, r3, r4]? Do we ignore the extra range element r4 in that case? Or do we ignore the domain element d3 and partition [d1, d3] uniformly into three intervals [r1, r2], [r2, r3], and [r3, r4]? Do we partition [d1, d2] using [r1, r2, r3], and partition [d2, d3] using [r3, r4]?

I realized we already have the answer, though, because we already support this by way of the interpolate option using d3.piecewise:

Plot.plot({
  color: {
    legend: true,
    type: "linear",
    domain: [0, 10, 40],
    interpolate: d3.piecewise(["red", "yellow", "green", "blue", "violet"])
  },
  marks: [
    Plot.cellX(d3.ticks(0, 40, 40), {x: Plot.identity, fill: Plot.identity})
  ]
})

What this does is construct a piecewise interpolator through the given colors, and then partitions that interpolator in equal parts, assigning each part to a sequential interval from the domain. So, [d1, d2] gets the first half of the interpolator, and [d2, d3] gets the second half of the interpolator. If the number of elements in the domain and the piecewise interpolator (range) align, then d2 is mapped to r2, d3 is mapped to r3, etc. so it all works out.

I think we don’t want to use the interpolate option for this because we may want to set an interpolator (a color space) such as lab or hcl in addition to indicating that you want to fit the range to the domain rather than ignoring the extra elements. E.g.,

Plot.plot({
  color: {
    legend: true,
    type: "linear",
    domain: [0, 10, 40],
    interpolate: d3.piecewise(d3.interpolateHcl, ["red", "yellow", "green", "blue", "violet"])
  },
  marks: [
    Plot.cellX(d3.ticks(0, 40, 40), {x: Plot.identity, fill: Plot.identity})
  ]
})

Maybe fit: true? 🤔

Plot.plot({
  color: {
    legend: true,
    type: "linear",
    domain: [0, 10, 40],
    range: ["red", "yellow", "green", "blue", "violet"],
    interpolate: "hcl",
    fit: true
  },
  marks: [
    Plot.cellX(d3.ticks(0, 40, 40), {x: Plot.identity, fill: Plot.identity})
  ]
})

[mbostock]

I feel like maybe I’ve changed my mind. Given that there is a clear way to handle domains and ranges of different lengths, maybe we should just allow it instead of dropping the extra elements and warning. It does change the behavior of existing plots, but respecting the extra elements is probably what the author intended; otherwise, why specify them? And seeing the change in behavior is more obvious than a warning. So… yeah. Maybe we just always do this?