I have data points on a line, when the cursor passes over them, a tooltip div appears with data about that point. The code for the html of the div is below.

    div.html("The Avengers Box Office: $" + d.Avengers) 

d.Avengers returns 207438708 as a string. So is there any way to add mas to large numbers in d3.js?

I have values ranging from thousands to hundreds of millions and it can be tricky to read them.

Thanks

I have data points on a line, when the cursor passes over them, a tooltip div appears with data about that point. The code for the html of the div is below.

    div.html("The Avengers Box Office: $" + d.Avengers) 

d.Avengers returns 207438708 as a string. So is there any way to add mas to large numbers in d3.js?

I have values ranging from thousands to hundreds of millions and it can be tricky to read them.

Thanks

• javascript
• d3.js
• string-formatting

• can u show some example? – iJade Commented Mar 13, 2013 at 14:27

3 Answers 3

Solution: You can't add mas using d3 but you can do via plain JavaScript: Number.toLocaleString()

// convert Avengers to a Number and use the toLocaleString on it
div.html("The Avengers Box Office: $" + (1*d.Avengers).toLocaleString() ) 

Advanced Solution: If your main problem is that numbers are just too big (even with mas), you need write some really cool conversion functions for your numbers that

1. count the decimals and
2. choose a really nice format to display nice numbers

Check out a somehow related answer where I added some code to do that, converting big numbers to "kilo", "mega", "giga", and "terra". You might want to adopt that.

Thanks for the replies guys. I found the answer here. Its not adding mas, but its adding M or K after millions or thousands. Which is actually better I think.

https://groups.google./forum/?fromgroups=#!topic/d3-js/YFsSmzu4JZk

d3.format(',')(1999222) //// output=1,999,222