d3 / d3-format

Format numbers for human consumption.
https://d3js.org/d3-format
ISC License
625 stars 103 forks source link

Add SI-like currency format directive? #71

Open JelleBlaauw opened 5 years ago

JelleBlaauw commented 5 years ago

When I execute the following:

[5,10,15,20].map(v => format('$.1s')(v * 1E9))

it returns:

["$5G", "$10G", "$20G", "$20G"]

However, to me it would make more sense if the combination of SI and currency would not result in G for giga, but B for billion, preferably localized.

Is support for this planned? Thanks.

mbostock commented 5 years ago

This is the intended behavior for s, yes; B is not an SI prefix.

There are currency equivalents in SI for ones (none), thousands (k ↦ K), millions (M), billions (G ↦ B) and trillions (T), but there aren’t equivalents for values outside this range. There’s no common symbol for a quadrillion, for instance, which would use the SI peta prefix P. (Also in finance MM is commonly used instead of M for millions, coming from the Roman for a thousand thousands.)

To support this properly we’d need a different directive than s to format currencies.

curran commented 5 years ago

FWIW replacing "G" with "B" in formatters is something I end up doing frequently.

It would be great to have somthing with that baked in.

JelleBlaauw commented 5 years ago

@mbostock I fully agree with that B for billion is not an SI prefix, and that s shouldn't have to be altered, but instead, a new directive should be added.

About your comment about MM instead of M, I do agree, but I think this also depends on locale, hence my initial note about localization.

mbostock commented 5 years ago

I’ll also mention that number.toLocaleString supports currency formatting, although it does not appear to support abbreviated formats such as millions or billions.

https://observablehq.com/@mbostock/number-formatting

g3o2 commented 5 years ago

I wonder whether it would make sense to provide a user property to allow the localising of the SI letters via the d3.formatLocale() function. A user would provide an array of values to applied as a sort of "localised (or rather customised) version of SI", the default being SI itself. For the above request, this would then translate to the following user specification:

numberPrefixes : ["y","z","a","f","p","n","µ","m","","k","M","B","T","P","E","Z","Y"]
mrlubos commented 5 years ago

+1

mbostock commented 5 years ago

Please don’t reply with “+1”. If you want to vote for this issue, click the plus smiley face +😄 at the top of this issue, and then click the 👍 button.

curran commented 4 years ago

What might a solution look like? Perhaps a new thing that is similar to s, but a different letter?

Perhaps

const formatter = number => format('.1s')(number).replace('G', 'B');

could ideally be replaced with

const formatter = format('.1r');

Just picking r out of a hat - could be any letter. Would this approach be reasonable?

Also noting that this issue is not really specific to currency (the "currency" in the title threw me off) - this issue is about replacing G with B generally, I believe.

mbostock commented 4 years ago

r is already used; see the README. But, there are other letters free. 😄

In addition to choosing a letter for the format directive, someone needs to propose a precise definition for this feature. My impression is that this will only support K, M, B and T units? And any value outside that range will behave like the g directive, I suppose?

curran commented 4 years ago

Strawman proposal: exactly the same behavior as s, with the only difference being G switching to B.

mbostock commented 4 years ago

You’d want “K” instead of “k” too, though, no?

Personally, I think it’d be surprising to have SI prefixes mixed in with units that are not SI. Would you rather see “$1,000T” (one thousand trillion dollars) or “$1P” (one petadollars)?

curran commented 4 years ago

Digging into this a bit, found some interesting things:

I get what you're saying re: values outside the range of T. The question is how to handle P (Peta-, Quadrillion), E (Exa-, Quintillion), Z (Zetta-, Sextillion), Y (Yotta-, Septillion). Indeed, maybe best leave these out, as you're right that having mixed SI plus this other thing with B (which I don't even know what it is called - "Ordinary Usage"?) would be super confusing.

OK - slightly more nuanced proposal for consideration:

curran commented 4 years ago

And what is this format even called? Conventional written form? I'm hard-pressed to find any standard definition for this anywhere, aside from people reporting things they've seen in common use in documents over the years. Also this is definitely English-specific - I have no idea how this plays out for other languages, which is an additional challenge.

Thanks for taking the time to consider all these things!

curran commented 4 years ago

Haha we can call it "Excel Format", as Excel has this kind of formatting built-in.

image

Interestingly, several games have faced this challenge and documented their solutions (images are links).

image

image

image

I wish we could find an authoratative source on this - like a reputable dictionary or writing style guide.

curran commented 4 years ago

This is a good one - Language Matters: Millions, Billions and Other Large Numbers

The most commonly seen short forms for thousand, million, billion and trillion in North America and the United Kingdom, respectively, are outlined in the table below.

image

Of the style guides that address spacing in this context, most (AP Stylebook, Chicago Manual of Style, Canadian Style, The Economist Style Guide) say to leave no space (100bn, for example), although it is also common in books and newspaper articles to see the abbreviation preceded by a space.

curran commented 4 years ago

From The Economist Style Guide:

Use m for million, bn for billion and trn for trillion.

The AP Stylebook has nothing in terms of abbreviations.

curran commented 4 years ago

FWIW this is what I'm using now to solve this:

const siFormat = format('.3~s');
export const formatBigNumber = number =>
  siFormat(number).replace('G', 'B').replace('k', 'K');
curran commented 4 years ago

This PR looks pretty close woohoo! https://github.com/d3/d3-format/pull/81