There will be cases when what you need to interpolate in your visualization is not a simple value but rather an object consisting of multiple and different values, for example, a rectangular object with width, height, and color attributes. Fortunately, D3 has a built-in support for this type of compound object interpolation.
Open your local copy of the following file in your web browser:
https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter4/compound-interpolation.html
In this recipe, we will examine how compound object interpolation is performed in D3. The code for the compound-interpolation.html
file is as follows:
<div id="compound" class="clear"> <span>Compound Interpolation<br></span> </div> <script type="text/javascript"> var max = 21, data = []; var compoundScale = d3.scale.pow() .exponent(2) .domain([0, max]) .range([ ...