D3.js log.rangeRound() Function

0 0 1 minute read

The log.rangeRound() function is used to set the range of the scale to the specified array of values along with this it internally sets the interpolator to interpolatorRound.

Syntax:

log.rangeRound([range]);

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

[range]: An array that contains the range for the specified domain.

Return Value: This function does not return any value.

Example 1:

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> 
</head> 
  
<body> 
    <h2 style="color:green">GeekforGeeks</h2> 
  
    <p>log.rangeRound() Function</p> 
  
    <script> 
        var log = d3.scaleLog() 
            // Domain 
            .domain([1, 10]) 
  
            // Range for the domain 
            .rangeRound([10, 20, 30, 40, 50, 60, 70, 80, 90]); 
              
        document.write("<h3>log(1.0): " + log(1.0) + "</h3>"); 
        document.write("<h3>log(2.5): " + log(2.5) + "</h3>"); 
        document.write("<h3>log(4): " + log(4) + "</h3>"); 
        document.write("<h3>log(4.5): " + log(4.5) + "</h3>"); 
        document.write("<h3>log(1.5): " + log(1.5) + "</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" /> 
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
</head> 
  
<body> 
    <h2 style="color:green">GeekforGeeks</h2> 
  
    <p>log.rangeRound() Function</p> 
  
    <script> 
        var log = d3.scaleLog() 
            // Domain 
            .domain([1, 10]) 
            // Range for the domain 
            .rangeRound([0, 960]); 
  
        document.write("<br/><div style=float:left;>"); 
        document.write("<p> With rangeRound()</p>"); 
        document.write("<h3>" + log(1.5) + "</h3>"); 
        document.write("<h3>" + log(2.5) + "</h3>"); 
        document.write("<h3>" + log(3.5) + "</h3>"); 
        document.write("<h3>" + log(4.5) + "</h3>"); 
        document.write("<h3>" + log(8.5) + "</h3>"); 
        document.write( 
            "<h3>" + log(10.5) + "</h3></div>"); 
  
        var log = d3.scaleLog() 
            // Domain 
            .domain([1, 10]) 
            // Range for the domain 
            .range([0, 960]); 
  
        document.write( 
          "<div style=margin-left:10px;float:left;>"); 
        document.write("<p> Without rangeRound()</p>"); 
        document.write("<h3>" + log(1.5) + "</h3>"); 
        document.write("<h3>" + log(2.5) + "</h3>"); 
        document.write("<h3>" + log(3.5) + "</h3>"); 
        document.write("<h3>" + log(4.5) + "</h3>"); 
        document.write("<h3>" + log(8.5) + "</h3>"); 
        document.write( 
            "<h3>" + log(10.5) + "</h3></div>"); 
    </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!