How to format axis labels in Observable Plot

Observable Plot is a JavaScript library for producing charts and other data visualisations. Given an array named data that contains objects each with date and positivityRate keys, you can create a line chart with code like this:

Plot.plot({
  y: { label: "Positivity rate", tickFormat: ".0%" },
  marks: [
    Plot.line(data, {
      x: "date",
      y: "positivityRate",
    }),
  ],
});

The tickFormat option used in the y scale above is powerful. You can pass it a function or you can use a ‘format specifier’. Plot includes a handful of formatting functions, Plot.formatIsoDate, Plot.formatWeekday, and Plot.formatMonth, or you can use your own (receive a value, return a formatted string).

A format specifier is a string that describe how you want Plot to format your labels. Plot supports the specifiers from d3-format, for formatting numbers, or d3-time-format, for formatting dates and times. The string used above, ".0%", says ‘round to the nearest integer, multiply by 100, and add a percent sign suffix’. Thus 0.123 becomes 12%. Another useful specifier is ~s, which trims insignificant trailing zeros — the number 1500 would be formatted as 1.5k. The format specifiers available from d3-time-format are less directly useful, if only because Plot uses them internally to label date and time axes automatically.

• Observable Plot
• JavaScript
• D3