scale.integer and possible years heuristic

Author: Fil

src/marks/axis.js

@@ -570,13 +570,17 @@ function inferTextChannel(scale, ticks, tickFormat) {
 
 // D3’s ordinal scales simply use toString by default, but if the ordinal scale
 // domain (or ticks) are numbers or dates (say because we’re applying a time
-// interval to the ordinal scale), we want Plot’s default formatter.
+// interval to the ordinal scale), we want Plot’s default formatter. As a
+// heuristic to represent years on a linear scale without a comma, when the
+// scale is integer and the domain covers [1500...2200] we default to "d".
 function inferTickFormat(scale, ticks, tickFormat) {
   switch (scale.type) {
     case "point":
     case "band":
       return tickFormat === undefined
-        ? formatDefault
+        ? isYearFormat(scale)
+          ? format("d")
+          : formatDefault
         : typeof tickFormat === "string"
         ? (isTemporal(scale.domain) ? utcFormat : format)(tickFormat)
         : constant(tickFormat);
@@ -593,12 +597,20 @@ function inferTickFormat(scale, ticks, tickFormat) {
         .domain(scale.domain)
         .tickFormat(isIterable(ticks) ? null : ticks, tickFormat);
     default:
-      return scaleLinear()
-        .domain(scale.domain)
-        .tickFormat(isIterable(ticks) ? null : ticks, tickFormat);
+      return isYearFormat(scale)
+        ? format("d")
+        : scaleLinear()
+            .domain(scale.domain)
+            .tickFormat(isIterable(ticks) ? null : ticks, tickFormat);
   }
 }
 
+function isYearFormat({integer, domain}) {
+  if (integer !== true) return;
+  for (const d of domain) if (typeof d !== "number" || d < 1500 || d > 2200) return;
+  return true;
+}
+
 function inferTickFunction({type, domain}) {
   if (type === "point" || type === "band") return;
   const S = type === "log" ? scaleLog : type === "time" ? scaleTime : type === "utc" ? scaleUtc : scaleLinear;

src/scales.js

@@ -76,6 +76,7 @@ export function Scales(
         label = key === "fx" || key === "fy" ? facetLabel : globalLabel,
         percent,
         transform,
+        interval,
         inset,
         insetTop = inset !== undefined ? inset : key === "y" ? globalInsetTop : 0, // not fy
         insetRight = inset !== undefined ? inset : key === "x" ? globalInsetRight : 0, // not fx
@@ -87,6 +88,32 @@ export function Scales(
       scale.percent = !!percent;
       scale.label = label === undefined ? inferScaleLabel(channels, scale) : label;
       scale.transform = transform;
+
+      // A flag indicating that a sample of the values on every channel are
+      // integers; an axis may use that information to decide its tickFormat.
+      if (
+        !transform &&
+        !scale.percent &&
+        (scale.type === "linear" || scale.type === "point" || scale.type === "band")
+      ) {
+        if (typeof interval === "number") {
+          scale.integer = interval === Math.floor(interval);
+        } else {
+          channels: for (const {value} of channels) {
+            let c = 0;
+            for (const x of value) {
+              if (typeof x !== "number" || (x && x > Math.floor(x))) {
+                scale.integer = false;
+                break channels;
+              } else if (isFinite(x)) {
+                scale.integer = true;
+                if (++c > 40) break;
+              }
+            }
+          }
+        }
+      }
+
       if (key === "x" || key === "fx") {
         scale.insetLeft = +insetLeft;
         scale.insetRight = +insetRight;
@@ -567,11 +594,23 @@ export function exposeScales(scales) {
   };
 }
 
-function censorScale({label, ...scale}) {
+function censorScale({label, integer, ...scale}) {
   return scale;
 }
 
-function instantiateScale({scale, type, domain, range, interpolate, interval, transform, percent, pivot, label}) {
+function instantiateScale({
+  scale,
+  type,
+  domain,
+  range,
+  interpolate,
+  interval,
+  transform,
+  percent,
+  pivot,
+  label,
+  integer
+}) {
   if (type === "identity") return {type, apply: (d) => d, invert: (d) => d};
   const unknown = scale.unknown ? scale.unknown() : undefined;
   return {
@@ -580,6 +619,7 @@ function instantiateScale({scale, type, domain, range, interpolate, interval, tr
     ...(range !== undefined && {range: slice(range)}), // defensive copy
     ...(transform !== undefined && {transform}),
     ...(percent && {percent}), // only exposed if truthy
+    ...(integer !== undefined && {integer}),
     ...(unknown !== undefined && {unknown}),
     ...(interval !== undefined && {interval}),
 

test/plots/energy-production.js

@@ -32,7 +32,6 @@ export default async function () {
     .map((d) => ({...d, Year: +d.YYYYMM.slice(0, 4), Value: +d.Value}));
   return Plot.plot({
     x: {
-      tickFormat: "d",
       label: null
     },
     y: {

test/plots/yearly-requests-line.js

@@ -15,16 +15,5 @@ export default async function () {
     [2012, 9],
     [2019, 20]
   ];
-  return Plot.plot({
-    label: null,
-    x: {
-      interval: 1,
-      tickFormat: "", // TODO https://github.com/observablehq/plot/issues/768
-      inset: 20
-    },
-    y: {
-      zero: true
-    },
-    marks: [Plot.line(requests)]
-  });
+  return Plot.plot({label: null, x: {interval: 1, inset: 20}, y: {zero: true}, marks: [Plot.line(requests)]});
 }

test/plots/yearly-requests.js

@@ -15,12 +15,5 @@ export default async function () {
     [2012, 9],
     [2019, 20]
   ];
-  return Plot.plot({
-    label: null,
-    x: {
-      interval: 1,
-      tickFormat: "" // TODO https://github.com/observablehq/plot/issues/768
-    },
-    marks: [Plot.barY(requests, {x: "0", y: "1"})]
-  });
+  return Plot.plot({label: null, x: {interval: 1}, marks: [Plot.barY(requests, {x: "0", y: "1"})]});
 }