Creating animated GIF files out of D3.js animations

Question

I am creating D3.js animations, like this: Demo

Let's say I want to present my work here (or on a blog). About the best I can do is post a picture:

On the other hand, if I, let's say, use the Python library Matplotlib for data visualization, I could produce an animated GIF file, and post it here:

I would like to programatically obtain similar animated GIF files out of my D3.js animations. How can I do this?

NOTE: I started working on getting events from d3.transition(), but so far I didn't have any luck.

Answer 1

The solution uses a tool called LICEcap, a screen capture utility for Windows and Mac. Steps are following:

1. Download LICEcap and install it. Now, if you start this program, it will have a rather unusual shape, just a thin frame, and everything inside the frame will be transparent:

2. Go to the window with your D3.js animation and prepare everything so that you could start animation at some point. Let's say we want to record this example from d3js.org:

3. Now start LICEcap and position it over the area you want to have in your animated GIF file:

4. Make sure that you enter at least 20 FPS in the bottom left edit box, otherwise the recording will be low quality. Press record. A dialog will first appear, and you choose here whether you want your GIF file to be in an infinite loop, or just repeated once, or any number of times. Also an interesting option is to add some visual clues for mouse clicks. Choose also filename, and press Save.

5. Now you do whatever you have to do to trigger animations. I pressed buttons Grouped and Stacked several times. After I decided it's enough, I pressed Stop. The resulting file is:

That's it!