Wednesday, July 3, 2024
HomeLanguagesJavascriptD3.js scaleOrdinal() Function

D3.js scaleOrdinal() Function

The d3.scaleOrdinal() function is used to create and return the ordinal scale which has the specified range and domain. If the domain and range are not given then both are set to empty array. These types of scales have a discrete domain and range.

Syntax:

d3.scaleOrdinal([[domain, ]range]);

Parameters:  This function takes two parameters as given above and described below:

  • domain: It defines the minimum and maximum value for the scale.
  • range:  Every value in domain maps with value in the range.

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>
    <script>
  
        // Creating the Ordinal scale.
        var ordinal = d3.scaleThreshold()
  
            // Setting domain for the scale
            .domain([1, 2, 3, 4])
            .range([10, 20, 30, 40]);
          
        console.log("The value of ordinal(1) is: ",
                ordinal(1));
        console.log("The value of ordinal(2) is: ",
                ordinal(2));
        console.log("The value of ordinal(3) is: ",
                ordinal(3));
    </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>
    <script>
        // Creating the Ordinal scale.
        var ordinal = d3.scaleThreshold()
  
            // Setting domain for the scale
            .domain([1, 2, 3, 4])
            .range(["String1", "string2", 
                    "string3", "string4"]);
  
        console.log("The value of ordinal(1) is: ",
                ordinal(1));
        console.log("The value of ordinal(2) is: ",
                ordinal(2));
        console.log("The value of ordinal(3) is: ",
                ordinal(3));
        console.log("When value given is not"
                + " in the domain:")
        console.log("The value of ordinal(4) is: ",
                ordinal(10));
    </script>
</body>
  
</html>


Output:

Ted Musemwa
As a software developer I’m interested in the intersection of computational thinking and design thinking when solving human problems. As a professional I am guided by the principles of experiential learning; experience, reflect, conceptualise and experiment.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments