In this last installment of our Making of the Tour series (see the previous overview and simulations posts), we look at some of the fun and random. In detail abides the demons, or as Mies van der Rohe1 would have it, the divine. Judicious use of micro-animations, like the ones described below, can go a long way in directing attention and maintaining interest. And D3’s timer and interval functions provide plenty of flexibility to bring them to life and to integrate them into larger narratives or visualizations.
Animated Arcs
This micro-animation is easy to miss in the Tour, as it is tucked away in an overview sneak-peek that is itself meant as a bit of hidden foreshadowing only available to the patient and keen scroller.
The animated arcs are not as technically simple as one might hope, but manageable, as shown here.
Stopwatch
This stopwatch is used twice in the Tour, once alongside the neural network animation (near the end of the recommendation systems section), and once in the middle of the new style development section.
Elegantly drawn by Liz Cruz, the animation is pretty simple, and parametrized by the number of turns around the circle and milliseconds length of each turn. Feel free to use the code as is.
Unfurling the UI
In the human computation section, a UI image is pulled out from a vertical line in the flow description.
The code works by mapping all of the path points from a given x,y position to some some other x,y position as a function of time, wrapped in a d3.timer loop. (The UI image was also drawn by Liz Cruz.)
Typing
This sort of typing animation occurs twice in the Tour, once when discussing stylist notes at the very end of the human computation section, and once in the animation in the data platform section. In the former it is a scroll-based animation, while in the latter it is timed, but the basic idea is the same in both cases.
See the simplified code here.
Datanado
And a fun little twirl to end on. The “datanado” is used in the data platform section of the Tour.
Check out the simplified code here.
1 The phrase “God is in the details” is often attributed to the architect Mies van der Rohe, including by the New York Times in his obituary, but erroneously so. (Though understandably so, given his sparse and clean aesthetic.) It also surprisingly predates the fiendish version, rather than being a response to it. https://en.wikipedia.org/wiki/The_devil_is_in_the_detail ←
