ABeamer has its own charts component, but it can also be used to create frame-by-frame animations of other chart and map libraries.
D3.js has been widely used to create interactive animations for data science, but since its animation engine is mainly designed to be used interactively, if want you to generate the animation frames to generate animated gifs or movies by using a video capture application, you can’t guarantee the output quality nor guarantee that the animation is timely captured.
By using ABeamer on top of D3.js, you can generate high-resolution frames at a selected frame rate.
To proof the concept, we will use an D3 datamap animated with ABeamer, and use that animation to generate the frame sequence and an animated GIF.
Just follow the following steps:
If ABeamer isn’t install, read here how to install it.
Create ABeamer project named
- Add the d3, topojson and datamap script files to
- Add the datamap container inside
story is ABeamer root element, and supports multiple scenes just like a theater play)
- Add basic style to the
- Load your data.
dataLoaded with that data.
- Place the animation and render command inside
addStills to build the animation pipeline,
story.render to generate the file frames.
- Create a d3 datamap with bubbles as usual.
Disable all d3 animations since these animations aren’t controlled by ABeamer. In this case, set
animate: false in the
Since d3 isn’t a DOM element, we need to use ABeamer
VirtualAnimator facility to animate a d3 datamap.
Our first goal is to animate the bubbles. In order to archive this process we derive from
ABeamer.SimpleVirtualAnimator since it allow us to execute
animateProps once per frame, unlike
ABeamer.VirtualAnimator which allows to call per property change.
- First, we prepare the data:
- Second, we create the
MapAnimatorwith the method
- Third, we add the
MapAnimatorto the story:
selector will be used animate the properties.
- Forth, we add an animation to the story:
With these 4 steps, ABeamer will execute
MapAnimator.animateProps once per frame, the number of frames is defined on
ABeamer.createStory for 2 seconds, iterating the property
0 (defined by
1 (the end value is
1 by default).
The 2nd part of the animation is to zoom to Europe.
d3.js allows zooming by using
To add this animation with need the new iterator
zoom running from
Before the zoom animation starts, the
zoom value will be
- First, change the animation code to incorporate the
- Second, change the initialization of
VirtualAnimatorcode to reset the
- Third, change scene animations to incorporate
With these 3 extra steps, once the bubble animation finishes, it waits for 2s and then animates the zoom for another 2s.