An ordinal scale maps discrete domain values to discrete range values while preserving their categorical association. In D3, it is especially useful for assigning consistent colors to categories such as music formats, frameworks, or language families. section 5.1.3 section 5.4
Build an ordinal color scale by pairing category identifiers with their visual values:
- Create the scale with d3.scaleOrdinal(). section 5.1.3
- Set the domain to the discrete category values, often produced with JavaScript map(). section 11.2.2
- Set the range to the corresponding colors, either from project data or a predefined palette such as d3.schemeTableau10. section 8.5.1
- Pass a bound category into the scale when setting an element’s fill attribute. section 5.1.3
Coloring donut-chart arcs
const colorScale = d3.scaleOrdinal() .domain(formatsInfo.map(f => f.id)) .range(formatsInfo.map(f => f.color)); arcs.attr("fill", d => colorScale(d.data.format)); Each music-format identifier retrieves its associated color, so repeated categories remain visually consistent across the charts. section 5.1.3
const colorScale = d3.scaleOrdinal();
const defineScales = (data) => {
colorScale
.domain(formatsInfo.map(f => f.id))
.range(formatsInfo.map(f => f.color));
};
Inspect the compact D3 implementation for declaring an ordinal scale and deriving its domain and range from category metadata. section 5.1.3
