What is interpolation, really? | Dirty D3 - Episode 3

💛 Source code on Github

GMM: Quick Recap

Okay, so in the last episode, we got comfortable with d3.scaleLinear as part of our long quest in this series of rabbitholing down into the D3 Getting Started docs.

[Cut from last episode]

We had ended up on d3.scaleLinear because we started pulling on a thread of concepts we had to learn in order to understand d3.scaleUtc which we encountered on like line 5 of the first example in the docs. We spent some time exploring what scales are, learning about domains and ranges, and now we're trying to circle back to try to understand d3.scaleUtc...

[MPJ googles 'd3 scaleutc']

If you're watching this super-evergreen content from the future, I'm using a so called search-engine here, which was a service that people who own Vinyl players used to locate information.

[Reading from https://d3js.org/d3-scale/time#scaleUtc]

[MPJ Reads: "Timescales are a variant of linear scales that have a temporal domain. Domain values are coerced to dates rather than numbers, and the invert function also returns a date."]

Hmm. This implies that scales have an invert functionality, which we haven't used before but might try out in this episode. [MPJ continues reading: "Timescales also implement ticks based on calendar intervals, which can simplify generating axes for temporal domains."]

[MPJ makes hesitant sound] This is starting to sound like too deep waters too early for my taste, so I'm going to backtrack a little bit up the rabbithole, into the specifics of the d3.scaleUtc function.

So we read the docs here. We see that it says ["Equivalent to scaleTime, but the returned time scales operates in Coordinated Universal Time rather than..."] Wait. Actually, I realize here, if a sentence begins with ["Equivalent to scaleTime, but"] then we actually need to understand what the hell scaleTime is, in order to understand that sentence.

So I'm gonna navigate to that. [Navigates to https://d3js.org/d3-scale/time#scaleTime] So we see here the signature of scaleTime, and then you pass in domain and range. So domain and range are concepts familiar to us from last episode, this call even looks kind of like scaleLinear. ["Constructs a new time scale with a specified domain and range,"]

Um, and then it goes, ["The default interpolator and clamping disabled."] And here, interpolator, default interpolator? I mean, I kinda think I know what interpolation is, (laughs) but, I mean, do I really? I'm not sure. And I certainly don't know what the default interpolator is. And it's really strange here in the docs - like, there's a link.... They have linked to, like, default as a separate link and then interpolator. So I'm assuming that interpolator links to, presumably, the general concept of interpolation (laughs) and default interpolator, uh, links to, um, whatever a default interpolator is.

Um, so, (sighs) what do I click on here? Which fork in the road is the next step? The general thing or the specific thing? Well, if you find yourself indecisive, and more information gathering would just make you more indecisive, it's wise to fall back to a completely arbitrary heuristic, such as... going from left to right. (laughs) Let's do that - we're clicking on default!

And then we end up on this page, uh, for the docs for d3.interpolate [Looking at https://d3js.org/d3-interpolate/value#interpolate], which ... interpolates, yeah, between the value A and B, I guess?

Ah, ["returns an interpolator between two arbitrary values, A, and B"].

[ Highlights code:]

And then they go like, okay, d3.interpolate. You can pass in red and bl- whaat? you can pass in a string? And then that's parsed to... to color? (laughs) Okay. And then that returns an interpolator, um, and then you can call that interpolator with 0.5, which I guess then is 50%, and then you end up on, uh, what I guess is, whatever color is halfway between red and blue.

Okay. Okay. (sighs) So I guess that this is kind of like a master or meta interpolator that can handle two arbitrarty values.

So, okay, so ["the interpolator implementation is based on the type of value B using the following algorithm ... "1. If b is null, undefined or a boolean, use the constant b."] uh. This one, (laughs) okay, this one actually just confuses me. No, okay, wait, it actually makes sense, if I try to interpolate from anything to null or true or false, it sort of just doesn't make sense, interpolating to nothing, or true/false then your return nothing, and true/false. Sort of. Point two is probably going to make us a bit wiser - [" if b is a number, use interpolateNumber. 3. If b is a color or a string coercible to a color, use interpolateRgb. "] Yeah, so this is kind of like a master type inference interpolator thing. The default interpolator, the infering interpolator. Interpolator hub.

So (mouse clicking)... so I think that we'll, we'll stay on d3.interpolate for this episode. Like, this feels like a comfy place to be, um, d3.interpolate (taps laptop) that's what this episode is going to be about. (clicks tongue) And we'll probably stay on its first, or technically second, I guess [highlights point 2 in d3.interpolate] functionality, interpolateNumber. We'll save the other interpolators for later episodes. But I don't think that we should jump into interpolateNumber, I think we should talk about d3.interpolate in the context of, of interpolateNumber. Yeah, that's what we're gonna do. (snaps fingers)

I am MPJ, you are watching Fun Fun Function and this ... is Dirty D3.

FUNdamentals: What is interpolation?

So, the dictionary definition of interpolation is

["In the mathematical field of numerical analysis, interpolation is a type of estimation, a method of constructing (finding) new data points based on the range of a discrete set of known data points."]

I'm going to dumb that down a little for myself:

["In math, interpolation is a type of estimation, a method to dream up new data points based on an existing range of data points."]

That's the definition, but what is interpolation, fundamentally?

Ball catching

Interpolation is something our brains do naturally all the time without us even realizing it.

Consider catching a ball. When someone throws a ball to you, your brain doesn't just see individual points in space - it instantly creates a smooth curve connecting those points. You're interpolating the ball's trajectory from just a few observed positions!

This is remarkably sophisticated math happening unconsciously. Your brain is constructing a three-dimensional arc, predicting where the ball will be in the future, and coordinating your hands to intercept it at precisely the right moment.

It's the same formula we just saw: "Interpolation is a method to dream up new data points based on an existing range of known data points."

What's amazing is that even three-year-olds can do this complex interpolation instinctively, unless they are doing it using d3, so in our exploration today, we are going to look at something simpler - interpolating between known points on a map...

Travel example

When learning data tooling I find that it makes things a lot easier if you work with relatable data points, the more personal the better, so I'm going to tell you a story about an awesome commute I had in my twenties (and I urge you to think about one of your own)

Nowadays, I live in Stockholm, but back then, I lived in Uppsala, which is north of Stockholm. Uppsala is pretty cool, it has a Borg Cube [shows uppsala kongresshus]

I commuted into town every day, 38 minutes one way, and I really liked that commute acutally, it was nice trains and it was a good quiet and disconnected space to get things done or read.

So for the purposes of this video, we're going to model my commute as a line, that starts at 0 [Stockholm] and ends at 69 kilometer [Label: Uppsala]. [Animation shows a train moving along the line as MPJ speaks]

If you are an uneducated Imperialist, you might be unfamiliar with what a kilometer is and... I don't care

0, and 69, is our range of data points, two points: [0, 69] a start and end point. Now, if I ask you to tell me how long halfway to uppsala is, you can easily do that, but I want to point out that we don't actually have a data point in the middle of our range.

[0, ??, 69]

It's not there. If your intuition works like mine, it's so strong that it feels like there is a midpoint there automatically, sort of like closure works in a comic book [image of comic] But that data point is not fact, the two numbers around it are, and we use them as reference points to find a midpoint.

[0, ??, 69] = [0, 34.5, 69]

And that, on a higher level, is interpolation.

But, lets get practical, lets break out D3 and write some actual logic.

End screen intermission

Or, actually, lets do that in the next video, beacause we are commited to keep these episodes bite-sized, and you can continue to that episode right here.

Or maybe you feel like taking a well deserved break from learning D3, and then you might want to consider this recommendation - that has been hand selected by me, 0% algorithm, free-range-human-hands-picked.