D3.js quantize() Function

Last Updated : 09 Aug, 2020

The d3.quantize function is used to generate uniformly spaced samples of interpolator and return them. It is useful in generating a particular number of samples from a given interpolator.

Syntax:

d3.quantize(interpolator, n);

Parameters: It takes the following two parameters.

interpolator: It is the interpolator function.
n: It is the number of samples of given interpolator required

Returns: It returns the array.

Example 1:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width,initial-scale=1.0"> 
    
      <!--Fetching from CDN of D3.js -->
    <script type="text/javascript" 
        src="https://d3js.org/d3.v4.min.js"> 
    </script> 
</head> 
  
<body> 
      
    <script> 
        let interpolator = 
            d3.interpolate("blue", "white"); 
        // Creating four samples  
        let samples = d3.quantize(interpolator, 4); 
        console.log(samples) 
    </script> 
</body> 
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width,initial-scale=1.0"> 
  
    <!--Fetching from CDN of D3.js -->
    <script type="text/javascript" 
        src="https://d3js.org/d3.v4.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="b1"></div> 
    <div class="b2"></div> 
  
    <script> 
        let interpolator = 
            d3.interpolate("blue", "white"); 
        let samples = d3.quantize(interpolator, 4); 
        console.log(samples) 
  
        // Using interpolateCubehelix 
        interpolator = 
            d3.interpolateCubehelix("blue", "white"); 
        samples = d3.quantize(interpolator, 3); 
        console.log(samples) 
          
        // Using interpolateRound 
        interpolator = 
            d3.interpolateRound((0, 1e3), 10); 
        samples = d3.quantize(interpolator, 3); 
        console.log(samples) 
    </script> 
</body> 
  
</html>