D3.js log.interpolate() Function

Last Updated : 03 Sep, 2020

The log.interpolate() function is used to set the range interpolator factory which is used to create the interpolators for each pair of values from the adjacent ranges. If the factory is not specified then it returns the current interpolator factory of the scale.

Syntax:

log.interpolate(interpolate);

Parameters: This function accepts a single parameter as mentioned above and described below:

interpolator: This parameter accepts an interpolator.

Approach: First of all import the d3.js using d3.js CDN, then make a log scale using d3.scaleLog() function. This function will return a log scale then set the domain and range of the scale using log.domain() and log.range() function as shown in the below example. Then change the interpolator to interpolatorRound to round the output to the nearest integer. Write the output to the document using the document.write() function.

Return Values: This function does not return anything.

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>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <p>D3.js log.interpolate() Function </p>

    <script>
        var log = d3.scaleLog()
            .domain([1, 10])
            .range([10, 20, 30, 40, 50, 60, 70, 80, 90])

            // Using interpolateRound
            .interpolate(d3.interpolateRound);

        document.write("<h3>log(1.0): " 
                + log(1.0) + "</h3>");
        document.write("<h3>log(2.0): " 
                + log(2.0) + "</h3>");
        document.write("<h3>log(3.5): " 
                + log(3.5) + "</h3>");
        document.write("<h3>log(4.1): " 
                + log(4.1) + "</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>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <p>D3.js log.interpolate() Function </p>

    <script>
        var log = d3.scaleLog()
            .domain([1, 100])
            .range(["red", "blue"])

            // Using interpolate
            .interpolate(d3.interpolate);

        document.write("<h3>log(11.0): " 
                + log(11.0) + "</h3>");
        document.write("<h3>log(12.0): " 
                + log(12) + "</h3>");
        document.write("<h3>log(31.5): " 
                + log(31.5) + "</h3>");
        document.write("<h3>log(41): " 
                + log(41) + "</h3>");
        document.write("<h3>log(1.5): " 
                + log(1.5) + "</h3>");
    </script>
</body>

</html>