D3.js ordinal.range() Function

0 0 1 minute read

The ordinal.range() function in d3.js is used to set the range for the ordinal scale. If in the range there are less number of elements as compared to domain the values then the scale reuse values of the specified range from starting.

Syntax:

ordinal.range([range]);

Parameters: This function takes only one parameter as given above and described below.

range: This parameter accepts an array of discrete values.

Return Values: This function does not return anything.

Example 1:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" path1tent= 
        "width=device-width,  
        initial-scale=1.0" /> 
  
    <script src= 
        "https://d3js.org/d3.v4.min.js"> 
    </script> 
</head> 
  
<body> 
    <h2 style="color:green"> 
        zambiatek 
    </h2> 
  
    <p>ordinal.range() Function </p> 
  
    <script> 
        var ordinal = d3.scaleThreshold() 
  
            // Setting domain for the scale 
            .domain([1, 2, 3, 4]) 
          
            // Range for the scale 
            .range(["red", "green", "blue"]); 
  
        document.write("<h3>ordinal(1): " 
                + ordinal(1) + "</h3>"); 
        document.write("<h3>ordinal(3): " 
                + ordinal(3) + "</h3>"); 
    </script> 
</body> 
  
</html> 

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" path1tent= 
        "width=device-width,  
        initial-scale=1.0" /> 
  
    <script src= 
        "https://d3js.org/d3.v4.min.js"> 
    </script> 
</head> 
  
<body> 
    <h2 style="color:green"> 
        zambiatek 
    </h2> 
  
    <p>ordinal.range() Function </p> 
  
    <script> 
        var ordinal = d3.scaleThreshold() 
  
            // Setting domain for the scale 
            .domain([-2, 3, 4]) 
  
        // 10 does not lie in the domain 
        document.write("<h3>ordinal(-3): " 
                + ordinal(-3) + "</h3>"); 
        document.write("<h3>ordinal(10): "  
                + ordinal(10) + "</h3>"); 
    </script> 
</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!