The d3.interpolateSpectral() function is used to return the color from the “Spectral” diverging color scheme. The color returned by this function is in the form of an RGB string.
Syntax:
d3.interpolateSpectral(t);
Parameters: This function takes only one parameter as given above and described below.
- t: This parameter takes a number that lies in range 0 to 1.
Return Values: This function returns an RGB string.
Below given are a few examples of the function given above.
Example1:
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport"
path1tent=" width = device -width,
initial-scale = 1 .0"/>
< title >Geeks for geeks</ title >
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< style >
h2{
color: green;
}
p{
line-height: 1px;
}
</ style >
< body >
< h2 >Geeks for geeks</ h2 >
< p >Different colors from interpolateSpeactral(t) are: </ p >
< script >
document.write(
"< p >< b >"+d3.interpolateSpectral(0.9)+"</ p ></ b >");
document.write(
"< p >< b >"+d3.interpolateSpectral(0.5)+"</ p ></ b >");
document.write(
"< p >< b >"+d3.interpolateSpectral(0.4)+"</ p ></ b >");
document.write(
"< p >< b >"+d3.interpolateSpectral(0.3)+"</ p ></ b >");
document.write(
"< p >< b >"+d3.interpolateSpectral(0.2)+"</ p ></ b >");
document.write(
"< p >< b >"+d3.interpolateSpectral(0.1)+"</ p ></ b >");
</ script >
</ body >
</ html >
|
Output:
Example 2:
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< style >
div{ padding:6px;
text-align: center;
vertical-align: middle;
display: flex;
justify-content: center;
width: fit-content;
margin-top: 2px;
height: 20px;
} </ style >
< body >
< h2 >D3.interpolateSpectral(t) </ h2 >
< div class = "box1" >
< span >d3.interpolateSpectral(0.5)</ span >
</ div >
< div class = "box2" >
< span >d3.interpolateSpectral(0.4)</ span >
</ div >
< div class = "box3" >
< span >d3.interpolateSpectral(0.3)</ span >
</ div >
< div class = "box4" >
< span >d3.interpolateSpectral(0.2)</ span >
</ div >
< div class = "box5" >
< span >d3.interpolateSpectral(0.1)</ span >
</ div >
<!--Fetching from CDN of D3.js --> < script src =
</ script >
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
< script >
// creating different colors for different value of k
let color1=
d3.interpolateSpectral(0.5);
let color2=
d3.interpolateSpectral(0.4);
let color3=
d3.interpolateSpectral(0.3);
let color4=
d3.interpolateSpectral(0.2);
let color5=
d3.interpolateSpectral(0.1);
// Selecting Div using query selector
let box1=document.querySelector(".box1");
let box2=document.querySelector(".box2");
let box3=document.querySelector(".box3");
let box4=document.querySelector(".box4");
let box5=document.querySelector(".box5");
// Setting style and BG color of the particular DIVs
box1.style.backgroundColor=color1;
box2.style.backgroundColor=color2;
box3.style.backgroundColor=color3;
box4.style.backgroundColor=color4;
box5.style.backgroundColor=color5;
</ script >
</ body >
</ html >
|
Output: