reusable interval option

Author: Fil

src/scales.js

@@ -408,6 +408,7 @@ function exposeScale({
   range,
   label,
   interpolate,
+  interval,
   transform,
   percent,
   pivot
@@ -422,6 +423,7 @@ function exposeScale({
     ...percent && {percent}, // only exposed if truthy
     ...label !== undefined && {label},
     ...unknown !== undefined && {unknown},
+    ...interval !== undefined && {interval},
 
     // quantitative
     ...interpolate !== undefined && {interpolate},

src/scales/ordinal.js

@@ -28,7 +28,7 @@ export function ScaleO(scale, channels, {
     if (typeof range === "function") range = range(domain);
     scale.range(range);
   }
-  return {type, domain, range, scale, hint};
+  return {type, domain, range, scale, hint, interval};
 }
 
 export function ScaleOrdinal(key, channels, {

src/scales/quantitative.js

@@ -57,6 +57,7 @@ export function ScaleQ(key, scale, channels, {
   unknown,
   round,
   scheme,
+  interval,
   range = registry.get(key) === radius ? inferRadialRange(channels, domain) : registry.get(key) === length ? inferLengthRange(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
@@ -105,7 +106,7 @@ export function ScaleQ(key, scale, channels, {
   if (nice) scale.nice(nice === true ? undefined : nice), domain = scale.domain();
   if (range !== undefined) scale.range(range);
   if (clamp) scale.clamp(clamp);
-  return {type, domain, range, scale, interpolate};
+  return {type, domain, range, scale, interpolate, interval};
 }
 
 export function ScaleLinear(key, channels, options) {

test/scales/scales-test.js

@@ -1392,6 +1392,52 @@ it("plot(…).scale(name) reflects the given custom interpolator", async () => {
   });
 });
 
+it("plot(…).scale(name).interval changes the domain and sets the transform option for ordinal scales", async () => {
+  const requests = [[2002,9],[2003,17],[2004,12],[2005,5],[2006,12],[2007,18],[2008,16],[2009,11],[2010,9],[2011,8],[2012,9],[2019,20]];
+  const plot = Plot.barY(requests, {x: "0", y: "1"}).plot({x: {interval: 1}});
+  scaleEqual(plot.scale("x"), {
+    align: 0.5,
+    bandwidth: 29,
+    domain: d3.range(2002, 2020),
+    interval: 1,
+    label: "0",
+    paddingInner: 0.1,
+    paddingOuter: 0.1,
+    range: [40, 620],
+    round: true,
+    step: 32,
+    type: "band"
+  });
+});
+
+it("plot(…).scale(name).interval reflects the interval option for quantitative scales", async () => {
+  const penguins = await d3.csv("data/penguins.csv", d3.autoType);
+  const plot = Plot.dotX(penguins, {x: "body_mass_g"}).plot({x: {interval: 50}});
+  scaleEqual(plot.scale("x"), {
+    clamp: false,
+    domain: [2700, 6300],
+    interpolate: d3.interpolateNumber,
+    interval: 50,
+    label: "body_mass_g →",
+    range: [20, 620],
+    type: "linear"
+  });
+});
+
+it("The interval option is reusable for ordinal scales", async () => {
+  const requests = [[2002,9],[2003.5,17],[2005.9,5]];
+  const plot1 = Plot.barY(requests, {x: "0", y: "1"}).plot({x: {interval: 1}, className: "a"});
+  const plot2 = Plot.barY(requests, {x: "0", y: "1"}).plot({x: plot1.scale("x"), className: "a"});
+  assert.strictEqual(plot1.innerHTML, plot2.innerHTML);
+});
+
+it("The interval option is reusable for quantitative scales", async () => {
+  const requests = [[2002,9],[2003.5,17],[2005.9,5]];
+  const plot1 = Plot.dot(requests, {x: "0", y: "1"}).plot({x: {interval: 1}, className: "a"});
+  const plot2 = Plot.dot(requests, {x: "0", y: "1"}).plot({x: plot1.scale("x"), className: "a"});
+  assert.strictEqual(plot1.innerHTML, plot2.innerHTML);
+});
+
 it("plot(…).scale('color') allows a range to be specified in conjunction with a scheme", async () => {
   const gistemp = await d3.csv("data/gistemp.csv", d3.autoType);
   const plot = Plot.dot(gistemp, {x: "Date", fill: "Anomaly"}).plot({color: {range: [0, 0.5], scheme: "cool"}});