formatNumber; filter log tickFormat function

Author: mbostock

docs/features/formats.md

@@ -9,6 +9,14 @@ import * as d3 from "d3";
 
 These helper functions are provided for convenience as a **tickFormat** option for the [axis mark](../marks/axis.md), as the **text** option for a [text mark](../marks/text.md), or other use. See also [d3-format](https://d3js.org/d3-format), [d3-time-format](https://d3js.org/d3-time-format), and JavaScript’s built-in [date formatting](https://observablehq.com/@mbostock/date-formatting) and [number formatting](https://observablehq.com/@mbostock/number-formatting).
 
+## formatNumber(*locale*) {#formatNumber}
+
+```js
+Plot.formatNumber("en-US")(Math.PI) // "2020-01-01"
+```
+
+Returns a function that formats a given number according to the specified *locale*. The *locale* is a [BCP 47 language tag](https://tools.ietf.org/html/bcp47) and defaults to U.S. English.
+
 ## formatIsoDate(*date*) {#formatIsoDate}
 
 ```js

src/format.d.ts

@@ -1,3 +1,13 @@
+/**
+ * Returns a function that formats a given number according to the specified
+ * *locale*.
+ *
+ * [1]: https://tools.ietf.org/html/bcp47
+ *
+ * @param locale - a [BCP 47 language tag][1]; defaults to U.S. English.
+ */
+export function formatNumber(locale?: string): (i: number) => string;
+
 /**
  * Returns a function that formats a given month number (from 0 = January to 11
  * = December) according to the specified *locale* and *format*.

src/index.js

@@ -53,6 +53,6 @@ export {select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, sel
 export {stackX, stackX1, stackX2, stackY, stackY1, stackY2} from "./transforms/stack.js";
 export {treeNode, treeLink} from "./transforms/tree.js";
 export {pointer, pointerX, pointerY} from "./interactions/pointer.js";
-export {formatIsoDate, formatWeekday, formatMonth} from "./format.js";
+export {formatIsoDate, formatNumber, formatWeekday, formatMonth} from "./format.js";
 export {scale} from "./scales.js";
 export {legend} from "./legends.js";

src/marks/axis.js

@@ -652,7 +652,7 @@ function inferTextChannel(scale, data, ticks, tickFormat, anchor) {
 // possible, or the default ISO format (2014-01-26). TODO We need a better way
 // to infer whether the ordinal scale is UTC or local time.
 export function inferTickFormat(scale, data, ticks, tickFormat, anchor) {
-  return typeof tickFormat === "function"
+  return typeof tickFormat === "function" && !(scale.type === "log" && scale.tickFormat)
     ? tickFormat
     : tickFormat === undefined && data && isTemporal(data)
     ? inferTimeFormat(scale.type, data, anchor) ?? formatDefault

test/output/logTickFormatFunction.svg

@@ -152,6 +152,7 @@ export * from "./linear-regression-cars.js";
 export * from "./linear-regression-mtcars.js";
 export * from "./linear-regression-penguins.js";
 export * from "./log-degenerate.js";
+export * from "./log-tick-format.js";
 export * from "./long-labels.js";
 export * from "./markers.js";
 export * from "./markov-chain.js";

test/plots/index.ts

@@ -0,0 +1,5 @@
+import * as Plot from "@observablehq/plot";
+
+export async function logTickFormatFunction() {
+  return Plot.plot({x: {type: "log", domain: [1, 4200], tickFormat: Plot.formatNumber()}});
+}