Understanding D3.js Interpolation

We have seen basics of d3 scale in this article, D3 scales use interpolation undeline, so what is interpolation, it is an function that maps one domain to range.

Domain by definition is set of all possible input value for given function.

Range by definition is set of all possible output value for given function.

Suppose there is domain (d1,d2) so there are n number of points in between d1 to d2 and you want to express this domain in the range of (r1,r2), where r1 and r2 are the smallest largest value of output.

If you have read my previous blog, you will understand in which situation we need such conversions, to explain in brief we need such conversions for mapping data to pixels for plotting chart.

To get more clarity of how interpolation works consider following visuals, there a domain line having points from d1 to d2, similarly there is range line from r1 to r2.

There is a point d in domain (d1,d2)

You want to express this point in range (r1,r2)

One thing is clear that d1 corresponds to r1 and d2 to r2

Now suppose say point r corresponds to d and shown as

Then this should hold true

Solving above equation for r gives us

if d1 = 0 and d2 = 1 then

r = r1 * (1 - d ) + r2 * d

Which is similar to what we have in d3.js interpolate function here

function interpolate(t) {
  return a * (1 - t) + b * t;
}

D3.js uses this function at many places, like in scales.

I hope this helped you to understand underlying logic of interpolation.