Treemaps et graphiques sunburst interactifs en R avec echarts4r

Q: Quelle est la différence entre un treemap et un sunburst ?

Ils montrent la même hiérarchie partie-tout sous des formes différentes. Un treemap l’empaquette en rectangles imbriqués (surface = valeur), ce qui économise l’espace et convient bien pour comparer de nombreux éléments. Un sunburst la dispose en anneaux imbriqués (angle = valeur), ce qui rend l’imbrication parent → enfant évidente et se révèle frappant avec quelques niveaux. Dans echarts4r, ils lisent le data frame name/value/children identique, si bien que vous pouvez passer de l’un à l’autre en changeant un seul nom de fonction.

Q: Comment structurer mes données pour un treemap ou un sunburst dans echarts4r ?

Utilisez une ligne par parent, avec une colonne name, une colonne value et une colonne-liste children dont la cellule contient un petit data frame (name + value) des éléments de ce parent. Construisez-la en R de base en assignant une liste à la colonne : org$children <- list(kids_eng, kids_sales, kids_ops). Un data frame enfant peut porter sa propre colonne children pour imbriquer plus profondément. Passez ce frame à e_charts() sans x, puis ajoutez e_treemap() ou e_sunburst().

Q: Puis-je ajouter plus de deux niveaux à la hiérarchie ?

Oui. La colonne-liste children s’imbrique à n’importe quelle profondeur — le data frame d’une équipe peut porter sa propre colonne children (par exemple des sous-équipes au sein d’une équipe), et echarts4r continue de descendre l’arbre. Le treemap et le sunburst dessinent tous deux les niveaux supplémentaires et vous permettent de les explorer.

Q: echarts4r est-il gratuit à utiliser, même sur un site web commercial ?

Oui. echarts4r est publié sous licence Apache 2.0 et enrobe Apache ECharts, lui aussi sous Apache 2.0 — une licence permissive, libre et open source, sans frais par site ni frais commercial. Vous pouvez l’utiliser dans des rapports, des tableaux de bord et des sites publics sans licence payante.

Q: Ai-je besoin du poster à charger au clic dans mes propres rapports ?

Non. Le poster est un choix de performance pour ce site à fort trafic, où plusieurs widgets lourds sur une même page la ralentiraient sur mobile. Dans votre propre document Quarto ou application Shiny, imprimez directement le widget et il s’affiche immédiatement. Le code echarts4r de cette leçon est exactement ce que vous écririez dans les deux cas.

Transformez une hiérarchie partie-tout imbriquée en un treemap explorable au clic et un sunburst d’anneaux

Représentez une hiérarchie partie-tout avec echarts4r — un treemap de rectangles imbriqués et un sunburst d’anneaux imbriqués, à explorer d’un clic, tous deux construits à partir du même data frame imbriqué. Survolez pour les valeurs exactes et cliquez sur un segment pour explorer, le tout depuis un flux de travail en pipe familier, chaque graphique se chargeant à la demande pour que la page reste rapide.

Date de publication

9 juillet 2026

Modifié

9 juillet 2026

Points clés

echarts4r enrobe Apache ECharts, une bibliothèque JavaScript de graphiques libre et open source, dans un pipe R épuré — e_charts() démarre un graphique, e_treemap() et e_sunburst() dessinent une hiérarchie.
Un treemap (rectangles imbriqués) et un sunburst (anneaux imbriqués) montrent la même chose — comment chaque partie s’insère dans son parent — à partir du même data frame imbriqué (une ligne par parent, avec une colonne-liste children contenant les éléments de chaque parent). Choisissez la forme qui vous semble la plus facile à lire.
Les deux sont explorables au clic : cliquez sur un département pour zoomer sur ses équipes, et survolez n’importe quel segment pour la valeur exacte.
Sur cette page, chaque graphique interactif se cache derrière un poster statique que vous cliquez pour charger — la lourde bibliothèque de graphiques ne se télécharge qu’à la demande, pour que la page reste dans le budget de performance mobile.
Le poster statique est un simple graphique ggplot2, produit par du code que vous pouvez copier et exécuter — la version interactive, ce sont les mêmes données, rendues explorables.

Introduction

