How to create a GIF of your chart

Datawrapper doesn't offer the option to create GIFs with your chart. However, sometimes you want to show how something developed over time – and already use a line or area chart. There's a hack to create a GIF out of your chart. Please note that we only tested this on area charts. Since this is also not one of the core features in Datawrapper, we're afraid that we won't be able to help you with problems that occur, e.g. when you try to create a GIF of one of your charts. 

To create this GIF, place all areas in one chart and go to the preview page of this chart: https://app.datawrapper.de/chart/YOURID/preview (replace YOURID with the ID that your chart has, e.g. aM2B6. It will look like this: 

Now open the developer console. In Chrome, you can do so by pressing Option + Command + J

In the console, copy and paste: 

$.getScript('https://rawgit.com/gka/d3-jetpack/master/build/d3v4%2Bjetpack.js')

var year = 1950;

function step() {
    d3.selectAll('path.area').style('opacity', d => d.id == year ? 0.85: 0);
    if (year++ <= 2060) setTimeout(step, 100);
}

setTimeout(() => {
    d3.selectAll('path.area').style('opacity',0);
    setTimeout(step, 2000);
}, 3000);

You will need to adjust this code to your chart. If your date column is not called "year", but "Years", then you need to replace this. If your first year is not 1950, but 2018; and your last year is not 2060, but 2032, then you need to adjust this, too. 

If you click enter, this command will run. It will wait 3 seconds to load D3 from the script at the beginning of the command. Then nothing will happen for 2 seconds. Then it will run through all areas it can find and display them one by one. 

You can change the time each area is displayed with changing the number in setTimeout(step, 100); 

You can then screencast the result with a GIF software. You can then edit the GIF in a software like Adobe Photoshop.

If you want to display the years, copy and paste this code: 

$.getScript('https://rawgit.com/gka/d3-jetpack/master/build/d3v4%2Bjetpack.js')

var year = 1950;
var div;

function step() {
	div.html(year);
    d3.selectAll('path.area').style('opacity', d => d.id == year ? 0.85: 0);
    if (year++ <= 2059) setTimeout(step, 120);
}

setTimeout(() => {
	div = d3.select('body').append('div').st({position:'absolute',"font-size":"3em",left:70,top:110})

    d3.selectAll('path.area').style('opacity',0);
    setTimeout(step, 100);
}, 3000)

It will look like this (you can add the "Year" as a an annotation in Datawrapper):

Still need help? Contact Us Contact Us