D3.js interpolateNumber() Function

Last Updated : 28 Jul, 2020

The d3.interpolateNumber() Function is used to return the interpolator between two given numbers. It is almost the same as d3.interpolate() function except that it takes only numbers as parameters.

Syntax:

d3.interpolateNumber(a,b);

Parameters: This function accepts two parameters as mentioned above and described below.

a: It is any number on the number line.
b: It is any number on the number line.

Return Values: This function returns interpolator between two given numbers.

Below given are a few Examples of d3.interpolateNumber() function

Example 1:

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0"> 
  <title>D3.js d3.interpolateNumber() Function</title> 
</head> 
<style> 
</style> 
<body> 
  <!--Fetching from CDN of D3.js -->
  <script type = "text/javascript" src =  
"https://d3js.org/d3.v4.min.js"> 
  </script> 
  <script> 
    let intr = d3.interpolateNumber(2458,9586) 
    console.log("Type of returned function is: ",typeof(intr)); 
    console.log(intr(0.1)) 
    console.log(intr(1)) 
    console.log(intr(0.4)) 
  </script> 
</body> 
</html> 

Output:

Example 2: When the number given is negative and one of them is not a number.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0"> 
  <title>D3.js d3.interpolateNumber() Function</title> 
</head> 
<style> 
</style> 
<body> 
  <!--Fetching from CDN of D3.js -->
  <script type = "text/javascript" src =  
"https://d3js.org/d3.v4.min.js"> 
  </script> 
  <script> 
    console.log(d3.interpolateNumber(-263,586)(0.2)) 
    console.log(d3.interpolateNumber(-263,"green")(0.1)) 
    console.log(d3.interpolateNumber("yellow","red")(0.1)) 
  </script> 
</body> 
</html> 