These are awesome! I've been learning d3 and have been struggling a bit with animations. Does anyone mind breaking down one of these tweets and explaining how it works? I understand it's minifed but learning how to loop animations would be great.
What you see in the tweet is the code which runs in the animation loop. The animation loop is provided, along with all of the abbreviated function aliases, by this base file [1].
I've reproduced the guts of it below -
d3.timer(function(t) {
g.d([t]);
if (window.tweet) {
tweet(t);
}
});
The important bit is the t argument which is provided to the code you see in the tweet. Most of the animations are driven by this value, normally passed through a trigonometric function to provide some easing.
In the case of my Hello World example, the tweet code is as follows -
// Perform a data-join [2] with the parent set to the root node provided
// by the base file, the data defaulting to [t] as above and with a
// built-in behavior of appending an SVG text element in the enter selection.
T()
// Set the following attributes on the text element -
.a({
// Affine transform the element using a sc-ale transform.
// The scaling value is a function of the data item bound to the element (t).
// s is an alias for Math.sin and 1e3 is just shorthand for 1000 (saves 1 character!)
transform:d=>sc(4+s(d/1e3)),
// Make use of another alias to offset the text based on the normalised mouse position.
x:d=>mo[0]*10,
y:d=>mo[1]*10
})
// Set the text content of the text element
.t('Hello World')
This is by no means an exciting example but it should provide some clues as to how the more complex animations work.
