Every Friday, my dataviz team at work does a Dataviz Deep Dive, where someone shares a topic they have been learning about with the group. We were critiquing a line graph and I mentioned I liked the choice in monotonic splines between data points because it wouldn't overshoot a min or max. Some people weren't familiar with the different spline types, so last Friday I presented a deep dive on the curve functions available in D3 and when to choose one over the other. I made a notebook that graphs the points in the SVG path code so you can drag the data points around and really see the difference in curve types. In the future, I might add an optional curvature comb, and try creating custom curves not in D3, like the Hobby spline or the Euler spline.
Notebook: https://observablehq.com/d/8fca95d76f562ff6
Do you guys know of any other cool Bezier splines features I could add?
🙌 2
🎯 2
❤️ 1
👀 6
s
Sam Mead
03/24/2025, 9:43 AM
Wow, thanks for sharing – that's a really cool notebook! I have often wondered how the various curves are calculated but whenever I have tried to look it up I am surprised how complicated the descriptions are. So while it's not really a feature, a short description of what each curve represents would be cool. E.g. for basis, does the curve look to emulate some kind of moving average between neighbouring points?
l
Lao
03/24/2025, 6:55 PM
@Sam Mead, that's a good idea, I'll add that once I think about how to describe each one in a few words.
To give a longer explanation here, C2 is the smoothest spline you can make with cubic Bezier curves, but it requires a lot of constraints. For a spline to be C2, if you interpolate a point over the spline, the point can't have any sudden jumps in position, velocity or acceleration. You have two main ways to make a C2 spline:
1. natural splines, which pass though all the control points, but you lose local control. Moving one point moves all tangent handles, but the effect diminishes for the more distant tangent handles.
2. b-splines, which only moves the part of the curve close to the control point, but at the expense that now the spline don't go though the control point.
If you want a more technical explanation, I highly recommend the video in the notebook. At time 11349, she introduces basis functions, which are used to generate the basis spline:
https://youtu.be/jvPPXbo87ds?t=2973▾
❤️ 1
s
Sam Mead
03/24/2025, 8:38 PM
Thanks for your additional thoughts! I have the video open in a tab but just didn't have a chance to dive in yet