Drawing on a blue sky background. A white shape evokes both a cloud and a cocoon on which a gray bird-like silhouette is nestled. Its beak is wide open, appearing to be either waiting to beak or squawking.

For 'Yoland Bresson' module

(original version here)

The Libre Currency Meetings is a bi-annual event with one day dedicated to deepening the notion of libre currency. One of the workshops, called 'Yoland Bresson' module, requires the production of animated graphs that discourages many. So why not code these animations using D3.js? The result is presented in this page and is intended to be easily reusable.

Average price per square meter of old apartments in Ile de France

In the 'Yoland Bresson' module, different data must be retrieved and entered in tables in order to be analyzed in a spreadsheet:

Once in the spreadsheet, this data can easily be formatted and exported in CSV format to get a file of the following form:

What's in this file?

  • The first line contains the names of the columns in the table; from the third column, these are only dates in the format "day/month/year";
  • on each line starting from the second, amounts are expressed in euro, with one amount per date;
  • the beginning of each line indicates the name of the expressed values (price, mass, income, etc.);
  • the second element of each line indicates the number of the considered department; it is left empty when the line does not correspond to a department.

It is up to each person to modify the values of this file. Some will consider a specific type of average or interpolation, they will then have different results (probably negligible). Others will add new lines (for the price of a load of bread, for example). A testable version can be retrieved here as a compressed archive. By opening the file "index.html" in a browser, interactive graphs, quite similar to those presented above, should be displayed. By opening this file with a text editor, you can see that the code just describs the general layout of the document. In fact, all the details are added dynamically, via the javascript code which exploits the contents of the CSV file (found in "data/YolandBresson-Idf-en.csv").

This code is also available here as a gist.

Average price per square meter of new housing in France's metropolitan regions

For this graph, the data comes from the Eider database.

Once in the spreadsheet, this data can again be formatted and exported in CSV format to obtain a file of the following form:

Here too, the CSV file can be customized, it can be found in "data/YolandBresson-Regions-en.csv"..