D3.js pow.rangeRound() Function

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.

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> 
    <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 geeks</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.

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> 
    <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 geeks</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:

D3.js pow.rangeRound() Function

Explore