To calculate values between the initial and final states of a transition, D3 uses a type of function called an interpolator, which maps the [0,1] domain to a target range, which can be a color, number, or string. These make it easy to blend between two values, because the interpolator will return the iterations between the values supplied to it. Under the hood, scales are based on these same interpolators.

D3's built-in interpolators can interpolate between almost any two arbitrary values, most often between numbers or colors, but also between strings. This sounds odd at first, but it's actually pretty useful. To let D3 pick the right interpolator for the job, we just write d3.interpolate(a, b) and the interpolation function is chosen depending on the type of the b argument. a is the initial value, and b is the final value.

If b is a number, a will be coerced into a number and .interpolateNumber() will be used. You should avoid interpolating to or from a zero value because values will eventually be transformed into a string for the actual attribute and very small numbers might turn into scientific notations. CSS and HTML don't quite understand 1e-7 (the digit 1 with seven zeroes before the decimal place), so the smallest number you can safely use is 1e-6.

If b is a string, D3 checks whether it's a CSS color, in which case it is transformed to a proper color, just like the ones in Chapter 2, A Primer on DOM, SVG, and CSS. a is transformed into a color as well, and then D3 uses .interpolateRgb() or a more appropriate interpolator for your color space.

Something even more amazing happens when the string is not a color. D3 can handle that too! When it encounters a string, D3 will parse it for numbers, and then use .interpolateNumber() on each numerical piece of the string. This is useful for interpolating mixed-style definitions.

For instance, to transition a font definition, you might do something like this:

d3.select('svg') 
  .append('text') 
  .attr('x', 100)
  .attr('y', 100)
  .text("I'm growing!") 
  .transition() 
    .styleTween('font', () =>  
      d3.interpolate('12px Helvetica', '36px Comic Sans MS'));

We used .styleTween() to manually define a transition. It is most useful when we want to define the starting value of a transition without relying on the current state. The first argument defines which style attribute to transition and the second is the interpolator.

You can use .tween() to do this for attributes other than style.

Every numerical part of the string was interpolated between the starting and ending values, and the string parts changed to their final state immediately. An interesting application of this is interpolating path definitions--you can make shapes change in time. How cool is that?

Creating a custom interpolator is as simple as defining a function that takes a single t parameter and returns the start value for t = 0, end value for t = 1, and blends values for anything in between.

For example, the following code shows the interpolateNumber function of D3:

function interpolateNumber(a, b) { 
  return function(t) { 
    return a + t * (b - a); 
  }; 
}

It's as simple as that!

You can even interpolate whole arrays and objects, which work like compound interpolators of multiple values. We'll use those soon.