In this chapter we will cover:
- Using quantitative scales
- Using time scale
- Using ordinal scale
- Interpolating string
- Interpolating colors
- Interpolating compound object
- Implementing custom interpolator
As a data visualization developer, one key task that you need to perform over and over is to map values from your data domain to visual domain, for example, mapping your most recent purchase of a fancy tablet of $453.00 to a 653px-long bar, and your last night's pub bill of $23.59 to a 34px-long bar, respectively. In a sense, this is what data visualization is all about—mapping data elements to their visual metaphor in an efficient and accurate manner. Because this is an absolutely essential task in data visualization and animation (animation will be discussed in Chapter 6, Transition with Style, in detail), D3 provides rich and robust support on this topic, which is the focus of this chapter.
D3 provides various constructs called scales to help you perform this kind of mapping. Proper understanding of these constructs conceptually is crucial to become an effective visualization developer. This is because scales are not only used to perform the mapping we have mentioned previously, but also to serve as fundamental building blocks for many other D3 constructs, such as transition and axes.
What are these scales anyway?
In short, scales can be thought of as mathematical functions. Mathematical functions differ from functions defined in imperative programming languages, such as JavaScript functions. In mathematics, a function is defined as mapping between two sets:
Let A and B be nonempty sets. A function f from A to B is an assignment of exactly one element of B to each element of A. We write f(a) = b if b is the unique element of B assigned by the function f to the element a of A.
(Rosen K. H. 2007)
Despite the dryness of this definition, we still could not help but notice how nicely it fits the task we need to perform—mapping elements from the data domain to visual domain.
Another fundamentally important concept we need to illustrate here is the domain and range of a given function.
If f is a function from A to B, we say that A is the domain of f and B is the codomain of f. If f(a) = b, we say that b is the image of a and a is a preimage of b. The range, or image, of f is the set of all images of elements of A. Also, if f is a function from A to B, we say that f maps A to B.
(Rosen K. H. 2007)
To help us understand this concept, let's take a look at the following illustration:
Function f maps A to B
We can clearly see now, in the preceding illustration for function f, the domain is set A and the range is set B. Imagine if set A represents our data domain and B represents the visual domain, then a function f defined here is essentially a scale in D3 that maps elements from set A to set B.
Now, we have discussed the conceptual definition of scale functions in D3, so let's take a look at how it can be used to help us develop our visualization project.