What is D3.js pow.rangeRound() Function?

In this article, we will learn D3.js pow.rangeRound() Function,This free D3.js tutorial for complete beginners will help you learn D3.js from scratch.

D3.js pow.rangeRound() Function - ❤️D3.js Tutorials In 2024

The pow.rangeRound() function is used set the range of the scale to the specified array of values along with this it internally sets the interpolator to interpolatorRound.

Syntax:

pow.rangeRound([range]);

Parameters: This function takes a single parameter that is given above and described below.

[range]: This is an array that contains the range for the domain specified.

Return Values: This function does not return anything.

Below given are a few examples of the function given above.

Example 1: When elements in range array are of type number.

<!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>  
    <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>  
    <h2 style="color: green;"> 
        Beginner for Beginner</h2> 
    <p>pow.rangeRound() Function </p> 
    <script>  
        var pow = d3.scalePow() 
                    // Domain ranges -1, +1 
                        .domain([-1, +1]) 
                    // Range for the domain 
.rangeRound([10, 20, 30, 40, 50, 60, 70, 80, 90]); 
       
        document.write("<br/><div>"); 
        document.write("<p>With rangeRound()"); 
        document.write("<h3>"+pow(10.5)+"</h3>"); 
        document.write("<h3>"+pow(2)+"</h3>"); 
        document.write("<h3>"+pow(11.5)+"</h3>"); 
        document.write("<h3>"+pow(-1)+"</h3>"); 
        document.write("<h3>"+pow(1.15)+"</h3>"); 
        document.write("<h3>"+pow(5)+"</h3></div>"); 
   
        var pow = d3.scaleLinear() 
                    // Domain ranges -1, +1 
                        .domain([-1, +1]) 
                    // Range for the domain 
.range([10, 20, 30, 40, 50, 60, 70, 80, 90]) 
   
        document.write("<br/><div>"); 
        document.write("<p>Without rangeRound()"); 
        document.write("<h3>"+pow(10.5)+"</h3>"); 
        document.write("<h3>"+pow(2)+"</h3>"); 
        document.write("<h3>"+pow(11.5)+"</h3>"); 
        document.write("<h3>"+pow(-1)+"</h3>"); 
        document.write("<h3>"+pow(1.15)+"</h3>"); 
        document.write("<h3>"+pow(5)+"</h3></div>"); 
    </script>  
</body>  
</html> 

Output:

Example 2: When elements in range array are of type String.

<!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>  
    <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>  
    <h2 style="color: green;">Beginner for Beginner</h2> 
    <p>pow.rangeRound() Function </p> 
    <script>  
        var pow = d3.scalePow() 
                    // Domain ranges -1, +1 
                        .domain([-1, +1]) 
                    // Range for the domain 
.rangeRound(["green", "blue", "red", "black", "white"]); 
       
        document.write("<br/><div>"); 
        document.write( 
"<p>d3.rangeRound() does not work with range of type string"); 
        document.write("<h3>"+pow(10.5)+"</h3>"); 
        document.write("<h3>"+pow(2)+"</h3>"); 
        document.write("<h3>"+pow(11.5)+"</h3>"); 
    </script>  
</body>  
</html> 

Output: