scaleQuantize
Get introduced to another important scale in D3.js, scaleQuantize.
We'll cover the following...
As mentioned in the previous lessons, in linear and logarithmic scales, input and output are both continuous. When the input is continuous, and the output is discrete, we use the scaleQuantize scale.
scaleQuantize is a variant of linear scale, which has discrete output. The input is continuous and is divided into portions specified by values in the range. The mapping is linear, and the output, y, can be expressed in terms of the input, x, through the following function.
Example
We are going to demonstrate the scaleQuantize function through an example.
Explanation
Let’s dive into the explanation of the above code to understand how it works.
- Line 3-4: we have defined our
domain[0-100], which is continuous in nature, and ourrangeconsists of four discrete values. - At line 6, we are giving input
5which will give us the colorNeon Carroton theconsole.
Different portions of the input are mapped linearly into discrete output and can be seen in the following figure.
invertExtent
Let’s talk about the invertExtent function that will return the portion of input for the corresponding value of the given range of scaleQuantize function. By using the invertExtent, we can find different portions of input, as shown in the above figure.
Let’s dive into the code to see how invertExtent works.
Explanation
See the following explanation to understand the working of the above code.
Lines 6–9: We are giving the range of the scaleQuantize function as an input to the invertExtent function, which will print the portion of inputs corresponding to specific values of the discrete range as shown on the output console.