D3.js scaleDiverging() Function
The d3.scaleDiverging() function in D3.js is used to construct and return a diverging scale with specified domain and fixed range. The diverging scales are very similar to continuous scales. The only difference is that the output range of this scale is fixed by the interpolator thus the range is not configurable.
Syntax:
d3.scaleDiverging( domain, interpolator )
Parameters: The above function accepts two parameters as mentioned above and described below:
- domain: This is the maximum and minimum input value range. It is an optional parameter. The default domain is [0,1]
- interpolator: This takes an interpolator function. It is an optional parameter. The default function is the identity function.
Return Values: This function does not return anything.
Below given are a few examples of the function given above.
Example 1:
HTML
<!DOCTYPE html> <html> <head> <script src="https://d3js.org/d3.v6.min.js"> </script> </head> <body> <h2 style="color:green"> w3wiki </h2> <h4> d3.scaleDiverging() Function </h4> <script> var diverging = d3.scaleDiverging( d3.interpolateSpectral ); // Default domain is used i.e [0, 1] document.write(" <p>diverging(0.1): ", diverging(0.1) + "</p>"); document.write("<p>diverging(0.2): ", diverging(0.2) + "</p>"); document.write("<p>diverging(0.3): ", diverging(0.3) + "</p>"); document.write("<p>diverging(0.4): ", diverging(0.4) + "</p>"); document.write("<p>diverging(0.5): ", diverging(0.5) + "</p>"); document.write("<p>diverging(0.6): ", diverging(0.6) + "</p>"); </script> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <head> <script src="https://d3js.org/d3.v6.min.js"> </script> </head> <body> <h2 style="color:green"> w3wiki </h2> <h4> d3.scaleDiverging() Function </h4> <script> var diverging = d3.scaleDiverging( d3.interpolateRainbow ); // Default domain is used i.e [0, 1] document.write("<p>diverging(0.1): ", diverging(0.1) + "</p>"); document.write("<p>diverging(0.2): ", diverging(0.2) + "</p>"); document.write("<p>diverging(0.3): ", diverging(0.3) + "</p>"); document.write("<p>diverging(0.4): ", diverging(0.4) + "</p>"); document.write("<p>diverging(0.5): ", diverging(0.5) + "</p>"); document.write("<p>diverging(0.6): ", diverging(0.6) + "</p>"); </script> </body> </html> |
Output: