Interpolate anything with tweens

When dealing with complex properties in transitions, for example, line and area functions that generate the d attribute, automatic interpolations can get a bit tricky. This can especially cause problems when D3.js does not have any proper interpolation for the desired properties. In these cases, we need to use a custom interpolation function for the attribute transition; this is called tween in D3.js. We can either use attrTween(attr, tweenFn), styleTween(style, tweenFn), or a tween factory tween(name, factory) to create custom interpolators. Let's switch back to the AngularJS project where you already learned to display area charts. In order to create animations for the area chart, we need to interpolate the points of the dataset. Let's first draw the area with the following code:

var area = d3.svg.area()
  .x(function(d) { return xScale(d.x); })
  .y0(yScale(0))
  .y1(function(d) { return yScale(d.y); })
  .interpolate('cardinal');
svg.select(".data-area...