Treemap – Visualisation de données

Introduction

Une carte proportionnelle (abrégée C.P.), carte à cases ou en anglais treemap est une représentation de données hiérarchiques dans un espace limité. Nous utiliserons soit le terme treemap ou carte proportionnelle au cours de cet article.

Avant le concept de Treemap, il existait déjà plusieurs autres manières de visualiser des données. Cependant, c'est à la fin des années 90 que le professeur Ben Shneiderman de l'Université de Maryland a pensé à l'algorithme de Treemap afin de résoudre un problème récurrent : l'occupation trop importante d'espace dans le disque dur de son serveur. Il était question pour lui de savoir quel dossier ou sous-dossier occupait le plus d'espace, et ce de manière visuelle. Il propose alors de représenter l'arborescence des fichiers (tree) dans un plan (map) et publie un premier algorithme permettant d'obtenir cette visualisation en 1992. L'algorithme de Treemap permet une visualisation simple et rapide de pattern dans la hiérarchérisation de données.


Dans cet article, il s'agira d'illustrer l'utilisation de treemap avec divers exemples, en montrant l'utilité de transformer des données en une représentation visuelle permettant de se faire une idée rapide et une opinion plus facilement.
Puis enfin, nous présenterons le code que nous avons produit et son application sur différents ensembles de données.

Exemples d'utilisation de Treemap

Avant de commencer, il est important de savoir qu'il n'existe pas une seule et unique manière d'implémenter Treemap.

Pour créer une carte proportionnelle, il faut définir un algorithme d’assemblage pour diviser un rectangle en sous-rectangles avec des surfaces définies. Dans l’idéal, un algorithme de carte proportionnelle devrait créer des rectangles de proportions similaires, tout en préservant la signification de l’ordre de données représentées, et toute modification devrait refléter les modifications de ces données.

Malheureusement ces propriétés s'opposent : tandis que les proportions sont optimisées, l’ordre de placement devient en moins prévisible. Tandis que l’ordre est préservé, les proportions entre les rectangles sont dégradées.

À ce jour six principaux algorithmes de carte proportionnelle rectangulaire ont été développés :

Algorithme Conservation de l’ordre Respect des proportions Stabilité
Arbre Binaire (BinaryTree) Partiel Important Stable
Carte proportionnelle mixtes (Mixed Treemaps) Conservé Faible Stable
Ordonnancé (Ordered) Partiel Moyen Moyenne
Par eminçage (Slice And Dice) Conservé Très Important Stable
Mise au carré (Squarified) Non conservé Faible Moyen
En Bandes (Strip) Conservé Moyen Moyen

Ces algorithmes étant différents, leurs représentations le sont aussi.

  • Squarified :
  • Strip Treemap :
  • Slice and Dice :

Passons maintenant aux exemples.

Il existe énormément d'exemples d'utilisation de Treemap afin de visualiser des données de différents types. On peut par exemple penser à la visualisation des entreprises dans le monde en fonction de leurs revenus générés et leur secteur d'activité.

Plus grandes compagnies par revenues et secteur d'activité
https://www.visualcapitalist.com/largest-50-companies-revenue-2016/

Un autre exemple pourrait être la représentation du nombre d'habitants par pays est aussi un cas avec lequel on peut utiliser un algorithme Treemap. Cet exemple a une caractéristique en plus, les pays sont regroupés par continent grâce à un code couleur.

https://www.populationpyramid.net/population-size-per-country/2017/

On peut aller plus loin dans la visualisation de la population mondiale. Avec l'animation suivante, par exemple, toujours en utilisant le concept de Treemap.

Exemple détaillé

Un dernier exemple récent pourrait être la représentation des intentions de vote des habitants américains, durant les dernières élections américaines, dans l'état de Floride en fonction des comtés. Plus les rectangles seront bleus foncés, plus les intentions de votes seront en faveur de Clinton et inversement, plus ils sont rouges foncés, plus les intentions de votes seront en faveur de Trump.

