Ordinal Scales

scaleOrdinal

In this lesson, we will demonstrate another scale in D3.js, the scaleOrdinal, which maps discrete input to discrete output. There will be a one-to-one mapping from a domain to a range, as long as the length of the domain is equal to the length of the range. The range will start repeating itself if the domain’s size is greater than the size of the range. If the number of elements in the range exceeds the number of elements in the domain, all the elements in the domain will be mapped on to the range. The extra elements in the range will be discarded.

See the following example to understand the working of the scaleOrdinal where we convert grades into points out of 10.

Explanation

Let’s look at the following explanation to see how the above code works.

• In line 1, we have defined grade_conv as scaleOrdinal.
• In line 2, we have defined a domain which is discrete and consists of five grades.
• The range defined in line 3 is discrete as well and consists of five elements where there is a one-to-one mapping between domain and range.

What will happen if we give grade_conv a value that is not in the domain?

console.log(grade_conv("Y"))

Y is not present in the domain of grade_conv but it will give us an output.

If this situation is undesirable, we can use the unknown() function to display an error if the input is not from the specified domain.

Let’s look at the functionality of the unknown function in the following example.

Now it will show the Not a grade message on the console if we give input outside of domain as we have specified Not a grade text inside the unknown function in line 4.

scaleBand

Let’s conclude the scales by introducing the last scale, the scaleBand, which maps discrete input to bands of the output. It is very helpful in drawing a bar chart which we will discuss in upcoming lessons.

For now, let’s look at a simple example to understand the working of the scaleBand scale.

Explanation

From line 1 to line 3, we have defined a discrete domain that consists of three elements and we are mapping it to the bands, each of width 100 using the scaleBand() function as shown in the following figure.

Each of the domain elements will point to the starting point of the band that they are mapped to, as we can see on the console.

Can we find the width of the bands as shown in the above figure? Yes, we can! By using the bandwidth() function as shown in the following code, we can find the width of the bands.

We can see the 100 on the console when we apply the bandwidth on the scaleBand() function which is the width of each band in the range.