Formatting Numbers the Easy Way

D3 has an awesome number formatting function that I discovered only after hacking my own. My first approach was to use string and array manipulation to convert 1234567890 to 1,234,567,890:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function numberSmoothing(value) {
  // split the number into a character array and reverse it
  reversedNumber = (value).toString().split('').reverse();

  // ["0", "9", "8", "7", "6", "5", "4", "3", "2", "1"]

  // push the numbers onto another array in groups of 3 and add a comma
  chunkedNumber = [];
  while(reversedNumber.length > 3) {
    var numberChunk = reversedNumber.splice(3);
    chunkedNumber.push(reversedNumber.join('') + ',');
    reversedNumber = numberChunk;
  }

  // push the remaining digits onto the array
  chunkedNumber.push(reversedNumber.join(''));

  // ["098,", "765,", "432,", "1"]

  // reverse each of the strings in the array and rejoin them
  for(var j = 0; j < chunkedNumber.length; j++){
    chunkedNumber[j] = chunkedNumber[j].split('').reverse().join('');
  }

  // [",890", ",567", ",234", "1"]

  return chunkedNumber.reverse().join('');
}

> numberSmoothing(1234567890)
"1,234,567,890"

While it was a fun mental exercise to implement number formatting, I stumbled across this handy d3 function after I was already done:

1
2
3
> var format = d3.format(",");
> format(1234567890);
"1,234,567,890"

As it turns out, any way one might want to format a number has already been implemented in d3. It is similar to the mini-formatting language from python:

1
[‚Äč[fill]align][sign][symbol][0][width][,][.precision][type]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// add commas for the thousands separator
> var format = d3.format(',')
format(1234567890)
"1,234,567,890"

// add a sign for positive and negative numbers
> var format = d3.format('+,')
> format(1234567890)
"+1,234,567,890"

> format(-1234567890)
"-1,234,567,890"

// add a currency sign
> var format = d3.format('+$,')
format(1234567890)
"+$1,234,567,890"

// as a percentage
> var format = d3.format('p')
format(1/6)
"16.666666666666664%"

// as a rounded percentage
> var format = d3.format('%')
> format(1/6)
"17%"

// as a percent rounded to a single sig fig
> var format = d3.format('.1%')
> format(1/6)
"16.7%"

// as a rounded value
> var format = d3.format('.2r')
> format(123.456)
"120"

>format(123456789.66)
"120000000"

// as a rounded, comma separated value
> var format = d3.format(',.2r')
> format(123456789.66)
"120,000,000"

Awesome.