d3 built-in tweens?

[Scott Cameron]

I spent some time on my bus ride home today going through Mike's Path Tween example in some detail.  It took me a little while to understand exactly what it was doing but at some point it all clicked and I got some strange looks because I literally laughed out loud when the details came together for me.  What a clever solution!  This is the kind of thing that makes programming with d3 so much fun.

And the fact that it is generalized for practically any path just floors me.  I wouldn't have guessed that converting a curved path into a series of ~4px straight lines would look good, but it totally does! Very nice.

The fact that it is generalized brought up a question I'd actually been meaning to ask about.  Has it ever been considered to add some of the more useful and generalized tweens into d3 itself?  This would be in a similar vein to the way that d3.svg shapes utilities are part of d3 (and, in some cases, the tweens would probably be used in conjunction with the shapes).

A polar tween for arcs might be a good candidate.  A nice tween for inserting new data points into a line or area chart (stretching the line/area nicely from the middle outward) might be another one.

Does something like this sound like it might be a decent fit with the current API?

Cheers,

scott

[Kai Chang]

Layouts and shapes can be used with data-space interpolation to create
custom tweens. Check out the sunburst example:

http://mbostock.github.com/d3/ex/sunburst.html

I played with this a while ago, trying to get the chord layout to
tween. This was before learning the enter/exit pattern, so I later got
stumped on how to add/remove arcs and chords. This was before the
reusable chart pattern too... also I'm not sure about overriding the
variable "i" in the tweens. There's a few issues, maybe I'll update
this at some point and put it on bl.ocks.

http://exposedata.com/tutorial/chord/
http://exposedata.com/tutorial/chord/latest.html (relies on
out-of-date d3 version)

A short pattern to implement, but conceptually tough because it
requires transitions, layouts, shapes, interpolators and tweens. Also
needs to keep the past data state somewhere for interpolation.

More simples examples of this would be helpful.

[Mike Bostock]

Glad you enjoyed that example. :)

> Has it ever been considered to add some of the more useful and
> generalized tweens into d3 itself?

Maybe. I think the challenge is designing the API so that it strikes
the right balance between convenience and generality. Is this
something that will be used often? When it is used, does it
significantly make your life easier? How complicated is this feature
to implement, test and explain? In other words, is the power-to-weight
ratio high enough to justify inclusion in the core API, or is this
better suited as a plugin or example?

It'd be possible to interpolate paths this way automatically by
extending d3_interpolateByName to return this special interpolate for
"d" attributes:

https://github.com/mbostock/d3/blob/3.0/src/core/interpolate.js#L249

But I'm pretty sure we don't want to do this because it's probably
slower than the current string interpolator for paths, and also might
introduce undesired artifacts in the common case where the start and
end path do have the same number of control points. So I think it's
probably best suited as something you'd use with attrTween to override
the default interpolator, though I could see refactoring the example
to make it a bit more general, say by defining an interpolatePath(a,
b) method that creates off-screen path elements rather than relying on
cloneNode.

Mike