Home > Software engineering >  Trying to understand how log scale in d3.js works
Trying to understand how log scale in d3.js works

Time:02-12

I am trying to understand why the equation doesn't give the desired result.

I am unable to decode how this returns 90.96? Even with using the equation log y = m log x log k I can't get the same result. using ∆log y divided by ∆log x to get m.

const logScale = d3.scaleLog()
                   .domain([1, 1000])
                   .range([10, 100]);

console.log(logScale(500)); // returns 90.96

CodePudding user response:

Log scales have the form y = m log(x) b. By default it's a base 10 log. With your scale

const logScale = d3.scaleLog()
  .domain([1, 1000])
  .range([10, 100]);

m = 30 and b = 10. So you can think of it as

function logScale(x) {
  return 30 * Math.log10(x)   10;
}

Edit: explaining how I got the b = 10 and m = 30

From the domain and range, we know that logScale(1) === 10. We also know that Math.log10(1) === 0. Therefore, when x is 1 and y is 10, the equation y = m * log(x) b becomes 10 = m * 0 b, so we know that b is 10. Now we can plug another (x, y) pair in to get m. For example, we can choose the max values from the domain and range: 100 = m * log(1000) 10. Thus, m = 90 / log(1000), which is 30.

  • Related