d3.js : non linear graph axis

Question

I am trying to add a custom scale on an axis, such as below

The idea is that a tick is always 2 times bigger than a previous tick.

My understanding is that this is a custom scale. I did a bit of research & could not find anything like it.

So I guess my question is actually two questions:

1. Is this scale "standard" in the mathematical world?

2. Is this possible to implement this using d3.js ?

Any link to related tutorial or live example (ie. jsFiddle) is also welcome.

EDIT: I have now asked a related question on mathematica.stackexchange.com to help me find the solution to this problem & will update this post after I have tried a few things.

Answer 1

Polylinear scales can be used in this scenario. From linear scale api documentation:

Although linear scales typically have just two numeric values in their domain, you can specify more than two values for a polylinear scale. In this case, there must be an equivalent number of values in the output range. A polylinear scale represents multiple piecewise linear scales that divide a continuous domain and range.

Here's an example that fits your requirements:

// Your custom scale:
var customScale = d3.scale.linear()
        .domain([125,250,500,1000,2000])
        .range([0,50,100,150,200]);

// The axis uses the above scale and the same domain:
var axis = d3.svg.axis()
        .scale(customScale)
        .tickValues([125,250,500,1000,2000]);

Knowing the number of ticks as well as the extents of domain and range, the computation of both arrays is trivial (note that they must be of equal length).