Skip to content
Related Articles

Related Articles

Improve Article

D3.js interpolateBlues() Function

  • Last Updated : 14 Aug, 2020

The d3.interpolateBlues() function in d3.js is used to return an RGB string of color that corresponds to the sequential color scheme of “Blues”.

Syntax:

d3.interpolateBlues(t);

Parameters: This function takes only one parameter which is given above and described below:

  • t: This is a number in the range of 0 and 1 inclusively.

Return Values: This function returns an RGB string of color.

Below given are a few examples of the above-given function.



Example 1:




<!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
</style
<body>
<!--Fetching from CDN of D3.js -->
  <script src
  </script
  <script src=
  </script>
  <script src=
  </script>
  <script src=
  </script>
  <script
    console.log(d3.interpolateBlues(0));
    console.log(d3.interpolateBlues(0.4));
    console.log(d3.interpolateBlues(0.2));
    console.log(d3.interpolateBlues(0.25));
    console.log(d3.interpolateBlues(0.54));
    console.log(d3.interpolateBlues(0.85));
    console.log(d3.interpolateBlues(2));
    console.log(d3.interpolateBlues(1));
  </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: 90px; 
  height: 50px; 
  float: left;
</style
<body
  <h2>D3.interpolateBlues() </h2>
<div class="box1"
  <span>
  </span>
</div
<div class="box2"
  <span
  </span>
</div
<div class="box3"
  <span
  </span>
</div
<div class="box4"
  <span
  </span>
</div
<div class="box5"
  <span
  </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
    // Values of t is 0.1
    let color1= 
    d3.interpolateBlues(0.1); 
    // Values of t is 0.3
    let color2= 
    d3.interpolateBlues(0.3); 
    // Values of t is 0.5
      let color3= 
    d3.interpolateBlues(0.5); 
    // Values of t is 0.8
      let color4= 
    d3.interpolateBlues(0.8); 
    // Values of t is 1.0
      let color5= 
    d3.interpolateBlues(1.0);
   
    // 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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :