Description
Cliquez sur ce lien pour ouvrir le politOscope.
Le PolitOscope exploite les données des résultats des élections présidentielles et européennes. Cette dataviz interactive originale et innovante permet de découvrir l’évolution du vote des français sur 20 ans.
Réaliser une visualisation interactive fluide sur le web pour explorer un jeu de données conséquent implique de faire quelques compromis! L’idéal pour obtenir une bonne expérience utilisateur est de pouvoir charger toutes les données en même temps que la page et de ne pas avoir à faire des appels vers le serveur lorsque l’utilisateur explore les données. En pratique, pour ne pas avoir un temps de chargement trop long, typiquement inférieur à 30 secondes, le volume de données à télécharger ne peut guère dépasser une vingtaine de Mo.
Dans le cas du PolitOscope , l’exercice a donc consisté à réduire environ 500Mo de données brutes de résultats électoraux (9 élections) et 40Mo de données géographiques pour obtenir au final un fichier de 18Mo. Ce travail a été réalisé à partir scripts écrits en python.
Ce fichier contient autant de lignes qu’il y a de communes en France métropolitaine soit environ 35000 et 32 attributs par ligne dont 27 pour les résultats des élections (liste/candidat arrivé(e) en tête, % voix et nb de votes exprimés) et 5 pour les communes (code-insee de la commune, nom, population, latitude et longitude).
Pour le politOscope, nous voulions que l’utilisateur puisse voir une carte globale des résultats, changer la date de l’élection, se promener sur la carte, zoomer, obtenir des informations au survol d’une commune par la souris et enfin localiser facilement sur la carte une commune de son choix. Et le tout avec des transitions fluides sans rafraichissement du graphique.
Ces contraintes nous orientent vers l’utilisation de la librairie JavaScript d3.js qui permet de créer des éléments graphiques dans le DOM du navigateur et de les faire évoluer en fonction des actions de l’utilisateur. Malheureusement au-delà de quelques centaines d’éléments, le navigateur ne suit plus et l’expérience utilisateur n’est plus satisfaisante. Nous avons investigué des solutions qui consistent à n’afficher qu’un nombre limité d’éléments ou communes indépendamment du niveau de zoom choisi par l’utilisateur. Nous avons obtenus des résultats encourageants mais pas totalement satisfaisants. Nous avons exploré en parallèle des librairies faisant appel au standard WebGL qui permet au navigateur d’utiliser l’accélération matérielle de la carte graphique de l’ordinateur. La librairie mapboxGL qui utilise ce standard donne des résultats très satisfaisants et nous l’avons retenu pour réaliser le politOscope.
Sur la carte, chaque cercle représente une commune et son diamètre est fonction de sa population. Pour éviter le recouvrement des cercles, le positionnement des communes a dû être modifiés. Dans un premier temps le fichier des contours des communes à été traité avec le logiciel ScapeToad pour réaliser un cartogramme qui déforme le contour des communes en fonction de la variable population. Ainsi la surface des communes devient proportionnelle à sa population. Cette transformation déforme la carte mais le territoire reste reconnaissable. Ensuite ce cartogramme a été traité avec le logiciel QGIS, pour calculer le centre géométrique de chacun de ces polygones nouvellement créés. Ainsi chaque commune se voit attribuer une nouvelle latitude et longitude. Cette représentation, proche d’un cartogramme de Dorling permet de visualiser l’ensemble des communes en minimisant le recouvrement des cercles.
Carte des communes de France
Cartogramme des communes de France
Carte des centres géométriques des communes du cartogramme
L’analyse des résultats des élections présidentielles et européennes ont fait l’objet de deux précédents articles :
Cartogrammes des élections européennes de 1999 à 2019 et Cartogrammes des élections présidentielles de 2002 à 2017
Technique
Réalisé avec la plateforme / notebook ObservableHQ et les librairies Javascript MapBoxGL et d3. Les données ont été préparées avec le notebook Jupyter / Python. La page HTML appelant le notebook observable et les données utilise le langage HTML / CSS et les librairies JavaScript Jquery et Bootstrap. Le PolitOscope est open source et toutes les informations sont disponibles sur le compte GitHub de l’assosiation TDV.
Auteurs
Le PolitOscope a été conçu et réalisé par Alain Ottenheimer (Datasens / TDV) avec le concours d’Alain Roan (perceptible.fr / TDV).