Certaines données forment une hiérarchie : une entreprise se divise en départements, chaque département en équipes ; un budget se divise en catégories, chaque catégorie en postes. Vous voulez montrer deux choses à la fois — quelle est la taille de chaque partie, et à quel parent elle appartient. Deux types de graphiques font exactement cela à partir des mêmes données : un treemap empaquette la hiérarchie en rectangles imbriqués (rectangle plus grand = valeur plus grande), et un sunburst la dispose en anneaux imbriqués (anneau intérieur = parents, anneau extérieur = leurs enfants).

Cette leçon construit les deux avec echarts4r, qui apporte Apache ECharts — une bibliothèque de graphiques mature, libre et open source — dans R avec un flux de travail en pipe qui semble familier si vous connaissez le tidyverse. Nous construisons une fois une petite hiérarchie d’effectifs d’entreprise, puis nous la dessinons en treemap et en sunburst, tous deux interactifs et explorables au clic.

Pourquoi chaque graphique se charge au clic

Un widget ECharts interactif embarque environ 1 Mo de JavaScript et dessine sur un canvas HTML (une surface de dessin en pixels dans la page). En charger plusieurs à la fois ralentirait la page sur un téléphone. Ainsi, sur cette page, chaque graphique interactif est d’abord représenté par une image statique ; cliquer sur ▶ Charger le graphique interactif insère le véritable widget echarts4r, entièrement interactif. Vous obtenez la vitesse d’une page statique et l’interactivité complète à la demande. Dans votre propre rapport ou application Shiny, il vous suffirait d’imprimer directement le widget — le code est identique.

La référence statique : un treemap de la hiérarchie

Nous allons représenter l’effectif d’une petite entreprise : trois départements, chacun divisé en équipes. D’abord, préparez les données en R de base et dessinez un treemap statique avec ggplot2 — un rectangle par équipe, sa surface proportionnelle au nombre de personnes, groupés et colorés par département. Cette figure statique est la référence reproductible et, sur cette page, l’image principale que la page charge en premier.

library(ggplot2)

# The hierarchy as you naturally record it: one row per team (base R, no dplyr)
parts <- data.frame(
  dept = c("Engineering", "Engineering", "Sales", "Sales", "Ops"),
  team = c("Backend", "Frontend", "Field", "Inside", "Support"),
  n    = c(40, 25, 30, 20, 15),
  stringsAsFactors = FALSE
)

# Slice-and-dice treemap layout: departments split the width, teams split the height
dept_order <- unique(parts$dept)
tot   <- tapply(parts$n, parts$dept, sum)[dept_order]   # headcount per department
d_xmax <- cumsum(tot) / sum(parts$n)
d_xmin <- c(0, head(d_xmax, -1))

rects <- do.call(rbind, lapply(seq_along(dept_order), function(i) {
  sub  <- parts[parts$dept == dept_order[i], ]
  ymax <- cumsum(sub$n) / sum(sub$n)
  data.frame(dept = dept_order[i], team = sub$team, n = sub$n,
             xmin = d_xmin[i], xmax = d_xmax[i],
             ymin = c(0, head(ymax, -1)), ymax = ymax,
             stringsAsFactors = FALSE)
}))

vir <- c(Engineering = "#440154", Sales = "#21918c", Ops = "#5ec962")  # viridis-sampled

ggplot(rects) +
  geom_rect(aes(xmin = xmin, xmax = xmax, ymin = ymin, ymax = ymax, fill = dept),
            colour = "white", linewidth = 1.2) +
  geom_text(aes(x = (xmin + xmax) / 2, y = (ymin + ymax) / 2,
                label = paste0(team, "\n", n)),
            colour = "white", fontface = "bold", size = 4, lineheight = 0.9) +
  scale_fill_manual(values = vir) +
  labs(title = "Head-count by department, then team",
       subtitle = "Each rectangle's area is proportional to its team's head-count") +
  theme_void(base_size = 13) +
  theme(legend.position = "none", plot.title = element_text(face = "bold"))

A treemap of company head-count: three coloured blocks for Engineering, Sales, and Ops, each split into labelled team rectangles sized by number of people.

Département plus grand, bloc coloré plus grand ; équipe plus grande, rectangle plus grand à l’intérieur. Voilà un treemap prêt à publier. Rendons maintenant la même hiérarchie explorable.

Mettez en forme les données comme echarts4r les attend

