Implementing a custom interpolator

In Chapter 4, Tipping the Scales, we explored how custom interpolators can be implemented in D3. In this recipe, we will demonstrate how this technique can be combined with D3 transition to generate special transition effects by leveraging custom interpolation.

Getting Ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter6/custom-interpolator-transition.html

This recipe builds on top of what we have discussed in the Implementing a custom interpolator recipe in Chapter 4, Tipping the Scales. If you are not familiar with the concept of custom interpolation, please review the related recipe before proceeding with this one.

How to do it...

Let's look at the code of the custom-interpolator-transition.html file and see how it works:

 <script type="text/javascript">
    d3.interpolators.push(function(a, b) { // <-A
      var re = /^([a-z])$/, ma, mb;
      if ((ma = re.exec(a...