d3.interpolate() Function
Last Updated :
21 Jul, 2020
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>
<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>
<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>
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...