d3.js - show large numbers on axis in abbreviated form

Question

Is there a way to abbreviate large numbers on a d3.js axis? I recall seeing a helper method online but cannot find it again. I would like to abbreviate large numbers to reduce my chart margins and make it easier to read.

i.e. 1,000,000 = 1M etc

If anyone can post a link to the d3.js helper class it will be appreciated.

Interval

What you're looking for is 'SI prefix', and have a look at format-a-number-with-si-prefix-with-fixed-number-of-decimals and D3 formatting. – Googolplex

Thanks havrac for pointing me in the right direction. – Interval

Answer 1

Hi check this link: http://bl.ocks.org/zanarmstrong/05c1e95bf7aa16c4768e. Maybe this can help you.

For the axis you can use the following.

chart.yAxis().ticks(5).tickFormat(d3.format("s"));

I used dc.js and d3.js

Hope this can help you

Agnes

Don't use links. Explain what the content behind the link explains. – Batting

OK, maybe the rules are don't use a link without explanation but your link did help. Thanks. – Tarsia

Answer 2

Check out this link https://bl.ocks.org/mbostock/9764126

This worked for me for d3 v4:

function make_y_gridlines() {       
        return d3.axisLeft(yScale)
               .ticks(10,"s")

}

Splashdown