Learn D3.js

Threshold scale

In a threshold scale, the domain is divided into subsets based on a list of n threshold values, which are mapped to a discrete range of size n+1.

The following example uses a threshold scale to map wind speeds to categories of the Saffir–Simpson storm scale. Each adjacent pair of values in the categories array corresponds to the minimum and maximum wind speeds of a storm category (0 = tropical storm; 1 to 5 = hurricane). An ordinal scale is used to map hurricane categories to colors. A linear scale is used for the x axis, which represents wind speeds:

const speeds = [0,119,154,178,209,252,310];const categories = [0,1,2,3,4,5];const colors = ['#62b6e6','blue','green','gold','orange','red'];const scaleHurricane = d3.scaleThreshold() ...