e-tissage

traitements d'information & outils numériques
pour êtres humains

Treemap : représenter une structure hiearchique ET un rapport de grandeurs

Les trois pôles de l’économie mondiale

En 2010, le PIB des Etats-Unis est de 14 527 Md de dollars US, c’est-à-dire une valeur comparable à celui de l’Union Européenne, soit 16 242. Pour la Chine, le chiffre est de 5 878 Md et de 5 459 Md pour le Japon. Le Brésil … ATTENDEZ!! NE PARTEZ PAS! … Promis, juré: j’arrête d’égrainer des chiffres !

En effet, il se trouve qu’une représentation graphique bien pensée remplace souvent avantageusement des colonnes de chiffres. Prenez un article comparant les PIB dans le monde et dont l’argument est de dire que trois pôles se distinguent dans l’économie mondiale. Il s’agit donc de présenter les chiffres de ces trois pôles, avec pour chacun, le détail par région et par pays – taxinomie, tout en mettant en évidence les rapports de grandeurs entre les différents PIB.

Dans ce cas, la meilleure représentation est un treemap. Un treemap est constitué de rectangles dont la surface est proportionnelle à une information que l’on souhaite représenter et qui sont imbriqués en fonction des regroupement et inclusions c’est-à-dire d’une structure hiérarchique en arbre (tree = arbre … z’aviez compris ? … petit(e) malin(e), va! …).
Les treemap ont émergé comme représentation de l’espace disque occupé par les fichiers organisés en répertoires. (treemap disque durexempleSource: Wikipedia)

PIB (2010), en millards de dollars courants

Brésil
2 090

« );

Mexique
1 034
Amérique Latine
4 834
Amérique Latine
Canada 1 577
Etats
Unis

14 527
Allemagne
3 286

Espagne
1 410
France
2 563
Italie 2 055
Zone Euro 12 168
Royaume Uni 2 250
Union Européenne 16 242
Afrique Sub
saha-
rienne
1 049
Autres économies avancées 3 571
Autres économies émergentes et en développement 1 751
Moyen-Orient
2 389
_
Russie
1 480
CEI
1 977
_
Japon
5 459
Asean-5
1 567
Chine
5 878
Inde
1 632
Asie en Développement 9 535
Sources: Alternatives Économiques / FMIRéalisation: e-tissage avec thejit.org

Une taille de la police proportionnelle aux valeurs indiquées peut être utilisée pour appuyer la représentation des rapports de grandeurs. La couleur peut également souligner ces grandeurs (foncé pour les plus grandes, clair pour les plus petites) ou, comme dans notre exemple, servir à montrer d’autres regroupements: ici, trois couleurs pour les trois pôles qui sont l’argument de l’article. La disposition des rectangles en trois colonnes renforce également cette lecture.

Comme c’est souvent le cas pour une représentation visuelle d’information, c’est le processus de réalisation du treemap qui fait émerger la forme la mieux adaptée à l’ensemble des contraintes: celles qui font ressortir l’angle d’analyse choisi et celles qui, pour une meilleure lisibilité, maintiennent certains codes connus :

  • lecture de haut en bas, avec en premier, l’élément majeur de chaque pôle (Etat-Unis, EU, Chine), puis les éléments complémentaires.
  • texte horizontal: le rapport largeur / hauteur des zones est optimisé pour maintenir une lecture horizontale du texte.

Les treemap sont utiles pour représenter et ainsi mieux prendre la mesure de chiffres tellement énormes qu’ils sont difficiles à appréhender parce que trop éloignés des grandeurs familières.
the billion dollar o gramexempleSource: Information Is Beautiful

Le web permet d’y ajouter une interactivité de navigation par zoom in/out pour aller encore plus loin dans la représentation des différences de grandeur, comme dans cette remarquable représentation du budget 2012 des EU, réalisée par le New York Times. On peut y voir aussi bien les grandes masses que les détails par domaine spécifique.