Wednesday, July 3, 2024
HomeLanguagesJavascriptD3.js ordinal.domain() Function

D3.js ordinal.domain() Function

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">
        neveropen
    </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">
        neveropen
    </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>


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!

Shaida Kate Naidoo
am passionate about learning the latest technologies available to developers in either a Front End or Back End capacity. I enjoy creating applications that are well designed and responsive, in addition to being user friendly. I thrive in fast paced environments. With a diverse educational and work experience background, I excel at collaborating with teams both local and international. A versatile developer with interests in Software Development and Software Engineering. I consider myself to be adaptable and a self motivated learner. I am interested in new programming technologies, and continuous self improvement.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments