The Interpolate() function in D3.js is used to interpolate the two given values. In the case of colors, it is used to form a third color from the given two colors.
Syntax:
d3.interpolate(a, b);
Parameters: This function accepts two parameters as mentioned above and describe below.
- a: It is an arbitrary value.
- b: It is an arbitrary value.
Return Values: It returns a function.
Example 1: When colors are given as a parameter.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head> <body> <!--fetching from CDN of D3.js --> <script type="text/javascript" </script> <script> let intr = d3.interpolate("red", "green") 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 number is given as a parameter.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head> <body> <!--fetching from CDN of D3.js --> <script type="text/javascript" </script> <script> let intr = d3.interpolate(41, 550) console.log("Type of returned function is: ", typeof (intr)); console.log(intr(0.2)) console.log(intr(0.3)) console.log(intr(0.4)) </script> </body> </html> |
Output:
Example 3: When an array is given as parameter:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head> <body> <!--fetching from CDN of D3.js --> <script type="text/javascript" </script> <script> let intr = d3.interpolate( [19, 33, 2], [1, 12, 10]) 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:
