Thursday, September 25, 2025
HomeLanguagesJavascriptD3.js schemeReds Function

D3.js schemeReds[] Function

The d3.schemeReds[] function in D3.js is used to return a particular color from the “Reds” sequential color scheme which is returned as a HEX string.

Syntax:

d3.schemeReds[k]

Parameters: This function accepts a single parameter as mentioned above and described below:

  • k: “k” is a number ranging from 3 to 9.

Return Values: It returns a HEX 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>D3.js schemeReds[] Function</title
    <script src= "https://d3js.org/d3.v4.min.js"></script
    <script src= "https://d3js.org/d3-color.v1.min.js"></script
    <script src= "https://d3js.org/d3-interpolate.v1.min.js"></script
    <script src= "https://d3js.org/d3-scale-chromatic.v1.min.js"></script
</head
<body
    <center>
    <h1 style="color:green;">GeeksForGeeks</h1>
      
    <h3>D3.js schemeReds[] Function</h3>
      
    <script
        document.write(d3.schemeReds[6][0]+"<br>"); 
        document.write(d3.schemeReds[6][1]+"<br>");
        document.write(d3.schemeReds[6][2]+"<br>");
        document.write(d3.schemeReds[6][3]+"<br>");
        document.write(d3.schemeReds[6][4]+"<br>");
        document.write(d3.schemeReds[6][5]);
    </script
    </center>
</body
</html>


Output:

Example2:




<!DOCTYPE html> 
<html lang="en"
<head
    <meta charset="UTF-8" /> 
    <meta name="viewport"
        path1tent="width=device-width,  
        initial-scale=1.0"/> 
          
    <title>D3.js schemeReds[] Function</title
    <script src= "https://d3js.org/d3.v4.min.js"></script
    <script src= "https://d3js.org/d3-color.v1.min.js"></script
    <script src= "https://d3js.org/d3-interpolate.v1.min.js"></script
    <script src= "https://d3js.org/d3-scale-chromatic.v1.min.js"></script
</head
<style
    div { 
        padding: 10px; 
        width: fit-content; 
        height: 20px; 
    
</style
<body
    <center>
    <h1 style="color:green;">GeeksForGeeks</h1>
      
    <h3>D3.js schemeReds[] Function</h3>
      
    <div class="b1"
        <span
            D3.schemeReds[6][0] 
        </span
    </div
    <div class="b2"
        <span
            D3.schemeReds[6][1]  
        </span
    </div
    <div class="b3"
        <span
            D3.schemeReds[6][2] 
        </span
    </div
    <div class="b4"
        <span
            D3.schemeReds[6][3]  
        </span
    </div
    <div class="b5"
        <span
            D3.schemeReds[6][4] 
        </span
    </div
    <div class="b6"
        <span
            D3.schemeReds[6][5]  
        </span
    </div
      
    <script
        // Array of colors is given 
        let color1 = d3.schemeReds[6][0]; 
        let color2 = d3.schemeReds[6][1]; 
        let color3 = d3.schemeReds[6][2]; 
        let color4 = d3.schemeReds[6][3]; 
        let color5 = d3.schemeReds[6][4]; 
        let color6 = d3.schemeReds[6][5]; 
  
        let b1 = document.querySelector(".b1"); 
        let b2 = document.querySelector(".b2"); 
        let b3 = document.querySelector(".b3"); 
        let b4 = document.querySelector(".b4"); 
        let b5 = document.querySelector(".b5"); 
        let b6 = document.querySelector(".b6"); 
          
        b1.style.backgroundColor = color1; 
        b2.style.backgroundColor = color2;
        b3.style.backgroundColor = color3; 
        b4.style.backgroundColor = color4;
        b5.style.backgroundColor = color5; 
        b6.style.backgroundColor = color6;
    </script
    </center>
</body
</html>


Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32319 POSTS0 COMMENTS
Milvus
84 POSTS0 COMMENTS
Nango Kala
6682 POSTS0 COMMENTS
Nicole Veronica
11854 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11910 POSTS0 COMMENTS
Shaida Kate Naidoo
6795 POSTS0 COMMENTS
Ted Musemwa
7071 POSTS0 COMMENTS
Thapelo Manthata
6753 POSTS0 COMMENTS
Umr Jansen
6761 POSTS0 COMMENTS