score:8
the solution uses a tool called licecap, a screen capture utility for windows and mac. steps are following:
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:
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:
now start licecap and position it over the area you want to have in your animated gif file:
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.
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!
Source: stackoverflow.com
Related Query
- Creating animated GIF files out of D3.js animations
- Recording and saving an SVG animation as an animated GIF
- Creating an experience through an animated tree-like graph using angular/d3/css3/(?)
- How to switch out .csv files in d3.js with a button?
- How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
- Creating a table linked to a csv file
- Reading DOT files in javascript/d3
- Importing data from multiple csv files in D3
- Disabling all D3 animations (for testing)
- Can i use d3.js for creating interactive visualizations inside an android app?
- Achieving animated zoom with d3 and Leaflet
- Creating a border around your D3 graph
- How to show full text when zoom in & truncate it when zoom out
- D3.js - why mouseover and mouse out fired for each child elements?
- Creating D3 map of ellipse envelope data
- D3.js Plotting Multiple Data Sets from Separate Files
- Creating a temporal range time-series spiral plot
- Creating a custom d3 layout
- Load multiple files using the d3-fetch module
- Does d3's transitions and animations use requestAnimationFrame?
- Creating an asinh (inverse hyperbolic sine) scale in d3.js v4
- how find out if force layout done placing the nodes?
- D3.js chain transitions for compound animations for different shapes
- Space out nodes evenly around root node in D3 force layout
- Creating a Text Labeled x-Axis with an Ordinal Scale in D3.js
- Creating a swim lane chart using d3
- Creating scrollbars with SVG and d3.js
- D3js - Creating and easily updating a multi-line chart
- How to change speed of translate and scale when zooming in and out in D3 (using zoom.on & d3.event.translate, d3.event.zoom)?
- Space out part of the pie chart in d3?
More Query from same tag
- Move position of tree using javascript d3
- X scale function in D3.js keeps returning undefined
- How to animate height of bars down in Svelte
- Tooltip is not getting displayed
- Parse json string stored in database to render D3 tree layout
- How do you create a d3 line function that will draw 2 lines for x, y1, y2 data?
- Show yearly X labels for June instead of January on d3.js chart
- html in d3.js text tag
- Javascript data structure for json data
- Why does my D3js line chart fail to render values and x-axis?
- How to use d3.js graphs in Ext.js?
- Dynamic update to y-axis of a zoomable area chart
- d3.js - Query regarding interpolate values
- Looking to implement a timeline package in Angular 6
- D3 time scale tickFormat doesn't ordered based on the range
- d3 multiple svg with 1 row of data each
- d3.js change color and size on line graph dot on mouseover
- D3 V6 - Zoom and Drag Functionality
- Billboardjs chart update visibility of y axis after chart generation
- D3 incorrect drag behaviour
- d3js w3c selector
- How to set different color for same text in D3?
- Creating Tool Tips Correctly Based on Individual Sums
- Using keydown event with d3.drag () to rotate a SVG
- d3.js bisector with unix timestamp
- Legend text background change on mouse-hover over d3 doughnut chart
- Transition font-size on Chrome after zoom in
- How to get a subselection of a D3.js selection
- Merge json entries with d3
- Getting a parent's child to find parent's child text width