echarts4r construit une hiérarchie à partir d’un data frame comportant une colonne name, une colonne value, et une colonne-liste children — une ligne par parent, dont la cellule children contient un petit data frame des éléments de ce parent (chacun avec son propre name + value). Comme une cellule de data frame peut elle-même contenir un data frame, cette unique colonne constitue l’imbrication : chaque département est une ligne, et ses équipes vivent dans son entrée children. (Un data frame enfant peut lui aussi porter sa propre colonne children, si bien que la forme s’imbrique à n’importe quelle profondeur.)

# A hierarchy the base-R way: a `children` list-column holds each parent's sub-frame (no dplyr).
kids_eng   <- data.frame(name = c("Backend", "Frontend"), value = c(40, 25))
kids_sales <- data.frame(name = c("Field", "Inside"),     value = c(30, 20))
kids_ops   <- data.frame(name = "Support",                value = 15)

org <- data.frame(name = c("Engineering", "Sales", "Ops"), value = c(65, 50, 15))
org$children <- list(kids_eng, kids_sales, kids_ops)   # list-column = the nesting
org

         name value                  children
1 Engineering    65 Backend, Frontend, 40, 25
2       Sales    50     Field, Inside, 30, 20
3         Ops    15               Support, 15

Lisez-le comme un tableau avec un dossier à l’intérieur de chaque ligne : le niveau supérieur liste les trois départements et leurs effectifs totaux, et la cellule children de chaque département contient son propre petit frame d’équipes (les totaux d’Engineering, 40 + 25 = 65, et ainsi de suite). Imprimer org affiche le contenu de chaque cellule children — les noms d’équipes et les valeurs — nichés dans la ligne de son département ; ce sont les données imbriquées. Cet unique frame alimente les deux graphiques ci-dessous — le treemap et le sunburst lisent exactement la même forme name/value/children.

Un treemap interactif

Passez le frame imbriqué à e_charts() — echarts4r lit les colonnes name, value et children pour construire la hiérarchie — puis ajoutez e_treemap(). Colorez les blocs de premier niveau avec un vecteur viridis via e_color(), et e_tooltip() active les lectures au survol. Nous assignons le graphique à treemap au lieu de l’imprimer en ligne, pour que la page reste légère, puis nous le chargeons derrière le poster ci-dessous.

library(echarts4r)

treemap <- org |>
  e_charts() |>                                          # name/value/children build the hierarchy
  e_treemap() |>                                         # nested rectangles
  e_color(c("#440154", "#21918c", "#5ec962")) |>         # viridis-sampled, one per department
  e_tooltip()                                            # show value on hover

e_treemap() lit la hiérarchie et dessine chaque nœud comme un rectangle dimensionné selon sa valeur. Cliquez sur un département dans le graphique chargé et il zoome sur les équipes de ce département (avec un fil d’Ariane pour remonter) — une exploration en profondeur qu’une PNG statique ne peut offrir. Enregistrez maintenant le widget et affichez-le derrière un poster.

Treemap de l’effectif par département et équipe sous forme de rectangles imbriqués. Cliquez sur un département pour explorer ses équipes ; survolez pour l’effectif exact.

La même hiérarchie en sunburst

Un sunburst montre la hiérarchie identique sous forme d’anneaux concentriques : l’anneau intérieur, ce sont les départements, l’anneau extérieur leurs équipes, l’angle de chaque segment étant proportionnel à sa valeur. Remplacez e_treemap() par e_sunburst() — tout le reste demeure identique, car les deux lisent le même frame name/value/children.

sunburst <- org |>
  e_charts() |>
  e_sunburst() |>                                        # nested rings instead of rectangles
  e_color(c("#440154", "#21918c", "#5ec962")) |>
  e_tooltip()

C’est là tout le changement : un seul nom de fonction. Cliquez sur un département de l’anneau intérieur dans le graphique chargé et le sunburst se recentre sur lui, déployant ses équipes pour remplir le cercle — la même exploration en profondeur que le treemap, dans une disposition radiale que certains lecteurs trouvent plus facile à parcourir. Enregistrez-le et affichez-le derrière son poster.

Sunburst de l’effectif par département et équipe sous forme d’anneaux imbriqués. L’anneau intérieur, ce sont les départements, l’anneau extérieur leurs équipes ; cliquez pour explorer.

Treemap ou sunburst ? Un treemap utilise l’espace efficacement et se compare facilement par la surface, si bien qu’il convient à de nombreuses catégories ; un sunburst rend l’imbrication parent → enfant évidente d’un coup d’œil et se révèle frappant avec quelques niveaux. Les deux proviennent de l’unique data frame, alors essayez chacun et gardez celui que vos lecteurs trouvent le plus clair.

