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:
Is this scale "standard" in the mathematical world?
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:
Is this scale "standard" in the mathematical world?
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.
Share Improve this question edited Apr 13, 2017 at 12:55 CommunityBot 11 silver badge asked Jun 16, 2014 at 15:35 AdrianoAdriano 20k19 gold badges105 silver badges140 bronze badges 5- 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
Reset to default 9Polylinear 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).