Readable numeric ticks

Run Stop Open full page

Read as Markdown

Round a temperature range outward and format evenly spaced tick labels with units.

APIs demonstrated

• linearTicks from @pibbl/core/viz
• niceLinearDomain from @pibbl/core/viz
• formatNumber from @pibbl/core/viz
• LinearTickOptions from @pibbl/core/viz
• NumberFormatOptions from @pibbl/core/viz

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

import {
  linearTicks,
  niceLinearDomain,
  formatNumber,
  type LinearTickOptions,
  type NumberFormatOptions,
} from "@pibbl/core/viz";

const tickOptions: LinearTickOptions = { count: 5 };
const formatOptions: NumberFormatOptions = {
  maximumFractionDigits: 1,
  suffix: " °C",
};
const domain = niceLinearDomain([3.7, 27.4], tickOptions);
const heading = document.createElement("h2");
heading.textContent = "Prepare a readable temperature axis";
const explanation = document.createElement("p");
explanation.textContent = `Illustrative readings span 3.7–27.4 °C. Round the axis outward to ${domain[0]}–${domain[1]} °C, then choose evenly spaced ticks:`;
const output = document.createElement("p");
output.textContent = linearTicks(domain, tickOptions)
  .map((value) => formatNumber(value, formatOptions))
  .join(", ");
document.body.append(heading, explanation, output);

Usage notes

• These illustrative temperature bounds demonstrate numeric axis preparation. No dates or time zones are involved.

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.