;
Oct
20
2013

Autopsie d'une dataviz [3] : une carte en anamorphose avec champs de sélection

Retour complet sur la création d'une carte par anamorphose, bien utile pour accentuer les valeurs extrêmes de données.

carte_anamorphose

Ça faisait un moment que je voulais faire un long article sur la relation entre abstention et vote FN aux élections présidentielles. Loin de moi l'idée de prouver une relation de cause à effet. On ne le répétera jamais assez : corrélation n'est pas causalité.

Je trouvais simplement assez étrange que l'on fasse des caisses à longueur de temps sur les électeurs FN, et qu'on ne produise à côté de ça que de courtes références sur les abstentionnistes, qui sont pourtant bien plus nombreux dans le scrutin présidentiel.

Une carte me paraissait être une illustration très appropriée pour comparer les deux, et surtout des foyers d'abstentionnistes ou d'électeurs FN étalés dans le temps ou non.

A la recherche du meilleur type de cartes

Quand on se lance dans de la cartographie de données très basique, on est souvent tenté par les cartes choroplèthes, comme celle que vous trouverez ci-dessous :

Le gros avantage de ce type de cartes est qu'il est très facilement compréhensible par le lecteur.

Quel que soit le paramètre considéré (qualité de l'air, production de poireaux ou vote écologiste), on devine aisément que les zones les plus foncées sont celles où le paramètre est le plus élevé.

Le vrai problème pour moi était d'ordre technique : je ne savais pas comment faire pour rassembler des jeux de données différents sur une même carte (par type d'électeurs et par année), bien que j'aie pu tomber sur l'un ou l'autre exemple avec des cases à cocher/décocher.

Mais rien qui m'inspire plus que ça, jusqu'à ce que...

Les cartogrammes passent par là...

J'ai fini par tomber un peu par hasard sur des cartogrammes.

Pour résumer grossièrement, un des algorithmes les plus rencontrés pour créer ce type de cartes consiste à appliquer une force sur des polygones, calculée notamment à partir de l'aire "absolue" du polygone et d'une valeur rattachée.

Avec cet algo, les zones géographiques ne se contentent plus d'être colorées, elles sont concrètement déformées par les valeurs que l'on souhaite comparer. Les zones les plus "hautes" sont très enflées, tandis que les plus "basses" sont comme aspirées.

Première piste

J'ai voulu essayer de créer un cartogramme avec les voix de l'abstention et avec celles du FN sur plusieurs présidentielles, et commencé à chercher des outils qui me permettent de le faire.

La première méthode que j'ai testée consistait à :

  • joindre une base de données aux polygones départementaux grâce à QGis, avant d'exporter le résultat en .shp
  • me servir ensuite de l'outil open source Scape Toad pour créer le cartogramme à partir des données contenus dans le .shp pour ensuite exporter le résultat en .svg
  • animer les différents .svg (un par paramètre couplé à une année de présidentielle) et programmer des transitions entre

Plusieurs difficultés sont vite manifestées, dont :

  • la manœuvre un peu tirée par les cheveux et surtout le temps qu'elle représentait
  • surtout, l'impossibilité pour ScapeToad de correctement interpréter les données que je voulais utiliser dans le cartogramme. J'ai eu beau vérifier méticuleusement dans QGis que mes colonnes abstention et/ou voix FN était bien des cellules chiffres, ça n'a pas mieux marché. Aïe...

J'ai gardé l'idée d'un cartogramme avec ces deux types de données dans un coin avant de voir le travail diablement efficace d'Etienne Côme avec la France du Bon Coin.

Dans ses sources, il cite un exemple états-unien qui a la particularité d'utiliser un double champ de sélection (un pour les années, un pour le type de données). Tiens tiens :-)...

La recette

Pour arriver à ce résultat qui permet d'animer une carte anamorphosée par différentes données contenues dans un même .csv (miam miam !), il faut utiliser quatre librairies JS :

  • TopoJSON, qui permet d'encoder les polygones pour un résultat plus léger et optimal que le GeoJSON, ce qui n'est pas rien quand on veut s'amuser à les déformer
  • D3.js pour l'affichage de la carte, la gestion des transitions, de l'affichage des informations, etc...
  • cartogram.js, pour créer ledit cartogramme
  • colorbrewer.js, pour colorer les polygones à la manière des cartes choroplèthes

En réalité, on peut gruger la partie TopoJSON en utilisant mapshaper. Cet outil permet en deux temps trois mouvements de convertir des fichiers .shp ou .geojson en .topojson et, cerise sur le gâteau, d'appliquer une simplification comme dans l'illustration suivante :

