The Encoding Pipeline: Scales, Shapes, and Renderers
D3 becomes visually concrete when an identified datum is mapped into a mark that a reader can compare. This chapter follows that path through scales, axes, formats, colors, shape generators, and the choice between SVG and Canvas. The practical goal is not to memorize chart recipes. It is to trace one field from data space to visual space and understand why the labels, geometry, color, and renderer are part of the interpretation rather than decoration added afterward.
A scale is the first important contract in this path. It says how values from one domain become values in another range. A shape generator then uses those values to construct geometry, and a renderer displays that geometry. Each step narrows the distance between an abstract record and a visible mark, but none of them independently decides what the visualization should mean.
A scale maps data space into visual space
The D3 documentation defines scales as mappings from a dimension of abstract data to a visual representation. Position is the familiar case: temperature can become a horizontal coordinate, or time can become a vertical coordinate. The same idea can map a value to color, stroke width, or symbol size. A scale is therefore not synonymous with an axis or a chart. It is a reusable relationship between an input domain and an output range.
That relationship lets the rest of a visualization remain independent of the raw units. A dataset may report revenue in dollars and time as dates, while the drawing surface uses pixels. The scale is the boundary that translates between those spaces. If the chart's width changes, the output range can change without rewriting the data preparation step. If the domain changes, the mapping can be recomputed without changing the identity of the elements that display it.
The domain and range also carry different kinds of meaning. The domain describes what values are being considered; the range describes the available visual channel. A linear or time scale can represent a continuous quantitative relationship. An ordinal scale can map named categories to discrete values. Band and point scales can distribute categories across a spatial range. Sequential, diverging, quantile, quantize, and threshold scales offer different ways to turn quantitative values into color or discrete classes. These are not merely different syntax for the same choice. They answer different questions about continuity, grouping, thresholds, and the presence of a meaningful midpoint.
Consider a display of water levels across monitoring stations. A positional scale can place stations along an axis, while a second scale maps the measured level to vertical position. A color scale could encode the same level, but the reading would change: color may reveal broad variation across many marks, while position generally supports a different kind of comparison. A symbol-size scale could make high values more prominent, but it would also change how much area each mark occupies. D3 makes all of these mappings possible; it does not declare them equivalent.
A scale also creates a place to inspect missing or unusual inputs. The evidence in the repository supports the general mapping role, not a universal rule for every unknown or out-of-domain value, so the application must decide what to do when a record is incomplete or unexpected. A visual system that silently treats an invalid value as zero can make missingness look like measurement. A system that gives unknown values a separate visual treatment preserves a different meaning. The important point is that the mapping boundary is where such cases become visible design decisions.
The relationship between a scale and a data join is especially important.