D3.js ordinal.domain() Function

Last Updated : 18 Sep, 2020

The ordinal.domain() function in d3.js is used to set the domain for the ordinal scale. In this first element of the domain is mapped to the first element of the range and the second element of the domain is mapped to second element of the range and so on.

Syntax:

ordinal.domain([domain]);

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

domain: It takes the minimum and maximum value for the scale.

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"> 
        GeeksforGeeks 
    </h2> 
  
    <p>ordinal.domain() Function </p> 
  
    <script> 
        var ordinal = d3.scaleThreshold() 
  
            // Setting domain for the scale 
            .domain([1, 2, 3, 4]) 
          
            // Range for the domain 
            .range([0.1, 0.2, 0.3, 0.4]); 
  
        document.write("<h3>ordinal(1): " 
                + ordinal(1) + "</h3>"); 
        document.write("<h3>ordinal(3): " 
                + ordinal(3) + "</h3>"); 
    </script> 
</body> 
  
</html> 

Output:

Example 2: When input value is out of the domain.

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"> 
        GeeksforGeeks 
    </h2> 
  
    <p>ordinal.domain() Function </p> 
  
    <script> 
        var ordinal = d3.scaleThreshold() 
  
            // Setting domain for the scale 
            .domain([-1, -2, 3, 4]) 
  
        document.write("<h3>ordinal(-2): "  
                + ordinal(-2) + "</h3>"); 
        document.write("<h3>ordinal(100): "  
                + ordinal(100) + "</h3>"); 
    </script> 
</body> 
  
</html> 