The d3.scalePow() function is used to create and return a new continuous scale. This scale has a specified domain and range. Generally, it acts as a linear scale but when used with exponent it works in a different way.
Syntax:
d3.scalePow([[domain, ]range]);
Parameters: This function accepts two parameters as mentioned above and described below.
- domain: This parameter always accepts two or more than two numbers.
- range: This parameter accepts a number or a string array.
Return Values: This function does not return anything.
Below examples illustrate the scalePow() function in D3.js:
Example 1:
<!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>
<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>
</head>
<body>
<h2 style="color:green;">Geeks for geeks</h2>
<p>d3.scalePow() Function </p>
<script>
var pow = d3.scalePow()
.domain([0, 1])
.range([1, 2, 3, 4, 5, 6]);
document.write("<h3> pow(1): "
+ pow(1) + "</h3>");
document.write("<h3>pow(2): "
+ pow(2) + "</h3>");
document.write("<h3>pow(3): "
+ pow(3) + "</h3>");
</script>
</body>
</html>
Output:
Example 2:
<!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>
<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>
</head>
<body>
<h2 style="color:green;">Geeks for geeks</h2>
<p>d3.scalePow() Function </p>
<script>
var pow = d3.scalePow()
.domain([0, 1])
.range([1, 2, 3, 4, 5, 6])
.exponent(4);
document.write("<h3> pow(1): "
+ pow(1) + "</h3>");
document.write("<h3>pow(2): "
+ pow(2) + "</h3>");
document.write("<h3>pow(3): "
+ pow(3) + "</h3>");
</script>
</body>
</html>
Output:
