I have issues creating a logarithmic scale in d3. The scale works fine if it is set to linear.
This works:
var myLinScale = d3.scale.linear()
.domain([0, 100])
.range([50, 1150]);
console.log(myLinScale(71)); //output = 831
However, this doesn't work:
var myLogScale = d3.scale.log()
.domain([0, 100])
.range([50, 1150]);
console.log(myLogScale(71)); //output = NaN
What is wrong with the logarithmic scale?
New solution (using D3 v5.8)
After more than 2 years this question finally has a D3-based answer that doesn't suggest removing 0 from the domain, as I did in my original answer (see below).
This is possible due to the new Symlog scale in D3 v5.8, based on a by-symmetric log transformation, which allows 0 in the domain.
So, using your domain and range without any modification:
Or even shorter, with the new scale constructors in D3 v5.8:
Original answer (for D3 v3)
Change your domain so it doesn't include or cross zero:
In the above demo I'm using
1e-6
, which is0.000001
.Explanation:
The logarithm of zero is undefined (or not defined). In base 10, for instance, log(0) is a number
x
so that 10 raised to the power ofx
is zero... that number, of course, doesn't exist. The limit, however, when we approach zero from the positive side is minus infinity.In pure JavaScript:
Thus, in JavaScript,
log(0)
is negative infinity, or minus infinity.That being said, according to the API: