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 wele.

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

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 wele.

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

• javascript
• d3.js

• Have you considered using logarithmic scales instead? – Oleg Commented Jun 16, 2014 at 15:41
• Yes, I actually had the same idea at first. I did get it to work with my log scale (default base, so base 10). But this is not "good enough"... – Adriano Commented Jun 16, 2014 at 15:43
• Been trying but can't get this to work. Could you modify the scale on the Y axis on this example jsbin./isuris/484 to show how I could similarly use ordinal? – Adriano Commented Jun 16, 2014 at 16:03
• My initial suggestion was bad. I'll try to look into it later this evening, but I think it's definitely possible. – Oleg Commented Jun 16, 2014 at 16:08
• Alright, thx. I'll keep investigating on my side & will update this post if I find a solution. – Adriano Commented Jun 16, 2014 at 16:09

1 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 putation of both arrays is trivial (note that they must be of equal length).