simplification_poly_

 Ensuite, il faut que le fichier .csv soit correctement paramétré pour que le passage par les champs de sélection se fasse sans heurt.

Dans cet exemple, toutes les colonnes possèdent les trois premières lettre du paramètre suivies de l'année (par exemple ABS2002). Evidemment, rien n'empêche d'imaginer glisser plus de paramètres ou plus d'années, le principe sera strictement le même.

Attention tout de même !

Les plus observateur auront peut-être remarqué dans le lien précédent des id très différentes de nos codes départementaux. C'est une des joyeusetés à côté desquelles je suis passé à côté au début : bien distinguer les id des polygones d'une colonne "id".

Pour essayer d'être plus clair, observons cette capture d'écran des polygones départementaux piochés sur ce stock de données (cliquez pour agrandir) :

qgis_id

En réalité, les id qui nous intéressent sont dans la colonne tout à gauche (0 pour la Somme, 1 pour l'Eure, 2 pour la Seine-Maritime, etc...) et un id égal à 0 peut poser problème pour la suite.

Différentes techniques existent pour un peu modifier le fichier .topojson, perso j'ai un peu fait flamber jEdit pour corriger tout ça et modifier mon .csv en conséquence. Bref, ça prend un peu de temps, mais une fois que c'est fait le fichier peut être réutilisé à l'envie.

Et dernier point avant de rentrer dans le code : D3 interprète mal le double point en valeur de séparation pour un .csv, il vaut mieux de fait utiliser la virgule. Un remerciement spécial à Etienne Côme qui a repéré l'erreur 😉 !

Le code

Rentrons dans le vif du sujet avec le code en lui-même. Voici pour commencer les éléments du <body> qui vont permettre d'afficher la carte et de naviguer entre les données :

Voici enfin le script qui paramètre tout ça :

 Pour aller plus loin

J'ai publié l'ensemble des fichiers utilisés pour cette carte sur gitHub

3 Comments + Add Comment

  • […] => Doing Journalism with Data: First Steps, Skills and Tools. 15/10/2013. «A free online data journalism course with 5 leading experts. Coming early 2014. This free 5-module online introductory course gives you the essential concepts, techniques and skills to effectively work with data and produce compelling data stories under tight deadlines. Comprising of video lectures, tutorials, assignments, readings and discussion forums, this course is open to anyone in the world with an Internet connection who wants to tell stories with data. (…).» Source : http://www.datadrivenjournalism.net/course/ Billets en relation : 22/08/2013. Guide du datajournalisme : jplusplus.github.io/guide-du-datajournalisme/ 04/10/2013. Good list of Datavis Blogs | Visual Loop : twitter.com/mslima/status/386171777027964928 08/10/2013. Geojournalism Handbook : geojournalism.oeco.org.br/ 08/10/2013. Librairies Javascript pour gérer les graphiques : socialcompare.com/fr/comparison/javascript-graphs-and-charts-libraries 13/10/2013. The science behind data visualisation : http://www.mapcite.com/posts/2013/august/the-science-behind-data-visualisation.aspx 14/10/2013. Questionnez l’univers du webjournalisme : http://www.journalismes.info/Questionnez-l-univers-du-webjournalisme_a4632.html 14/10/2013. Mes projets de datajournalisme désormais sur Github, par JeanAbbiateci : jeanabbiateci.fr/blog/mes-projets-de-journalisme-sur-github/ 14/10/2013. Liens Data en Forme Owni Données fleuries : t.co/SBkviZEDHC 15/10/2013. PLAY WITH DATA ! Convert between different data formats : jeanabbiateci.fr/play-with-data/ 17/10/2013. Trinity Mirror : mysteriousprojecty.tumblr.com/post/64285152160/were-hiring 17/10/2013. Le journalisme de données cherche encore sa place : http://www.rslnmag.fr/post/2013/10/17/Le-journalisme-de-donnees-cherche-encore-sa-place.aspx 17/10/2013. Google for Media : plus.google.com/+GoogleforMedia/posts 18/10/2013. Out of Sight, Out of Mind : drones.pitchinteractive.com/ 18/10/2013. Le Lorem Ipsum de la data : twitter.com/KarenBastienOK/status/391150194643173376 19/10/2013. StoryMap JS – Telling stories with maps : storymap.knightlab.com/ 20/10/2013. Autopsie d’une dataviz [3] : une carte en anamorphose avec champs de sélection : blog.m0le.net/2013/10/20/autopsie-dune-dataviz-3-une-carte-en-anamorphose-avec-champs-de-selection/ […]

  • […]   […]

  • […] Autopsie d’une dataviz [3] : une carte en anamorphose avec champs de sélection […]

Leave a comment