d3.format() for number abbreviations (similar to SI-prefix)

[jml6m]

I'm wondering if anyone else would find a use for a feature like this. For example, SI-prefix will condense large (or small) numbers and add the appropriate metric system character:

var parse = d3.format("s");

console.log(parse(5000000000)); //5G
console.log(parse(5000000)); //5M
console.log(parse(.0005)); //500µ

I want to create a similar function, let's just call it d3.format("a") that will condense numbers to human readable abbreviations, so long numbers are more easily inserted into charts and axes.

var parse = d3.format("a");

console.log(parse(5000000000)); //5B
console.log(parse(5000000)); //5M
console.log(parse(5000)); //500k

Possible prefixes could be 'T' for trillion, 'B' for billion, 'M' for million, 'k' for thousand, plus any others we may need. I don't mind writing the functionality if @mbostock thinks it's a good idea. I know the argument against it is to just convert the number yourself, but then the prefix isn't being decided in real time, or you'd have to have a lot of separate if/else cases.

[vichido]

Hi @jml6m ,

I think your idea is great, however the challenge here is to find a standar on "human readable" abbreviations. Not only for "B"(billion in short scale) _vs_ "TM" (thousand million in long scale) but to differentiate "Q" (quadrillion) _vs_ "Q" (quintillion) or "S" (sextillion) _vs_ "S" (septillion) for example.

Another approach could be to add a feature to customize d3_formatPrefixes. That way you could adapt the values to your needs.

[stikeleathersl]

I would love this feature!

[mbostock]

Hmm. One way you could do this would be to remap the SI prefix after invoking the format. For example:

var formatSi = d3.format(".3s");

function formatAbbreviation(x) {
  var s = formatSi(x);
  switch (s[s.length - 1]) {
    case "G": return s.slice(0, -1) + "B";
  }
  return s;
}

formatAbbreviation(5000000000); // 5.00B
formatAbbreviation(5000000); // 5.00M
formatAbbreviation(5000); // 5.00k

(Note, that’s 5.00k, not 500k as in your example. I think 5.00k is correct?)

Another way might be to localize the list of SI prefixes, rather than having a prefixes global. (See src/locale.js in d3-format.) But, do you really want to specify the full list of 17 prefixes this way? Seems like you only care about 3 or 4… assuming you are dealing with dollar amounts, say, and not arbitrary numbers.

The other simple thing you can do is to just roll your own conditional format.

var formatNumber = d3.format(".0f"),
    formatBillion = function(x) { return formatNumber(x / 1e9) + "B"; },
    formatMillion = function(x) { return formatNumber(x / 1e6) + "M"; },
    formatThousand = function(x) { return formatNumber(x / 1e3) + "k"; };

function formatAbbreviation(x) {
  var v = Math.abs(x);
  return (v >= .9995e9 ? formatBillion
      : v >= .9995e6 ? formatMillion
      : formatThousand)(x);
}

formatAbbreviation(5000000000); // 5B
formatAbbreviation(5000000); // 5M
formatAbbreviation(5000); // 5k

I mean, yeah, your formatAbbreviation has to deal with rounding and is hard-coded to zero decimal places (in this case), but you can probably guess how to improve that if you need it… or look at how formatPrefix is implemented.

[pdlarue]

Not only YES! But Hell YES!!! I do wish that D3 contained this method: d3.format("a")

Why doesn't it?

[cozzbie]

Sooooo are we going to get formatters for k(000), M(000,000) and B(000,000,000) or nah???

Maybe worthy of note is to place some explanatory text letting people know that d3 serves as a "metric system" type formatter primarily and that support for millions(M) and billions(B) etc aren't supported out-of-the-box.

Thanks for the snippet @mbostock

[pdlarue]

For those who are looking for a solution. We replaced .tickFormat(d3.dormat("s")); with the following function: .tickFormat (function (d) { return formatValue(d).replace('G', 'B'); }); Worked like a charm!