Afficher les données sous-jacentes

Les deux graphiques lisent le même frame imbriqué. Aplatir la colonne-liste children en une ligne par équipe révèle les chiffres derrière les anneaux et les rectangles :

The company head-count hierarchy, one row per team.
department	team	headcount
Engineering	Backend	40
Engineering	Frontend	25
Sales	Field	30
Sales	Inside	20
Ops	Support	15

Problèmes fréquents

Le graphique est vide / rien ne se dessine. e_treemap() et e_sunburst() ont besoin d’un data frame avec une colonne name, une colonne value et une colonne-liste children, passé à e_charts() sans argument x. Si l’imbrication est stockée en simples colonnes parent/child au lieu d’une colonne-liste children, ECharts n’a aucune hiérarchie à dessiner — il traite chaque ligne comme un nœud plat, de premier niveau.

Une équipe manque dans son département. Les équipes de chaque parent vivent dans sa cellule children, pas dans une ligne de premier niveau séparée. Si une équipe n’apparaît pas, vérifiez le bon sous-frame — org$children[[1]] devrait lister les équipes d’Engineering. Assignez la colonne-liste (org$children <- list(...)) dans le même ordre que les lignes parentes, pour que chaque frame d’équipe se place sous le bon département.

Le graphique n’apparaît pas / la page n’affiche que le poster. C’est voulu sur ce site — cliquez sur ▶ Charger le graphique interactif et le véritable widget se charge. Dans votre propre document, print(treemap) (ou en le laissant être la dernière ligne d’un chunk) affiche directement le widget sans poster.

Questions fréquentes

Quelle est la différence entre un treemap et un sunburst ?

Ils montrent la même hiérarchie partie-tout sous des formes différentes. Un treemap l’empaquette en rectangles imbriqués (surface = valeur), ce qui économise l’espace et convient bien pour comparer de nombreux éléments. Un sunburst la dispose en anneaux imbriqués (angle = valeur), ce qui rend l’imbrication parent → enfant évidente et se révèle frappant avec quelques niveaux. Dans echarts4r, ils lisent le data frame name/value/children identique, si bien que vous pouvez passer de l’un à l’autre en changeant un seul nom de fonction.

Comment structurer mes données pour un treemap ou un sunburst dans echarts4r ?

Utilisez une ligne par parent, avec une colonne name, une colonne value et une colonne-liste children dont la cellule contient un petit data frame (name + value) des éléments de ce parent. Construisez-la en R de base en assignant une liste à la colonne : org$children <- list(kids_eng, kids_sales, kids_ops). Un data frame enfant peut porter sa propre colonne children pour imbriquer plus profondément. Passez ce frame à e_charts() sans x, puis ajoutez e_treemap() ou e_sunburst().

Puis-je ajouter plus de deux niveaux à la hiérarchie ?

Oui. La colonne-liste children s’imbrique à n’importe quelle profondeur — le data frame d’une équipe peut porter sa propre colonne children (par exemple des sous-équipes au sein d’une équipe), et echarts4r continue de descendre l’arbre. Le treemap et le sunburst dessinent tous deux les niveaux supplémentaires et vous permettent de les explorer.

echarts4r est-il gratuit à utiliser, même sur un site web commercial ?

Oui. echarts4r est publié sous licence Apache 2.0 et enrobe Apache ECharts, lui aussi sous Apache 2.0 — une licence permissive, libre et open source, sans frais par site ni frais commercial. Vous pouvez l’utiliser dans des rapports, des tableaux de bord et des sites publics sans licence payante.

Ai-je besoin du poster à charger au clic dans mes propres rapports ?

Non. Le poster est un choix de performance pour ce site à fort trafic, où plusieurs widgets lourds sur une même page la ralentiraient sur mobile. Dans votre propre document Quarto ou application Shiny, imprimez directement le widget et il s’affiche immédiatement. Le code echarts4r de cette leçon est exactement ce que vous écririez dans les deux cas.

Testez vos connaissances

À votre tour : ajouter un quatrième département

Étendez la hiérarchie d’effectifs avec un quatrième département, Marketing, divisé en deux équipes — Brand (12) et Growth (9). Ajoutez un sous-frame children pour Marketing et une quatrième ligne à org, puis dessinez-le en sunburst interactif avec echarts4r : des couleurs viridis via e_color() et une infobulle au survol. Assignez-le à une variable et imprimez-le pour le voir.

