D3.js quantize.invertExtent() Function

The quantize.invertExtent() function is used to return the extent of values that are present in the domain [x0, x1] for corresponding values that are in the range.

Syntax:

quantile.invertExtent(value);

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

value: It is a number that corresponds to the domain values.

Return Value: This function returns the extent of the values in the domain.

Example 1:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" path1tent="width=device-width, 
        initial-scale=1.0" />
    <title>Geeks for geeks</title>
    <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>

    <style>
        body {
            line-height: 5px;
            text-align: center;
        }

        h2 {
            color: green;
        }

        h3 {
            line-height: 10px;
        }
    </style>
</head>

<body>
    <h2>Geeks for geeks</h2>
    <p>quantize.invertExtent() Function </p>

    <script>
        var object = d3.scaleQuantize()

            // Value from 10 to 100 decides 
            // which value to output
            .domain([10, 100])

            // This should be a number range.
            .range([11, 12, 13, 14, 15, 16, 
                    17, 18, 19, 10, 11, 12]);

        document.write("<br/>")
        document.write("<h3>This is floating "
                + "number so: "
                + object.invertExtent(14.44) 
                + "</h3>");
        document.write("<h3>" + 
            object.invertExtent(14) + "</h3>");
        document.write("<h3>" + 
            object.invertExtent(15) + "</h3>");
    </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" />
    <title>Geeks for geeks</title>
    <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>

    <style>
        body {
            line-height: 5px;
            text-align: center;
        }

        h2 {
            color: green;
        }

        h3 {
            line-height: 10px;
        }
    </style>
</head>

<body>
    <h2>Geeks for geeks</h2>
    <p>quantize.invertExtent() Function </p>
    <script>
        var object = d3.scaleQuantize()

            // Value from 1 to 10 decides 
            // which value to output
            .domain([1, 10])
            .range([1, 2, 3, 4, 5, 6, 7, 
                8, 9, 10, 11, 12]);
        document.write("<br/>");

        document.write("<h3>" + 
            object.invertExtent(1) + "</h3>");
        document.write("<h3>" + 
            object.invertExtent(2) + "</h3>");
        document.write("<h3>" + 
            object.invertExtent(3) + "</h3>");
        document.write("<h3>" + 
            object.invertExtent(4) + "</h3>");
        document.write("<h3>" + 
            object.invertExtent(5) + "</h3>");
        document.write("<h3>" + 
            object.invertExtent(6) + "</h3>");
        document.write("<h3>" + 
            object.invertExtent(7) + "</h3>");
        document.write("<h3>" + 
            object.invertExtent(8) + "</h3>");
        document.write("<h3>" + 
            object.invertExtent(9) + "</h3>");
        document.write("<h3>" + 
            object.invertExtent(10) + "</h3>");
    </script>
</body>

</html>

Output:

D3.js quantize.invertExtent() Function

Explore