Awesome
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. :beers:
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 theformatAbbreviatefunction.
- formatAbbreviate - Formats a number to an appropriate number of decimal places and rounding, adding suffixes if applicable (ie.
1200000to"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. |
<a name="format"></a>
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 theformatAbbreviatefunction.
This is a global function.
<a name="formatAbbreviate"></a>
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 | <code>Number</code> | <code>String</code> | The number to be formatted. |
| locale | <code>Object</code> | <code>String</code> | 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. |
<a name="formatDate"></a>
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 | <code>Date</code> | The date string to be formatted. | |
| dataArray | <code>Array</code> | The full array of ordered Date Objects. | |
| [formatter] | <code>function</code> | <code>d3.timeFormat</code> | An optional instance of d3.timeFormat to be used for localization. |
<a name="formatDefaultLocale"></a>
d3plus.formatDefaultLocale(definition) <>
An extension to d3's formatDefaultLocale function that allows setting the locale globally for formatters.
This is a global function.
<a name="formatLocale"></a>
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.