converting numbers on y axis to string with K for

Question

i am using d3.js charts to plot y axis and x axis. It's working fine, but the values in y axis you can say range is say 0 to 10000 and I want if the number is greater than thousand it will come with K.
if the number is 1000 it will show 1K, for 15000 it will show on y axis ticks 15K.

How to do that? I am not able to manupulate y.domain and range functions for the string values.

var y = d3.scale.linear().range([ height, 0 ]);
y.domain([
  0,
  d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.count; }); })
]);

Answer 1

If you wish to edit the labels on the ticks you can use the tickFormat function.

For example, your y axis function would look something like this:

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(function(tickVal) {
        return tickVal >= 1000 ? tickVal/1000 + "K" : tickVal;
    });

Then you just have to call it. Assuming you have a variable called svg that references your svg chart:

svg.append("g)
    .call(yAxis);

To make things a little clearer I've created this jsfiddle based on this tutorial, adapted to display axis tick labels in the way you describe above if the value is greater than or equal to 1000. If you run it a few times you will see how different axis values are handled.

Answer 2

From API Reference, we see d3.formatPrefix

var prefix = d3.formatPrefix(1.21e9);
console.log(prefix.symbol); // "G"
console.log(prefix.scale(1.21e9)); // 1.21

We can use it this way

var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(5)
    .tickFormat(function (d) {
        var prefix = d3.formatPrefix(d);
        return prefix.scale(d) + prefix.symbol;
    })
    .orient("left");

However, in case this is exactly what you mean, we can simplify using d3.format("s")

var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(5)
    .tickFormat(d3.format("s"))
    .orient("left");

Answer 3

You're looking for tickFormat on the axis object.

var svgContainer = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 100);

//Create the Scale we will use for the Axis
var axisScale = d3.scale.linear()
    .domain([0, 2000])
    .range([0, 600]);

//Create the Axis
var xAxis = d3.svg.axis()
    .scale(axisScale)
    .tickFormat(function (d) {
      if ((d / 1000) >= 1) {
        d = d / 1000 + "K";
      }
      return d;
    });

var xAxisGroup = svgContainer.append("g")
    .call(xAxis);

Check it here: http://jsfiddle.net/3CmV6/2/

This will give you what you want, but I recommend checking the suggestion from robermorales to use d3.format('s') .

Answer 4

Try this

      axis: {
                y: {
                    tick: {
                        format: d3.format("$.2s")
                    }
                }
            }

Answer 5

This is what i implemented

var yAxis = d3.svg.axis().scale(y).ticks(5).
tickFormat(function (d) {
    var array = ['','k','M','G','T','P'];
    var i=0;
    while (d > 1000)
    {
        i++;
        d = d/1000;
    }

    d = d+' '+array[i];

    return d;}).
orient("left");

it will work for even more than thousand ...

Answer 6

A concise approach:

var myTickFormat = function (d) {//Logic to reduce big numbers
  var limits = [1000000000000000, 1000000000000, 1000000000, 1000000, 1000];
  var shorteners = ['Q','T','B','M','K'];
  for(var i in limits) {
    if(d > limits[i]) {
      return (d/limits[i]).toFixed() + shorteners[i];
    }
  }
  return d;
};

spenderRowChart
    .xAxis().ticks(3)
    .tickFormat(myTickFormat);

This returns 1K for 1000, 1M for 1,000,000, and so on.
Note: Beyond quadrillion, you may wanna go through Number.MAX_SAFE_INTEGER.