Pauline Pauline - 1 month ago 12
Javascript Question

d3 logarithmic scale returns NaN

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?

Answer

Change your domain:

var myLogScale = d3.scale.log()
      .domain([0.1, 100])//domain doesn't include zero
      .range([50, 1150]);

console.log(myLogScale(71));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

The explanation is simple: log(0) is not defined. In base 10, for instance, log(0) is a number x so that 10 raised to the power of x 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:

console.log(Math.log(0))//returns "-Infinity"

Thus, in JavaScript, log(0) is negative infinity, or minus infinity.

That being said:

a log scale must have either an exclusively-positive or exclusively-negative domain; the domain must not include or cross zero.