Nous avons déjà abordé le sujet des Treemaps au travers de l'article Treemap avec GraphicsBuilder et MarkupBuilder.
Cette fois, nous vous proposons la génération de treemaps circulaires, en ligne et sous forme d'images, à partir de cette page de notre application web GrailsBox.
Voici un exemple d'image de treemap circulaire générée par le service en ligne :

Les treemaps permettent de représenter des données hiérarchiques en utilisant, en général, des rectangles imbriqués ; mais quel que soit la forme utilisée, le principe est d'obtenir une visualisation la plus compacte possible.
Pour en savoir plus sur les treemaps, nous vous recommandons la page Treemaps for space-constrained visualization of hierarchies.

Merci à WeiQuan Long d'avoir partagé son article Circle Packing, qui a inspiré notre démonstration, et permis la mise en œuvre de l'algorithme Maximum Hole Degree dans notre application Grails.
Il a suffit de porter le code PHP disponible, en langage Groovy avec une légère modification.
Pour ce qui est de la génération de l'image proprement dite, nous avons eu recours à l'excellent builder Groovy, GraphicsBuilder, développé par Andres Almiray, et qui permet la création plus aisée de graphiques Java 2D.

Utilisation du générateur de treemaps circulaires

Vous pouvez utiliser la génération de treemaps à vos propres fins (à partir de cette page), et récupérer les images produites grâce à votre navigateur Internet.
Dans la page de démonstration, le treemap circulaire doit être défini dans la zone de texte, et suivre le format JSON, tout comme ce qui est donné en exemple par défaut.
Un cercle est décrit entre accolades, avec les attributs suivants : un texte servant de libellé (text, qui n'est pas obligatoire), éventuellement un rayon (radius, nécessaire pour les cercles les plus imbriqués ; voir plus bas), et une couleur (color).
Pour ce qui est des noms de couleurs, vous pouvez également, en plus des noms de couleurs en anglais, utiliser des codes au format HTML ; par exemple #12ff56.

Pour générer le treemap, cliquez sur le bouton Graphe et la page en cours sera mise à jour avec l'image au travers d'un appel AJAX.

Comment les dimensions de l'image finale sont-elles sont déterminées ? Le principe ici, est que ce sont les rayons des cercles les plus internes qui fixent le rayon du cercle qui les contient. Selon l'algorithme utilisé, les cercles enfants d'un cercle parent vont être disposé de la manière la plus compacte possible. Ainsi, si vous définissez un rayon pour un cercle parent, il ne sera pas pris en compte.