D3.js quantize.invertExtent() Function

Last Updated : 19 Aug, 2020

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> 