D3.js schemeSet1 Method

0 0 2 minutes read

The d3.schemeSet1 Method in D3.js is used to return an array of nine categorical colors which is returned as RGB hexadecimal strings.

Syntax:

d3.schemeSet1

Parameters: This method does not accept any parameter.

Return Values: It returns an RGB hexadecimal string.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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 schemeSet1 Method</h3> 
      
    <script> 
      document.write(d3.schemeSet1[0] + "<br>"); 
      document.write(d3.schemeSet1[1] + "<br>"); 
      document.write(d3.schemeSet1[2] + "<br>"); 
      document.write(d3.schemeSet1[3] + "<br>"); 
      document.write(d3.schemeSet1[4] + "<br>"); 
      document.write(d3.schemeSet1[5] + "<br>"); 
      document.write(d3.schemeSet1[6] + "<br>"); 
      document.write(d3.schemeSet1[7] + "<br>"); 
      document.write(d3.schemeSet1[8] + "<br>"); 
    </script> 
  </center> 
</body> 
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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> 
  
    <style> 
        div { 
            padding: 3px; 
            width: fit-content; 
            height: 20px; 
            width: 250px; 
        } 
    </style> 
</head> 
  
<body> 
  <center> 
    <h1 style="color:green;">GeeksForGeeks</h1> 
  
    <h3>D3.js schemeSet1 Method</h3> 
  
    <div class="b1"> 
      <span> 
        D3.schemeSet1[0] 
      </span> 
    </div> 
    <div class="b2"> 
      <span> 
        D3.schemeSet1[1] 
      </span> 
    </div> 
    <div class="b3"> 
      <span> 
        D3.schemeSet1[2] 
      </span> 
    </div> 
    <div class="b4"> 
      <span> 
        D3.schemeSet1[3] 
      </span> 
    </div> 
    <div class="b5"> 
      <span> 
        D3.schemeSet1[4] 
      </span> 
    </div> 
    <div class="b6"> 
      <span> 
        D3.schemeSet1[5] 
      </span> 
    </div> 
    <div class="b7"> 
      <span> 
        D3.schemeSet1[6] 
      </span> 
    </div> 
    <div class="b8"> 
      <span> 
        D3.schemeSet1[7] 
      </span> 
    </div> 
    <div class="b9"> 
      <span> 
        D3.schemeSet1[8] 
      </span> 
    </div> 
      
    <script> 
      // Array of colors is given  
      let color1 = d3.schemeSet1[0]; 
      let color2 = d3.schemeSet1[1]; 
      let color3 = d3.schemeSet1[2]; 
      let color4 = d3.schemeSet1[3]; 
      let color5 = d3.schemeSet1[4]; 
      let color6 = d3.schemeSet1[5]; 
      let color7 = d3.schemeSet1[6]; 
      let color8 = d3.schemeSet1[7]; 
      let color9 = d3.schemeSet1[8]; 
  
      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"); 
      let b7 = document.querySelector(".b7"); 
      let b8 = document.querySelector(".b8"); 
      let b9 = document.querySelector(".b9"); 
  
      b1.style.backgroundColor = color1; 
      b2.style.backgroundColor = color2; 
      b3.style.backgroundColor = color3; 
      b4.style.backgroundColor = color4; 
      b5.style.backgroundColor = color5; 
      b6.style.backgroundColor = color6; 
      b7.style.backgroundColor = color7; 
      b8.style.backgroundColor = color8; 
      b9.style.backgroundColor = color9;  
    </script> 
  </center> 
</body> 
</html>

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!