score:8

Accepted answer

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: enter image description here

  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: enter image description here

  3. now start licecap and position it over the area you want to have in your animated gif file: enter image description here

  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. enter image description here

  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: enter image description here

that's it!


Related Query