normalize intervals

lists a few TODOs re: the default tick format:
- we don't want decimal notation if the interval is specified as an integer
- we don't want months to appear if the interval is specified as d3.utcYear
- we don't want years to appear with commas (#768)

Author: Fil

src/axes.js

@@ -3,6 +3,7 @@ import {AxisX, AxisY} from "./axis.js";
 import {isOrdinalScale, isTemporalScale, scaleOrder} from "./scales.js";
 import {position, registry} from "./scales/index.js";
 import {maybeInterval} from "./transforms/interval.js";
+import {formatDefault} from "./format.js";
 
 export function Axes(
   {x: xScale, y: yScale, fx: fxScale, fy: fyScale},
@@ -41,12 +42,18 @@ function autoAxisTicksK(scale, axis, k) {
   }
 }
 
+// Scales defined with an interval default to regular ticks.
+// If the interval is specified as an integer, the tick format should not produce decimal dots.
 function tickInterval(scale, axis) {
   const interval = maybeInterval(scale.interval);
-  if (interval != null) {
-    const [min, max] = extent(scale.scale.domain());
-    if (axis.ticks === undefined) axis.ticks = interval.range(interval.floor(min), interval.offset(interval.floor(max)));
-    if (scale.type !== "point" && scale.type !== "band" && axis.tickFormat === undefined && typeof scale.interval === "number") axis.tickFormat = ",";
+  if (interval !== undefined) {
+    if (axis.ticks === undefined) {
+      const [min, max] = extent(scale.scale.domain());
+      axis.ticks = interval.range(interval.floor(min), interval.offset(interval.floor(max)));
+    }
+    if (axis.tickFormat === undefined) {
+      axis.tickFormat = formatDefault;
+    }
   }
 }
 

src/scales.js

@@ -143,7 +143,7 @@ function Scale(key, channels = [], options = {}) {
   if (options.type === undefined
       && options.domain === undefined
       && options.range === undefined
-      && options.interval == null
+      && options.interval === undefined
       && key !== "fx"
       && key !== "fy"
       && isOrdinalScale({type})) {

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, interval};
+  return {type, domain, range, scale, hint, interval: maybeInterval(interval)};
 }
 
 export function ScaleOrdinal(key, channels, {

src/scales/quantitative.js

@@ -26,6 +26,7 @@ import {
 import {positive, negative, finite} from "../defined.js";
 import {arrayify, constant, order} from "../options.js";
 import {ordinalRange, quantitativeScheme} from "./schemes.js";
+import {maybeInterval} from "../transforms/interval.js";
 import {registry, radius, opacity, color, length} from "./index.js";
 
 export const flip = i => t => i(1 - t);
@@ -106,7 +107,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, interval};
+  return {type, domain, range, scale, interpolate, interval: maybeInterval(interval)};
 }
 
 export function ScaleLinear(key, channels, options) {

test/output/integerInterval.svg

@@ -70,6 +70,7 @@ export {default as groupedRects} from "./grouped-rects.js";
 export {default as hadcrutWarmingStripes} from "./hadcrut-warming-stripes.js";
 export {default as highCardinalityOrdinal} from "./high-cardinality-ordinal.js";
 export {default as identityScale} from "./identity-scale.js";
+export {default as integerInterval} from "./integer-interval.js";
 export {default as ibmTrading} from "./ibm-trading.js";
 export {default as industryUnemployment} from "./industry-unemployment.js";
 export {default as industryUnemploymentShare} from "./industry-unemployment-share.js";
@@ -173,6 +174,7 @@ export {default as wordCloud} from "./word-cloud.js";
 export {default as wordLengthMobyDick} from "./word-length-moby-dick.js";
 export {default as yearlyRequests} from "./yearly-requests.js";
 export {default as yearlyRequestsDot} from "./yearly-requests-dot.js";
+export {default as yearlyRequestsLine} from "./yearly-requests-line.js";
 
 export * from "./legend-color.js";
 export * from "./legend-opacity.js";

test/output/yearlyRequestsLine.svg

@@ -0,0 +1,14 @@
+import * as Plot from "@observablehq/plot";
+
+export default async function() {
+  const requests = [[2,9],[3,17],[5,12]];
+  return Plot.plot({
+    // Since these numbers represent years, we want to format them without the comma
+    // TODO: this should be automatic, even for a continuous scale
+    x: {interval: 1, label: null, inset: 30},
+    y: {label: null, zero: true},
+    marks: [
+      Plot.lineY(requests, {x: "0", y: "1"})
+    ]
+  });
+}

test/plots/index.js

@@ -2,9 +2,10 @@ import * as d3 from "d3";
 import * as Plot from "@observablehq/plot";
 
 export default async function() {
-  const requests = [[new Date(2002, 0, 1), 9], [new Date(2003, 0, 1), 17], [new Date(2005, 0, 1), 5]];
+  const requests = [[new Date(Date.UTC(2002, 0, 1)), 9], [new Date(Date.UTC(2003, 0, 1)), 17], [new Date(Date.UTC(2005, 0, 1)), 5]];
   return Plot.plot({
-    x: {type: "utc", interval: d3.utcYear, label: null, inset: 40, grid: true},
+    // TODO: the default tickFormat could be inferred from the interval
+    x: {type: "utc", interval: d3.utcYear, label: null, inset: 40, grid: true, tickFormat: "%Y"},
     y: {label: null, zero: true},
     marks: [
       Plot.ruleY([0]),

test/plots/integer-interval.js

@@ -0,0 +1,14 @@
+import * as Plot from "@observablehq/plot";
+
+export default async function() {
+  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]];
+  return Plot.plot({
+    // Since these numbers represent years, we want to format them without the comma
+    // TODO: this should be automatic, even for a continuous scale
+    x: {interval: 1, label: null, inset: 20, tickFormat: ""},
+    y: {label: null, zero: true},
+    marks: [
+      Plot.lineY(requests, {x: "0", y: "1"})
+    ]
+  });
+}