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: