Observable Plot

Appearance

Formats ​

These helper functions are provided for convenience as a tickFormat option for the axis mark, as the text option for a text mark, or other use. See also d3-format, d3-time-format, and JavaScript’s built-in date formatting and number formatting.

formatIsoDate(date) ​

js
Plot.formatIsoDate(new Date("2020-01-01T00:00:00.000Z")) // "2020-01-01"

Given a date, returns the shortest equivalent ISO 8601 UTC string. If the given date is not valid, returns "Invalid Date". See isoformat.

formatWeekday(locale, format) ​

SunMonTueWedThuFriSat0123456Fork
js
Plot.textX(d3.range(7)).plot({x: {tickFormat: Plot.formatWeekday()}})
js
Plot.formatWeekday("es-MX", "long")(0) // "domingo"

Returns a function that formats a given week day number (from 0 = Sunday to 6 = Saturday) according to the specified locale and format. The locale is a BCP 47 language tag and defaults to U.S. English. The format is a weekday format: either narrow, short, or long; if not specified, it defaults to short.

formatMonth(locale, format) ​

JanFebMarAprMayJunJulAugSepOctNovDec01234567891011Fork
js
Plot.textX(d3.range(12)).plot({x: {tickFormat: Plot.formatMonth(), ticks: 12}})
js
Plot.formatMonth("es-MX", "long")(0) // "enero"

Returns a function that formats a given month number (from 0 = January to 11 = December) according to the specified locale and format. The locale is a BCP 47 language tag and defaults to U.S. English. The format is a month format: either 2-digit, numeric, narrow, short, long; if not specified, it defaults to short.