D3 for the Impatient

Chapter 7. Values to Visuals: Interpolations, Scales, and Axes

Any form of visual data representation involves a mapping between the original data values and their visual depiction. Information can be encoded in different forms, depending on circumstances and purpose: the location of a symbol within a graph is probably the most common form of visual representation, but the size of a symbol or its color are also frequently used.

In D3, instances of the scale object can be used to map data values from the input domain to the output range. The scale abstraction is convenient as it provides a unified API to map between pretty much any possible combination of input and output values: numbers to colors, strings to sizes, objects to positions.

Axes with regularly spaced and labeled markers (tick marks and labels) are an important element of well-designed visualizations, because they allow the observer to associate quantitative information with the graphical presentation—or, more generally, to “map back,” from the graphical elements to the original problem domain. Once a scale object has been set up and configured for a specific visualization problem, it can also be used to create the required tick marks or grid lines, and D3 provides functions to do so.

To produce a proper output value for any legal input value, scale objects need to be able to interpolate between values. D3 provides some general facilities to interpolate not only between numbers but also between colors, strings, ...