d3plus-format

Shorthand formatters for common number types.

Installing

If using npm, npm install d3plus-format. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "d3plus-format";

d3plus-format can be loaded as a standalone library or bundled as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3plus-format@1"></script>
<script>
  console.log(d3plus);
</script>

Examples

Live examples can be found on d3plus.org, which includes a collection of example visualizations using d3plus-react. These examples are powered by the d3plus-storybook repo, and PRs are always welcome. 🍻

API Reference

• format - An extension to d3's format function that adds more string formatting types and localizations.

The new specifier strings added by d3plus-format are:

• .3~a - abbreviated decimal notation with a numeric suffix (ie. "k", "M", "B", etc). This is an alias of the formatAbbreviate function.

• formatAbbreviate - Formats a number to an appropriate number of decimal places and rounding, adding suffixes if applicable (ie. 1200000 to "1.2M").
• formatDate - A default set of date formatters, which takes into account both the interval in between in each data point but also the start/end data points.
• formatDefaultLocale - An extension to d3's formatDefaultLocale function that allows setting the locale globally for formatters.

• formatLocale - A set of default locale formatters used when assigning suffixes and currency in numbers.

Name	Default	Description
separator	""	Separation between the number with the suffix.
suffixes	[]	List of suffixes used to format numbers.
grouping	[3]	The array of group sizes,
delimiters	{thousands: ",", decimal: "."}	Decimal and group separators.
currency	["$", ""]	The currency prefix and suffix.

---

d3plus.format(specifier) <>

An extension to d3's format function that adds more string formatting types and localizations.

The new specifier strings added by d3plus-format are:

• .3~a - abbreviated decimal notation with a numeric suffix (ie. "k", "M", "B", etc). This is an alias of the formatAbbreviate function.

This is a global function.

---

d3plus.formatAbbreviate(n, locale) <>

Formats a number to an appropriate number of decimal places and rounding, adding suffixes if applicable (ie. 1200000 to "1.2M").

This is a global function.

Param	Type	Description
n	Number | String	The number to be formatted.
locale	Object | String	The locale config to be used. If value is an object, the function will format the numbers according the object. The object must include suffixes, delimiter and currency properties.

---

d3plus.formatDate(d, dataArray, [formatter]) <>

A default set of date formatters, which takes into account both the interval in between in each data point but also the start/end data points.

This is a global function.

Param	Type	Default	Description
d	Date		The date string to be formatted.
dataArray	Array		The full array of ordered Date Objects.
[formatter]	function	d3.timeFormat	An optional instance of d3.timeFormat to be used for localization.

---

d3plus.formatDefaultLocale(definition) <>

An extension to d3's formatDefaultLocale function that allows setting the locale globally for formatters.

This is a global function.

---

formatLocale <>

A set of default locale formatters used when assigning suffixes and currency in numbers.

Name	Default	Description
separator	""	Separation between the number with the suffix.
suffixes	[]	List of suffixes used to format numbers.
grouping	[3]	The array of group sizes,
delimiters	{thousands: ",", decimal: "."}	Decimal and group separators.
currency	["$", ""]	The currency prefix and suffix.

This is a global namespace.

---

_{Documentation generated on Thu, 18 Jan 2024 16:11:21 GMT}