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:
