The ‘scaleThreshold()’ Scale

The threshold scale allows developers to configure how a continuous dataset is mapped to a discrete dataset.

We are going to be exploring one more scale called the threshold scale. The threshold scale is more customizable than the previous three scales we have been using. Up until now, D3 has done the work for calculating how big a bucket is. It did not let us set the size of a bucket. The threshold scale allows us to configure how data is distributed. Let’s explore how the threshold scale works.

How a threshold scale works

The threshold scale will transform continuous data into discrete data. It is the same as the quantize and quantile scales. We are going to be using this scale to transform the data into three colors. The colors will again be white, pink, and red.

Before we proceed further, we should discuss what the word threshold means. A threshold is a level, rate, or amount at which something comes into effect.

Thresholds are commonly used for a lot of things. For example, a speed limit is considered a threshold. If a sign says you can not drive faster than 60 miles per hour, the threshold would be 60. Going faster than 60 miles per hour will result in a ticket. Another common example is a grading system. In America, if you score a 93 or more on a test, you will receive an A. 93 is considered a threshold.

Differences from other scales

The quantize, quantile, and threshold scales will create thresholds based on the data you feed them. The difference between the scales is how thresholds are determined.

The quantize scale will set the thresholds based on the data. It will divide the range of the input domain by the number of buckets in the output range.

The quantile scale will set the thresholds based on the data and the number of items in the array. It will always make sure the data is evenly distributed in the buckets. With both scales, we did not have a say in what the thresholds are. D3 calculated the thresholds for us.

In some cases, we may need to set the thresholds ourselves. This is where the threshold scale comes into play. D3 will not create the thresholds for us with the threshold scale. We need to provide the thresholds when we generate the scale. It gives us complete control over how data is distributed into different buckets.

Custom distribution

Get hands-on with 1200+ tech skills courses.