Objectif du TP

Nous nous inspirerons de la visualisation du bipartisme du Sénat américain

pour visualiser le bipartisme de l'assemblée nationale française en 2015. Chaque noeud représente un homme politique. La force entre les liens correspond au nombre de fois où ils ont été d'accord sur un vote (soit tous les deux pour, soit tous les deux contres).

0. Fork de l'exemple des Miserables

Forkez l'exemple de visualisation D3 des relations entre les personnages des Misérables. Cet exemple inclut 2 fichiers supplémentaires: scrutins.json et acteurs_simple2.json.

Le premier fichier contient tous les votes de l'assemblée depuis 2012. Cela inclut pour chaque vote et pour chaque parti, l'ensemble des personnes ayant voté pour, ou ayant voté contre (ou s'étant éventuellement abstenus -- nous les ignorerons ici). L'ensemble des acteurs politiques et le nom de leur parti est codé par une référence.

Le second fichier contient ainsi l'ensemble des références concernant les acteurs politiques (donnant ainsi leur nom, prénom, et autres données personnelles), ainsi que les partis politiques. Le second fichier ne sera utile que pour la partie optionnelle du TP.

1. Explorez les fichiers JSON

Utilisez un viewer de fichiers JSON (e.g., l'interface web JSON Viewer) pour explorer rapidement les deux fichiers JSON. Les données qui nous interesseront dans scrutins.json incluent les champs scrutins/scrutin/{#ID_scrutin}/ventilationVotes/organe/groupes/groupe/{#ID_groupe}/vote/decompteNominatif/{pours|contres}/votant/{#ID_votant}/acteurRef où #ID_scrutin represente le scrutin qui a recu les votes, ID_groupe identifie un parti politique et ID_votant identifie un membre de l'assemblée nationale ; scrutins/scrutin/{#ID_scrutin}/dateScrutin pour connaitre la date du scrutin ; scrutins/scrutin/{#ID_scrutin}/ventilationVotes/organe/groupes/groupe/{#ID_groupe}/organeRef qui indique le code du parti. La date du premier scrutin s'obtient en accedant à graph.scrutins.scrutin["0"].dateScrutin.

Les données qui nous interesseront dans acteurs_simple2.json incluent les champs export/acteurs/acteur/{#ID_acteur}/uid/#text qui fournit l'identifiant de chaque membre de l'assemblée nationale et correspond au #ID_votant/acteurRef de scrutins.json ; export/acteurs/acteur/{#ID_acteur}/etatCivil/ident/{prenom|nom} qui donne l'état civil du votant ; export/organes/organe/{#ID_organe}/uid qui fournit l'identifiant des partis politiques et correspond au #ID_groupe/organeRef de scrutins.json ; export/organes/organe/libelle qui donne le nom du parti politique en question.

2. Adaptez la fonction de création de graphe

Nous ne nous interesserons qu'aux scrutins de 2015.

  1. Itérez sur tous les scrutins, et testez leur date pour ne conserver que ceux de 2015. Nous pourrons utiliser la fonction getFullYear() de Date.
  2. Pour chacun de ces scrutins, itérez sur les groupes. Stockez dans un tableau temporaire les pours et contres de chaque scrutin (et non de chaque groupe!), afin de pouvoir corréler les votes entre les acteurs de partis différents, ainsi que le nom de tous les acteurs en jeu. Vous pourrez utiliser la fonction concat() afin de concatener les tableaux de pours et contres.
  3. Aidez-vous d'un dictionnaire pour compter les votes pour et contre de chaque paire d'acteurs, en iterant sur ce tableau temporaire (en itérant deux fois sur les pours, puis en iterant deux fois sur les contres). On pourra utiliser une fonction de hashage arbitraire qui combine les deux acteurs de la paire -- par exemple en concatenant leurs identifiants. Pour incrémenter une valeur possiblement inexistante dans le dictionnaire, on pourra utiliser monDictionnaire[clef] = ++monDictionnaire[clef]||0; Ainsi, une valeur "undefined" aura une valeur par défaut de 0. A noter que si un acteur A a voté la même chose que l'acteur B, alors B a voté pareil que A... il n'est donc pas nécéssaire de compter ces deux cas differemment. Pour l'instant, nous considererons uniquement les identifiants des acteurs et des partis, pas leurs noms.
  4. Créez enfin le graphe qui sera affiché avec D3, en remplissant des champs "source", "target" et "value" de chaque lien, et "id" et "group" de chaque noeud.
  5. Ajustez les attributs "opacity" et "stroke-width" des liens, ainsi que le paramètres strength de la force "forceLink" de la simulation afin d'améliorer la visualisation.

Attention: le graphe obtenu aura un nombre trop élevé de arcs (j'en compte 337377), et votre machine ne tiendra probablement pas la route. Décimez alors votre graphe en ne considérant que les arcs correspondants à plus de N votes conjoints (la visualisation ci-dessus a été obtenue avec N=10, mais il faut attendre près de 2 minutes pour l'obtenir! débugguez avec N=20 au moins, ce qui laisse déjà près de 8000 liens). Aussi, mettez le block en pause lorsque vous codez afin de ne pas ralentir inutilement le navigateur.

Si vous avez des problèmes avec block builder, vous pouvez :

  1. Appuyer sur le bouton pause pour que la page ne se rafraichisse pas à chaque changement.
  2. Lancer un serveur local en lancant la commande "python -m SimpleHTTPServer 8080" depuis le repertoire de votre fichier html, et en vous connectant ensuite à http://localhost:8080

3. (Optionnel) Affichage du nom des acteurs et partis

Changez la fonction "title" pour afficher le nom et le parti des acteurs lorsque la souris survole un noeud. Pour cela, utilisez le deuxième fichier pour retrouver les infos correspondant aux identifiants.

Le nom du parti json2.export.organes.organe[i].uid se trouve dans: json2.export.organes.organe[i].libelle

Similairement, le nom de l'acteur json2.export.acteurs.acteur[i].uid["#text"] se trouve à json2.export.acteurs.acteur[i].etatCivil.ident.prenom.

Rendu pour ce TP

Vous pouvez discuter entre vous, mais le travail se fait et se rend individuellement. Ce TP est noté. Soumettre au plus tard mercredi 20/12 à 23h59 le formulaire de réponse. Il vous sera demandé:

  1. Prénom, Nom
  2. URL du block
  3. URL Screenshot (https://imgur.com/upload)
  4. Quel champ de quel fichier JSON permet d'obtenir le libellé de la profession de chaque votant ? Donnez le chemin complet permettant d'accéder à ce champ.
  5. Quelle est la valeur de scrutins/scrutin/{13}/ventilationVotes/organe/groupes/groupe/{3}/vote/decompteNominatif/{contres}/votant/{1}/acteurRef
  6. Avec N (le nombre minimum d'arcs) suffisamment grand, les deux partis principaux sont déconnectés l'un de l'autre. Réduisez N jusqu'à ce qu'ils soient connectés. A partir de quelle valeur de N les deux partis sont-ils connectés ? Que représente cette valeur ?
  7. Quelles modifications avez-vous faites à la visualisation (couleurs, forces, épaisseur...) ?
  8. Avez-vous fait la partie optionnelle ?