Indice

Construisez kids_mkt <- data.frame(name = c("Brand", "Growth"), value = c(12, 9)), ajoutez une ligne "Marketing" à org (sa valeur totale 12 + 9 = 21), et ajoutez kids_mkt à la liste children pour qu’elle s’aligne avec cette nouvelle ligne. Puis faites passer le frame dans e_charts() |> e_sunburst() |> e_color(...) |> e_tooltip().

Solution

library(echarts4r)

kids_eng   <- data.frame(name = c("Backend", "Frontend"), value = c(40, 25))
kids_sales <- data.frame(name = c("Field", "Inside"),     value = c(30, 20))
kids_ops   <- data.frame(name = "Support",                value = 15)
kids_mkt   <- data.frame(name = c("Brand", "Growth"),     value = c(12, 9))

org <- data.frame(name  = c("Engineering", "Sales", "Ops", "Marketing"),
                  value = c(65, 50, 15, 21))
org$children <- list(kids_eng, kids_sales, kids_ops, kids_mkt)

org |>
  e_charts() |>
  e_sunburst() |>
  e_color(c("#440154", "#21918c", "#5ec962", "#fde725")) |>
  e_tooltip()

La nouvelle ligne d’org crée le segment Marketing ; son frame children remplit les équipes de l’anneau extérieur. Une quatrième couleur garde chaque département distinct.

Vérification rapide. Vous voulez le graphique qui rend l’imbrication parent → enfant la plus évidente d’un coup d’œil, avec seulement deux niveaux. Treemap ou sunburst ?

Afficher la réponse

Sunburst. Ses anneaux concentriques placent les parents à l’intérieur et les enfants à l’extérieur, si bien que l’imbrication se lit immédiatement. Un treemap est préférable lorsque vous avez de nombreux éléments et voulez les comparer par la surface.

Conclusion

Un treemap et un sunburst sont deux vues d’une même idée — comment chaque partie s’insère dans son parent. Dans echarts4r, vous construisez la hiérarchie une seule fois sous forme de frame imbriqué — une ligne par parent, avec une colonne-liste children de ses éléments — puis vous la dessinez dans un sens ou dans l’autre avec e_treemap() ou e_sunburst(), ajoutez e_color() et e_tooltip(), et obtenez gratuitement une exploration au clic. Le poster ggplot2 statique garde la page rapide ; un clic révèle le graphique interactif complet. Chaque résultat ici a été produit par le code montré — copiez n’importe quel bloc et exécutez-le pour le reproduire.

Leçons connexes

Diagrammes en barres et en colonnes interactifs avec echarts4r — la grammaire en pipe qui anime aussi les treemaps et les sunbursts, sur un graphique plus simple ; Graphiques interactifs avec ggiraph — rendez plutôt interactives vos figures ggplot2 existantes ; Diagrammes en barres avec ggplot2 — les fondations du diagramme en barres statique.
Aller plus loin : echarts4r — la série complète des graphiques interactifs. · Visualisation de données — le pilier.

Cette page vous a-t-elle été utile ?

Prouvez que vous savez le faire. Maîtrisez toute la série echarts4r — suivez votre parcours, construisez des projets et obtenez un certificat.

Commencer gratuitement →

Passez à Pro — Prova illimité sur vos propres données et un certificat vérifiable qui atteste la compétence.

dès 15 $/mois facturé annuellement

Passer à Pro →

✓ Vous êtes Pro — continuez. The runtime is the judge.

Prêt à passer à la vitesse supérieure ?

Essayez sur vos propres données avec Prova — the runtime is the judge.Ouvrir Prova →

Réutilisation

CC BY-NC-SA 4.0

Citation

BibTeX

@online{2026,
  author = {},
  title = {Treemaps et graphiques sunburst interactifs en R avec
    echarts4r},
  date = {2026-07-09},
  url = {https://www.datanovia.com/learn/data-visualization/echarts4r/interactive-treemap-sunburst},
  langid = {fr}
}

Veuillez citer ce travail comme suit :

“Treemaps et graphiques sunburst interactifs en R avec echarts4r.” 2026. July 9. https://www.datanovia.com/learn/data-visualization/echarts4r/interactive-treemap-sunburst.