Package Exports
- d3plus-format
- d3plus-format/es/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (d3plus-format) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 theformatAbbreviate
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 theformatAbbreviate
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.