Related Articles

Related Articles

D3.js interpolateSpectral() Function
  • Last Updated : 19 Aug, 2020

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :