D3.js pow.rangeRound() Function

0 0 1 minute read

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;"> 
        Geeks for zambiatek</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;">Geeks for zambiatek</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:

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!