https://en.wikipedia.org/wiki/2016_United_States_presidential_election_in_Florida

Création et application d'un algorithme de Treemap - Visualisation

Dans notre cas, nous avons décidé d'utiliser les arbres binaires, concept qui nous est le plus familier par les possibles implémentations de Treemap.

Pour cela, nous avons décider d'utiliser JavaFX. Il sera donc nécessaire d'avoir JavaFX installé afin de pouvoir lancer notre code.

Vous trouverez dans cette archive trois fichiers, TreeMapViewer.java et plusieurs fichiers CSV. Le premier servira à représenter plusieurs compagnies en fonction de leur capitalisation boursière, le second, plusieurs pays européens en fonction de leur population.

Afin de lancer TreeMapViewer, assurez d'avoir JavaFX d'installé sur votre machine. Vous pouvez compiler et lancer le programme à l'aide des commandes suivantes :

javac -cp "<chemin vers votre classpath pouvant compiler des composants JavaFX>" TreeMapViewer.java

java -cp "<chemin vers votre classpath pouvant compiler des composants JavaFX>" TreeMapViewer

Si la compilation n'a pas pu être possible, alors il serait plus judicieux d'utiliser un IDE tel quel Eclipse ou IntelliJ, depuis lesquels l'installation et/ou l'utilisation de JavaFX sera plus simple.

Aperçu :

Afin de pouvoir tester notre TreemapViewer, il faudra avoir un fichier CSV, avec deux colonnes, la première représentant le nom, et la deuxième une valeur numérique. Si votre ensemble de données est trop grand, vous pouvez modifier la taille de la fenêtre en modifiant l'attribut TAILLE à la ligne 196 de TreeMapViewer.java.

Explications :

Maintenant, place à quelques explications.

Notre programme se divise en deux parties : la construction de l'arbre, puis sa représentation graphique sous forme de rectangle.

Première étape :
On doit créer notre arbre à l'aide de l'ensemble de données. On trie cet ensemble de manière décroissante. Chaque donnée représentera un noeud. On prend les deux derniers éléments de l'ensemble maintenant trié dans un ordre décroissant, que l'on va appeler n1 et n2. On forme un arbre avec n3 comme racine, et n1 et n2 ses fils. n3 aura pour valeur la somme de n1 et n2. On recommence jusqu'à ce qu'on arrive à la fin des noeuds.

Illustration de la construction de notre arbre binaire à partir de l'ensemble de données trié dans l'ordre décroissant.

Nous avons maintenant un arbre binaire, que nous devons représenter graphiquement.

Deuxième étape : La représentation graphique
On va parcourir notre arbre en utilisant une fonction récursive qui va servir à renvoyer la liste de rectangles nécessaire à l'affichage. À chaque noeud, on créera deux rectangles pour chacun de ses fils, le contraire, si le noeud courant ne contient aucun fils, et est donc une feuille, on retourne son rectangle.

Illustration de la construction des rectangles et donc de la représentation graphique à partir de l'arbre binaire récemment construit.

Conclusion

Nous avons donc vu au cours de cet article les multiples algorithmes qui pourraient servir à créer une Treemap et leur spécificités. Mais surtout les possibilités offertes par treemap afin de visualiser des données différentes. Nous avons fini avec l'implémentation de l'un d'entre eux, celui utilisant un arbre binaire, en l'appliquant sur plusieurs data sets.

Bibliographie

https://en.wikipedia.org/wiki/Treemapping

https://fr.wikipedia.org/wiki/Treemap

https://www.populationpyramid.net/population-size-per-country/2017/

https://en.wikipedia.org/wiki/2016_United_States_presidential_election_in_Florida

http://www.cs.umd.edu/hcil/trs/2001-18/2001-18.html

http://www.cs.umd.edu/hcil/trs/2001-18/2001-18.pdf

18 Cliquer pour recommander cet article