Giter Club home page Giter Club logo

d3plus-format's Introduction

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.