Organisation: OuestMediaLab (France)

Publication Date: 04/06/2017


This project, carried out in collaboration with Ouest France, a French major newspaper, is part of a data visualization contest on the French presidential elections of 2017. The team consisted of 3 design students from the École de Design in Nantes (, 4 computer engineering students from Polytech Nantes, the engineering school of the University of Nantes ( as well as a journalist from Ouest France ( The competition took place over a period of 2 weeks, with 4 full days in which the team met. In order to have a different angle of view than what one can see conventionally during the campaign in the classic media, we chose to approach this project via the system of sponsorships of the candidates for the election. In France, a candidate for the presidential election must receive the sponsorship of 500 elected representatives (mayors, county councilors, regional councilors, deputies) to see his candidacy validated. Our project thus presents the 21 biggest candidates for the presidential election in the form of planets, as well as all their sponsors in the form of satellites gravitating around the candidates. We propose to our users to be interested in these sponsors, and thus to understand, through several datasets, by whom are supported the different candidates, who is the candidate of the campaigns, who is the candidate of the young, who is the candidate of women, etc. This project is aimed at anyone who is interested in the French presidential elections, but also to everyone else, those who do not take the time to be interested, who do not have time to delve into austere articles. We have chosen to focus on the graphic and playful side of our website and propose a different experience. It is eye-catching to sail among the planets, and take pleasure in exploring the galaxy of candidates.

What makes this project innovative? What was its impact?

This project is an innovative project for various reasons. First of all on the merits: tackling the French presidential elections through the sponsorship system is something rather unusual in the French press. This makes it possible to show a little-known face of the French candidates: their elected supporters. Who are they ? What does this tell us about the candidates? Then, showing more candidates rather than simply the main ones, also differentiates us from what is done classically and allows the user to notice behavior at the margin. We have also chosen to show indicators to which the public is not necessarily accustomed, such as the PSCs of the sponsors, or the population of their respective communes, which makes it possible to answer questions such as: who is supported by the Farmers? Which is supported by mayors of very small municipalities? As regards form, the choice was to present a very playful realization, following the metaphor of the planets. This prompts the user to explore the data. And that's what it does: according to Google Analytics, our users are exploring the data for an average of 3min. The many animations also adds a sense of life that attracts users unaccustomed to exploring such data. We thus mark a real difference with what is done classically on such serious subjects.

Technologies used for this project:

It’s a fully web project. It mainly uses WebGL, via the PIXI.js library, to draw the planets and their clouds of supporters both on desktop and on mobile. GSAP is used to animate everything. We compute the barcharts with D3.js then move each points randomly in each rectangle on the WebGL side. For all that, we used vanilla JS, built with webpack, and HTML5/CSS3 (via SASS). We heavly use new ES6 features like classes and arrow functions. Before the front-end part, we had to work on multiple open-data datasets and join them. For that we simply used a MySQL database and a NodeJS script in charge of creating a big JSON file that is loaded in the webpack build. All the project is open-source and could be found on
Follow this project

Comments (0)

You have to be connected to contribute

You have to be connected to follow

Leave this project and no longer be informed about this project

By joining this project, you will be informed by email when an update or a new contribution is posted on the website.

Thank you for your active participation !

The GEN Community Team