Search⌘ K
AI Features

The ‘scaleThreshold()’ Scale

Explore the scaleThreshold function in D3.js to gain control over data distribution by setting your own thresholds. Understand how to transform continuous data into discrete categories and apply this to color-coded heatmaps. This lesson helps you customize scales to better represent your dataset in visual forms.

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 ...