Dans le cadre du Challenge Open Data nous avons choisi de réaliser une visualisation permettant de percevoir les proximités politiques des députés de l’Assemblée Nationale. Nous voulions mettre en évidence les logiques de groupes potentielles, les députés votant souvent a contre-courant de leurs groupes parlementaires, etc. Afin de rendre visible ces relations, nous avons affiché, dans un tableau à doubles entrées (une matrice de similarités), le nombre de votes communs entre les 577 députés de l'Assemblée nationale. Le tableau donne une vue globale des députés ordonnée par groupes parlementaires. L’interface proposée permet d’obtenir une vue centrée sur deux groupes parlementaires en particulier ainsi que d’identifier les députés qui constituent cette matrice.
Notre source de données a été le site d’opendata de l’Assemblée Nationale. Nous avons notamment récupéré le résultat de 1201 votes de la XIVe législature (démarrée le 20 juin 2012) ainsi que le jeu de données répertoriant les députés de cette législature.
Ces données étaient disponibles sous formats JSON ou XML. Le choix d’utiliser les fichiers sous format JSON était d’abord motivé par la facilité d’exploration manuelle et est resté le choix le plus compatible avec le langages utilisé dans ce projet : le Javascript.
Ces données brutes doivent alors être nettoyées et formatées afin de remplir notre base de données. Pour cela, nous avons développé des scripts Node.js. Ces scripts parcourent les json de données brutes et insèrent, à l’aide du plugin node-postgres, les données dans une base PostgreSQL.
Une fois les données brutes insérées, il a fallu générer des tables de données induites de ces données brutes. En effet, les données brutes nous donnaient, pour chaque scrutin, le vote de tous les députés, mais nous avions besoin d’un score de similarité entre chaque paire de députés. Nous avons choisi de représenter cette similarité en calculant le nombre de votes communs entre deux députés. Les similarités ainsi calculées sont insérées dans une nouvelle table de la base de données.
Puis, nous avons fait un script Node.js (toJson.js) qui parcoure notre base de données afin de recréer un nouveau fichier JSON.avec une structure adaptée à notre frontend. L’application finale en HTML récupérera les données de ce JSON.
Comme recommandé pour ce projet, nous avons commencé par utiliser D3.js. C’est une librairie JavaScript de visualisation de données. Nous avions réussi à obtenir un prototype plutôt avancé de visualisation avec quelques données simulées. Ces données étaient représentées par une matrice de similarité, ordonnée soit par parti, soit par ordre alphabétique. Des animations permettait de passer d’un ordre a un autre. Afin de tenir les délai de ce projet, ce prototype a été réalisé en parallèle du travail sur le traitement des données.
C’est lors de notre première essai sur le jeux de données complet que nous avons mis en évidence de grosses pertes de performances de la visualisation D3. Les 577x577 élements de notre matrice d’adjacence se sont révélés atteindre la limite de performance du framework. Le temps de chargement de l’application était très long (dizaine de secondes) tout comme les temps d’animations (de la plus simple : la mise en surbrillance d’un élément sélectionné jusqu’au tri animé). Ces temps longs sont dus à l’utilisation par D3 de dessin vectoriel (svg) peu adapté a notre sujet, vu que nos éléments, pour pouvoir être représentés simultanément, doivent être de taille infime (1x1 pixel).
Après réflexion, nous sommes donc repartis de zéro en utilisant cette fois canvas. Cette fonctionnalité d’HTML5 permet de dessiner depuis le code Javascript de la page. Canvas nous as permis de représenter facilement les députes par des lignes/colonnes de députés pixel. Nous avons donc réussi à représenter une première matrice de similarités en un temps raisonnable (moins d'une seconde).
Cependant, cette première vue permet d’avoir une vue d’ensemble des proximités politiques des députés mais nous voulions offrir une vue de sélection plus précise. Nous avons alors implementé une deuxième matrice d’adjacence. Cette deuxième matrice se limité a l’affichage des deux groupes politiques qui englobaient la position de la souris. Cette deuxième vue permet ainsi à l’utilisateur de distinguer plus précisément les similarités de la première matrice. Les différentes zones dans la première matrice sont délimitées par un cadre vert lorsque l’utilisateur passe sa souris au dessus. Au clic, la deuxième matrice est dessinée à droite de la première.
Concernant les interactions possibles de la deuxième vue, nous voulions rendre compte de la granularité de nos données : les députés. Un clic sur la deuxième matrice fait donc apparaître le nom et la photo des députés associés a la ligne et a la colonne de l’endroit du clic. Cela permet d'enquêter sur des ruptures au sein de la visualisation et de se renseigner par exemple sur l’identité d’un député votant moins souvent comme les membres de son groupe parlementaire.