Les treemaps sont un outil graphique impressionnant pour représenter des données hiérarchiques ; grâce aux builders Groovy GraphicsBuilder et MarkupBuilder, nous vous livrons un script Groovy qui permet de générer à la fois une image, qui est la représentation graphique d'un treemap, ainsi qu'une page HTML qui permet son utilisation pour la navigation web.
Le code source de ce script, TreeMapGen.groovy, est accessible en tant que pièce jointe à cet article.
Voici un treemap généré avec notre script :

Treemap

Un treemap est une représentation graphique rectangulaire de données hiérarchisées ; dans la représentation, chaque donnée est associée à un rectangle ayant une aire proportionnelle à cette donnée ; par ailleurs, l'ensemble des rectangles recouvre la totalité du graphique.

Une utilisation connue des treemaps est la représentation graphique de la taille des fichiers d'un disque dur ; l'intérêt est de pouvoir visualiser facilement quels sont les fichiers ou les répertoires les plus volumineux.
Un autre cas d'utilisation des treemaps est la représentation des nuages de balise.
Mentionnons aussi une très belle application des treemaps, newsmap, pour le portail d'informations Google News.
Observez la manière dont les couleurs sont utilisées pour catégoriser les informations.

Pour en savoir plus, la page web Treemaps for space-constrained visualization of hierarchies explique l'origine des treemaps et en donne de nombreux exemples.

L'algorithme de création d'un treemap

L'algorithme que nous avons utilisé provient du code Java open source Treemaps-Java-Algorithms.zip qui en propose cinq ; celui que nous avons utilisé est l'algorithme squarified.
Par commodité, vous pouvez également obtenir la libraire treemaps.jar correspondante, en pièce jointe.
Dans le code TreeMapGen.groovy, le treemap est défini par une classe implémentant l'interface Java edu.umd.cs.treemap.MapModel, qui sert à contenir les éléments du treemap, qui sont des objets de type TreeMapItem implémentant l'interface edu.umd.cs.treemap.MapItem.
L'attribut le plus important d'une instance de TreeMapItem est size : l'algorithme qui sera appliqué sera chargé de calculer la position et les dimensions d'un rectangle (ressemblant le plus possible à un carré) ayant une aire proportionnelle à cette valeur.

La définition du modèle

Le modèle du treemap à générer est défini par la variable model, initialisée par une map Groovy dont l'une des clés est items (dont la valeur est aussi une map), servant à définir les éléments du treemap.
Vous remarquerez que cette déclaration ne définit qu'une seul niveau hiérarchique : cela est volontaire pour la clarté de cet article. Il serait possible de définir des niveaux supplémentaires de manière à avoir une arborescence d'éléments, l'algorithme devant s'appliquer de manière récursive sur chaque élément possédant des sous éléments.

Ce qui vient immédiatement à l'esprit, est la création d'un nouveau builder Groovy, que nous appellerions TreemapBuilder, qui permettrait la définition et la génération de treemaps !

Générer un treemap en langage Groovy avec GraphicsBuilder

Une fois l'algorithme appliqué à l'ensemble des éléments du treemap, le script Groovy TreeMapGen.groovy dessine celui-ci dans une image aux dimensions stipulées dans le modèle, grâce au builder GraphicsBuilder.
GraphicsBuilder est un builder Groovy développé par Andres Almiray qui vise à faciliter la création de graphiques basés sur Java 2D.

Chaque élément du treemap est représenté par un rectangle, accompagné du texte de description de l'élément dessiné par-dessus. L'écriture du code du dessin du texte s'est avéré un peu délicate parce qu'il fallait limiter son affichage dans le rectangle correspondant ; d'où l'utilisation du nœud textStroke et de calculs impliquant la classe Java FontMetrics.
Au final, le fichier image treemap.png représentant le treemap est créé sur le disque.

La génération de la page HTML contenant une image réactive

Afin de permettre d'exploitation de l'image du treemap dans un contexte d'application web, le script Groovy génère également une page web, treemap.html, qui inclut une image réactive, l'image treemap.png associée à un élément HTML map. Cet élément définit des zones réactives basées sur les coordonnées et les dimensions des rectangles du treemap ; chacune d'entre elles permettra une navigation vers l'url définit pour l'élément du treemap correspondant.

Exécuter le script TreeMapGen.groovy

Pour voir le script TreeMapGen.groovy en action dans la console Groovy, il est nécessaire de récupérer les librairies du builder GraphicsBuilder, que vous devez copier dans le répertoire lib du répertoire d'installation de Groovy. Copiez-y également la librairie treemaps.jar fournie en pièce jointe.
Le script générera les fichiers treemap.png et treemap.html dans le répertoire de l'utilisateur courant (défini par la propriété système user.home).

Grâce au builder GraphicsBuilder vous pouvez, bien sûr, changer facilement l'apparence de l'image du treemap. En voici un nouvel exemple utilisant des dégradés de couleur, et avec image réactive (liens dans l'image) :