How to create a dynamic area chart

💡 This is an article to explain how to create a GIF out of a specific area chart from the blog post A shrinking surplus of women.

Datawrapper does not offer the option to create GIFs with your chart. Please note that we only tested this on area charts. This is not one of the core features in Datawrapper and therefore 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.

How to create a GIF out of your area chart

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)<br>

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