D3.js scaleQuantile() Function
Last Updated :
23 Aug, 2020
The d3.scaleQuantile() function in D3.js is used to create and return a new quantile scale that has the specified domain and range. In case the domain or the range is not specified, each value is set to empty array by default.
Syntax:
d3.scaleQuantile( domain, range )
Parameters: This function accepts two parameters as given above and described below:
- domain: It is an array of only integers that defines the extent of domain values. It is an optional parameter. The default value is set to empty array.
- range: It is an array of integers or strings. It is an optional parameter. The default value is set to empty array.
Return Values: This function does not return anything.
Below programs illustrate the d3.scaleQuantile() function in D3.js:
Example 1:
HTML
<!DOCTYPE html>
< html >
< head >
</ script >
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h1 style = "color: green;" >GeeksforGeeks</ h1 >
< p >d3.ScaleQuantile() Function </ p >
< script >
// Using scaleQuantile function
var quantile = d3.scaleQuantile()
.domain([0, 1])
.range(["blue", "yellow", "green"]);
document.write("< h3 >" +
quantile(0) + "</ h3 >");
document.write("< h3 >" +
quantile(0.3) + "</ h3 >");
document.write("< h3 >" +
quantile(0.5) + "</ h3 >");
document.write("< h3 >" +
quantile(0.9) + "</ h3 >");
</ script >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< head >
</ script >
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< p >d3.ScaleQuantile() Function </ p >
< script >
// Using the scaleQuantile function
var quantile = d3.scaleQuantile()
.domain([0, 1])
.range([1, 100]);
document.write("< h3 >" +
quantile(0) + "</ h3 >");
document.write("< h3 >" +
quantile(0.3) + "</ h3 >");
document.write("< h3 >" +
quantile(0.5) + "</ h3 >");
document.write("< h3 >" +
quantile(0.9) + "</ h3 >");
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...