Cartes de carrés - Treemap
Cartes de carrés - Treemap

Cartes de carrés - Treemap

Tags
 

Historique

Les cartes de carrés (treemaps) ont été introduites pour la première fois par Ben Shneiderman et son équipe à l'Université du Maryland dans les années 1990. Leur objectif était de créer une méthode visuelle pour représenter les structures hiérarchiques de manière claire et compréhensible.
En 1998, Shneiderman et Wattenberg introduisent l'approche "slice-and-dice". Elle implique de diviser récursivement l'espace disponible en sections rectangulaires pour représenter la hiérarchie.
Depuis les années 2000, plusieurs variantes et améliorations des cartes de carrés ont été développées par différents chercheurs et praticiens. Des entreprises et des développeurs les ont également intégrés dans des logiciels d'analyse de données et des outils de visualisation.
Les cartes de carrés sont un outil de visualisation de données largement utilisé, offrant une représentation visuelle puissante et efficace des structures hiérarchiques.
Timeline de l’histoire de la dataviz
 

Pourquoi des cartes de carrés ?

Les cartes de carrés représentent, de manière efficace, des structures arborescentes complexes et leurs proportions relatives.
notion image

Pourquoi les utiliser?

  • Les cartes de carrés permettent d’obtenir une représentation compacte en remplissant l'espace disponible avec des rectangles de tailles variables. Chaque boîte représente un nœud dans l'arborescence, et l’aire de la boîte est proportionnelle à la valeur ou à la quantité qu'elle représente.
  • La taille des boîtes dans les cartes de carrés permet une comparaison visuelle immédiate des différentes catégories ou niveaux hiérarchiques. Les utilisateurs peuvent rapidement identifier les tendances et les éléments significatifs.
  • Les cartes de carrés peuvent être rendues interactives, permettant aux utilisateurs d’agrandir la vue pour faire apparaitre les niveaux hiérarchiques inférieurs. L’interaction laisse l’utilisateur afficher des données supplémentaires, par exemple, sur survol de la souris.

Pourquoi ne pas les utiliser ?

  • Les cartes de carrés ne conviennent pas aux données non hiérarchiques et doivent visualiser les parties d’un tout.
  • Les cartes de carrés ne permettent pas de faire des comparaisons précises entre les catégories.
  • Les cartes de carrés peuvent être un affichage graphique trompeur pour les données hiérarchiques, si les rectangles sont trop petits ou trop nombreux, si les couleurs ne sont pas claires ou cohérentes. Enfin, une mauvaise disposition ou une apparence des rectangles trop disparate peut donner lieu à de mauvaises interprétations.
  • Pour les petits carrés, la visualisation devient illisible.

La carte de carrés et ses variantes

Carte de carrés “squarify”

Carte de carrés “Squarify”.
Carte de carrés “Squarify”.
Les rectangles aussi proches que possible de la forme carrée. Cela facilite la comparaison visuelle des tailles entre les différentes zones.
Les rectangles ayant un aspect proche des carrés, cela conduit à un arrangement plus esthétique.
 

Carte de carrés “slice and dice”

Carte de carrés “slice and dice”
Carte de carrés “slice and dice”
 
Ce type de carte de carrés cherche à mettre en évidence les différents niveaux de données. Les zones rectangulaires sont créées en découpant récursivement la zone parente en rectangles plus petits pour représenter les sous-catégories, en alternant un découpage horizontale et verticale.
Cette conception est belle et aide à présenter clairement les informations hiérarchisées.

Carte de carrés avec arborescence imbriquée - Nested treemap

Nested treemap
Nested treemap
Cette variante de carte de carrés applique un remplissage aux nœuds internes d'étiquette, révélant ainsi mieux la structure hiérarchique. Il est cependant moins compact qu’une carte de carrés standard.
 

Carte de carrés en rayon - Sunburst

notion image
Cette carte de carrés en rayon est une autre visualisation hiérarchique qui utilise des anneaux concentriques pour représenter différents niveaux de la hiérarchie. Chaque segment de l'anneau représente une catégorie ou un niveau.
Cette représentation est souvent utilisée par des logiciels utilisés pour examiner la taille des fichiers sur un disque dur.

Diagramme en stalactites - Icicle Plot

notion image
Aussi connu sous le nom de "dendrogramme", l'icicle plot est une représentation linéaire de la hiérarchie qui peut être utilisée pour afficher des données arborescentes. Chaque branche est une catégorie, et la longueur de la branche indique sa taille ou sa valeur.
Cette représentation est utilisée dans des outils de développement informatique, pour étudier les performances d’un logiciel, en montrant le temps de calcul de l’arborescence des fonctions du programme.
 

Carte de carrés à bulles” - Circle packing - bubble treemap

Circle packing
Circle packing
Au lieu d'utiliser des rectangles, cette variante utilise des cercles imbriqués pour représenter la hiérarchie. L’aire de cercle est proportionnelle à la valeur qu'il représente.
 

Carte de carrés voronoi - Voronoi treemap

notion image
Cette carte propose de découper l’espace selon l’algorithme de Voronoï.
 
 

Testez par vous-même

Cette interface simple montre différents types de cartes de carrés réalisées à partir d'un même jeu de données.
 

Recommandations

Les données

Les données doivent être organisées de manière hiérarchique. Chaque élément dans la hiérarchie doit avoir une relation parent-enfant avec un autre élément. Le format JSON est souvent privilégié pour les données.

Recommandation 1

  • Limiter le nombre de niveaux
    • Une carte de carrés peut devenir difficile à interpréter si la hiérarchie est trop profonde.

Recommandation 2

  • Interactivité Si possible, ajoutez des fonctionnalités interactives pour permettre aux utilisateurs d'explorer la carte de carrés. Cela peut inclure des infobulles, des filtres, des zooms, etc.

Exemples

Les exemples ci-dessous présentent des réalisations basiques. Pensez à sélectionner l’onglet correspondant au diagramme.
Explications complémentaires
 
  EXCEL
EXCEL
  • lien de téléchargement du fichier exemple_excel_guidelines.xlsx
 
  GOOGLE SHEET  (on line)
GOOGLE SHEET (on line)
  • lien de téléchargement du fichier guideline_exemple
 
  TABLEAU SOFTWARE
TABLEAU SOFTWARE
Le site Tableau public propose de nombreux exemples de réalisation de cartes de carrés
 
  CALC OpenOffice
CALC OpenOffice
  • lien de téléchargement du fichier Exemple OpenOfficeCalc
 
  RAWgraph (on line)
RAWgraph (on line)
  • lien de téléchargement du fichier exemple.
 
🔡
Les langages de programmation
Observablehq : Carte de carrés
Javascript : Cartes de carrés