Learn D3.js

Ordinal scale

An ordinal scale has a discrete domain and range. You can use d3.scaleOrdinal() to establish a one-to-one mapping between discrete values in the input domain and the output range. If the domain is larger than the range, the range will repeat.

In the following example, three ordinal scales were created to map a dataset containing 41 values to 4 colors, 4 sizes, and 2 font weights. Since the dataset is larger than the ranges, they will all repeat:

const data = d3.range(0, 10.1, 0.25); // 41 values const colorScale = d3.scaleOrdinal()    .domain(data).range(['#000','#00d','#d00','#0a0']); // 4 colorsconst sizeScale  = d3.scaleOrdinal()    .domain(data).range([12,8,10,8]);                   // 4 font sizesconst boldScale  = d3.scaleOrdinal() .domain(data).range(['bold','normal']); ...