Diagrammes de Sankey et graphes de réseau interactifs en R avec echarts4r

Q: Quelle est la différence entre un diagramme de Sankey et un graphe de réseau ?

Un Sankey encode le volume de flux : chaque lien possède une valeur numérique, et la largeur de la bande montre quelle quantité passe de la source à la cible — il doit circuler dans une seule direction, sans cycles. Un graphe de réseau encode la connexion : les arêtes montrent que deux nœuds sont liés, pas dans quelle mesure, et la disposition peut contenir des boucles. Optez pour un Sankey quand la quantité compte (énergie, budget, abandon dans un tunnel) ; optez pour un graphe quand la structure compte (qui est lié à qui).

Q: Comment contrôler la taille et la couleur des nœuds dans un graphe de réseau echarts4r ?

Passez une colonne size et une colonne category à e_graph_nodes() — size dimensionne chaque cercle et category regroupe les nœuds pour qu’ils partagent une couleur. Définissez ensuite les couleurs de groupe avec e_color(c("#3a86d4", "#f5a524")), une valeur par catégorie. Nommer les arguments (names =, size =, category =) évite de désaligner l’ordre positionnel names, value, size, category.

Q: Puis-je faire circuler le Sankey de haut en bas plutôt que de gauche à droite ?

Oui. Ajoutez orient = "vertical" à e_sankey() et le flux s’écoule de haut en bas, ce qui convient aux longues chaînes qui déborderaient sinon la largeur de la page. Les colonnes source, target et value restent exactement les mêmes.

Montrez les flux entre étapes avec un diagramme de Sankey et les relations entre entités avec un graphe orienté par les forces

Tracez des diagrammes de flux de Sankey interactifs et des graphes de réseau orientés par les forces en R avec echarts4r — survolez un flux pour lire son volume, faites glisser un nœud pour démêler ses liens. Chaque graphique se charge à la demande pour que la page reste rapide.

Date de publication

9 juillet 2026

Modifié

9 juillet 2026

Points clés

echarts4r enveloppe Apache ECharts, une bibliothèque de graphiques JavaScript libre et open source, dans un pipe R tidy — e_charts() démarre un graphique, e_sankey() trace un diagramme de flux et e_graph() trace un réseau.
Un diagramme de Sankey montre quelle quantité circule de chaque source vers chaque cible ; la largeur de la bande encode le volume, si bien que vous lisez tout le système d’un coup d’œil.
Un graphe de réseau montre ce qui est connecté à quoi ; les nœuds sont des entités, les arêtes des relations, et une disposition orientée par les forces les répartit pour que la structure soit lisible.
Sur cette page, chaque graphique interactif se cache derrière une image statique que vous cliquez pour charger — la lourde bibliothèque de graphiques ne se télécharge qu’à la demande, si bien que la page reste dans le budget de performance mobile.
L’image statique est un simple graphique ggplot2, produit par du code que vous pouvez copier et exécuter — la version interactive présente les mêmes données, rendues explorables.

Introduction

Deux questions reviennent sans cesse avec les données connectées. Quelle quantité passe de A à B ? — l’énergie des sources vers les consommateurs, les utilisateurs d’une étape de tunnel à la suivante, le budget des départements vers les projets. Et qu’est-ce qui est connecté à quoi ? — les personnes d’une équipe, les pages qui se lient entre elles, les gènes qui interagissent. La première appelle un diagramme de Sankey (volumes de flux entre étapes) ; la seconde appelle un graphe de réseau (relations entre entités).

Les deux sont malaisés en ggplot2 statique et les deux brillent en interactif. C’est là qu’intervient echarts4r : il apporte Apache ECharts — une bibliothèque de graphiques mûre, libre et open source — dans R avec le même pipe que vous utilisez déjà pour les barres et les courbes. Cette leçon construit un Sankey et un graphe de réseau, chacun montré d’abord comme image statique puis comme widget que vous chargez d’un clic.

Pourquoi chaque graphique se charge au clic

Un widget ECharts interactif embarque environ 1 Mo de JavaScript et dessine sur un canvas HTML (la surface de dessin du navigateur). En charger plusieurs d’un coup ralentirait la page sur un téléphone et pénaliserait son Largest Contentful Paint (LCP) — le temps avant l’apparition du contenu principal. 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. Vous obtenez la vitesse d’une page statique et l’interactivité complète à la demande. Dans votre propre rapport ou application Shiny, vous imprimeriez simplement le widget directement — le code est identique.

Diagrammes de Sankey : les flux entre étapes

Un diagramme de Sankey se construit à partir de trois colonnes : une source, une cible et la valeur qui circule de l’une à l’autre. Chaque ligne est un flux. Ici, nous modélisons un petit système énergétique — trois sources (Coal, Gas, Solar) qui alimentent un réseau central (Grid), lequel dessert ensuite Homes et Industry. Tracez d’abord l’image statique avec ggplot2 pour voir la forme du flux.

library(ggplot2)

# The flow table: what goes from each source to each target, and how much.
sk <- data.frame(
  source = c("Coal", "Gas", "Solar", "Grid", "Grid"),
  target = c("Grid", "Grid", "Grid", "Homes", "Industry"),
  value  = c(30, 25, 20, 45, 30),
  stringsAsFactors = FALSE
)

# Fixed node positions for a clean left-to-right stand-in of the Sankey.
nodes_pos <- data.frame(
  name = c("Coal", "Gas", "Solar", "Grid", "Homes", "Industry"),
  x    = c(1, 1, 1, 2, 3, 3),
  y    = c(3, 2, 1, 2, 2.5, 1.5)
)
seg <- merge(sk, nodes_pos, by.x = "source", by.y = "name")   # source x/y
seg <- merge(seg, nodes_pos, by.x = "target", by.y = "name",
             suffixes = c("", "end"))                          # adds xend/yend

ggplot() +
  geom_segment(data = seg,
               aes(x = x, y = y, xend = xend, yend = yend, linewidth = value),
               colour = "#3a86d4", alpha = 0.5, lineend = "round") +
  geom_label(data = nodes_pos, aes(x, y, label = name),
             fill = "#f5a524", colour = "white", fontface = "bold",
             label.size = 0, size = 4) +
  scale_linewidth(range = c(1, 8), guide = "none") +
  labs(x = NULL, y = NULL,
       title = "Energy flow: sources -> grid -> consumers") +
  theme_minimal(base_size = 13) +
  theme(axis.text = element_blank(), panel.grid = element_blank())

A left-to-right flow diagram: Coal, Gas, and Solar on the left connect through a central Grid node to Homes and Industry on the right, with link thickness showing the volume of each flow.

La largeur de la bande suit le volume — le flux de 45 unités du réseau vers Homes est le lien le plus épais. Cette figure statique fait passer l’idée ; le Sankey interactif permet au lecteur de survoler n’importe quel flux pour en lire la valeur exacte.

echarts4r dessine la vraie version à partir de la même table sk. Démarrez un graphique vide avec e_charts() (les colonnes source, target et value sont nommées dans e_sankey(), pas dans e_charts()), ajoutez la couche Sankey, définissez une palette conforme à la marque et activez les infobulles.

library(echarts4r)

sk <- data.frame(
  source = c("Coal", "Gas", "Solar", "Grid", "Grid"),
  target = c("Grid", "Grid", "Grid", "Homes", "Industry"),
  value  = c(30, 25, 20, 45, 30),
  stringsAsFactors = FALSE
)

sankey <- sk |>
  e_charts() |>                       # no serie here — the columns go to e_sankey()
  e_sankey(source, target, value) |>  # source, target, and the flow volume
  e_color(c("#3a86d4", "#5b9bd9", "#8fbce6", "#f5a524", "#f7b84e", "#f9cd7d")) |>
  e_tooltip()                         # hover a flow or node to read its value

Lisez le pipe de haut en bas : démarrez un graphique vide, ajoutez un Sankey à partir des trois colonnes, colorez les nœuds avec une palette allant de l’azur à l’ambre, et activez les infobulles au survol. Enregistrez maintenant le widget et affichez-le derrière une image.

Diagramme de Sankey de l’énergie qui circule des sources à travers le réseau vers les consommateurs. Survolez un flux pour lire son volume ; la largeur de la bande indique la quantité.

Survolez n’importe quelle bande et ECharts affiche le volume exact de ce flux — une lecture qu’un PNG statique ne peut qu’approcher. Faites glisser un nœud vers le haut ou le bas et le diagramme réachemine ses liens en direct.

Graphes de réseau : les relations entre entités

Un graphe de réseau répond à une autre question : non pas quelle quantité circule, mais ce qui est connecté à quoi. Vous le construisez à partir de deux tables — une table de nœuds (les entités, avec une taille et un groupe optionnels) et une table d’arêtes (quel nœud se connecte à quel autre). echarts4r les lit avec e_graph_nodes() et e_graph_edges(), puis une disposition orientée par les forces rapproche les nœuds connectés et éloigne ceux qui ne le sont pas jusqu’à ce que la structure soit lisible.

Voici un tout petit réseau de quatre nœuds : A et B appartiennent au groupe x, C et D au groupe y, avec quatre arêtes de connexion. Construisez maintenant le graphe interactif — son image statique correspondante, montrée derrière la façade ci-dessous, est tracée de la même manière que celle du Sankey.

library(echarts4r)

# Nodes: an entity per row, with a display size and a group.
nodes <- data.frame(
  name = c("A", "B", "C", "D"),
  size = c(20, 14, 18, 10),
  grp  = c("x", "x", "y", "y"),
  stringsAsFactors = FALSE
)

# Edges: one connection per row (which node links to which).
edges <- data.frame(
  source = c("A", "A", "B", "C"),
  target = c("B", "C", "D", "D"),
  stringsAsFactors = FALSE
)

graph <- e_charts() |>
  e_graph(layout = "force") |>                     # force-directed spread
  e_graph_nodes(nodes, names = name, value = size,
                size = size, category = grp) |>     # named args map columns explicitly
  e_graph_edges(edges, source, target) |>
  e_color(c("#3a86d4", "#f5a524")) |>              # one colour per group (x, y)
  e_tooltip()

Une remarque sur l’appel des nœuds : e_graph_nodes() prend ses colonnes dans l’ordre names, value, size, category, si bien que nommer les arguments (names = name, size = size, category = grp) rend la correspondance sans ambiguïté — size dimensionne le cercle, category le colore par groupe. Les deux valeurs de e_color() peignent ensuite le groupe x en azur et le groupe y en ambre. Enregistrez-le et prévisualisez-le.

Graphe de réseau de quatre nœuds connectés. Faites glisser un nœud dans le graphique chargé ; survolez pour mettre en évidence ses connexions.

Dans le graphique chargé, faites glisser n’importe quel nœud et la disposition par forces réorganise tout le réseau autour de lui — le genre d’exploration pratique qu’une figure statique ne peut pas offrir. Survolez un nœud pour mettre en évidence ses arêtes.

Afficher les données sous-jacentes

Le Sankey est construit à partir d’une table de flux de cinq lignes :

Energy flows: source, target, and volume.
source	target	value
Coal	Grid	30
Gas	Grid	25
Solar	Grid	20
Grid	Homes	45
Grid	Industry	30

Le graphe de réseau est construit à partir d’une table de nœuds et d’une table d’arêtes :

Nodes: entity, size, and group.
name	size	grp
A	20	x
B	14	x
C	18	y
D	10	y

Edges: which node connects to which.
source	target
A	B
A	C
B	D
C	D

Problèmes fréquents

Mon Sankey est vide ou déclenche une erreur à propos d’un cycle. Un Sankey doit être un flux dirigé et acyclique — aucun chemin ne peut revenir à son point de départ. Si la cible d’un nœud finit par se reverser dans ce nœud, ECharts refuse de dessiner. Vérifiez que vos paires source/target avancent dans une seule direction (sources → réseau → consommateurs), et assurez-vous que source, target et value sont de simples colonnes d’un même data frame.

Les nœuds de mon réseau ont tous la même taille (ou la même couleur). Cela vient des colonnes que vous passez à e_graph_nodes(). Comme les arguments sont ordonnés names, value, size, category, un appel positionnel peut associer silencieusement la mauvaise colonne. Nommez-les — e_graph_nodes(nodes, names = name, size = size, category = grp) — pour que size dimensionne le cercle et que category pilote la couleur.

Une arête n’apparaît pas. Chaque valeur des colonnes source et target de la table d’arêtes doit correspondre exactement à un name de la table de nœuds — "A" et "a" sont différents. Une faute de frappe ou un espace parasite laisse l’arête sans rien à connecter, elle est donc supprimée.

Questions fréquentes

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

Oui. echarts4r est publié sous la licence Apache 2.0 et enveloppe Apache ECharts, lui aussi sous Apache 2.0 — une licence permissive, libre et open source, sans frais par site ni frais commerciaux. Vous pouvez utiliser ses graphiques Sankey et de réseau dans des rapports, des tableaux de bord et des sites publics sans licence payante.

Quelle est la différence entre un diagramme de Sankey et un graphe de réseau ?

Un Sankey encode le volume de flux : chaque lien possède une valeur numérique, et la largeur de la bande montre quelle quantité passe de la source à la cible — il doit circuler dans une seule direction, sans cycles. Un graphe de réseau encode la connexion : les arêtes montrent que deux nœuds sont liés, pas dans quelle mesure, et la disposition peut contenir des boucles. Optez pour un Sankey quand la quantité compte (énergie, budget, abandon dans un tunnel) ; optez pour un graphe quand la structure compte (qui est lié à qui).

Comment contrôler la taille et la couleur des nœuds dans un graphe de réseau echarts4r ?

Passez une colonne size et une colonne category à e_graph_nodes() — size dimensionne chaque cercle et category regroupe les nœuds pour qu’ils partagent une couleur. Définissez ensuite les couleurs de groupe avec e_color(c("#3a86d4", "#f5a524")), une valeur par catégorie. Nommer les arguments (names =, size =, category =) évite de désaligner l’ordre positionnel names, value, size, category.

Ai-je besoin de l’image à charger au clic dans mes propres rapports ?

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

Puis-je faire circuler le Sankey de haut en bas plutôt que de gauche à droite ?

Oui. Ajoutez orient = "vertical" à e_sankey() et le flux s’écoule de haut en bas, ce qui convient aux longues chaînes qui déborderaient sinon la largeur de la page. Les colonnes source, target et value restent exactement les mêmes.

Testez vos connaissances

À vous : construisez un Sankey d’un tunnel marketing

Modélisez un tunnel simple sous forme de table de flux : 100 visiteurs se répartissent en 60 qui s’inscrivent (Sign up) et 40 qui rebondissent (Bounce) ; parmi les inscrits, 35 deviennent Actifs (Active) et 25 passent Inactifs (Inactive). Construisez le data frame à trois colonnes source/target/value et tracez un Sankey interactif avec echarts4r, les couleurs de marque et une infobulle au survol. Assignez-le à une variable et imprimez-le pour l’afficher.

Indice

Il vous faut une ligne par flux : Visit -> Sign up (60), Visit -> Bounce (40), Sign up -> Active (35), Sign up -> Inactive (25). Placez-les dans un data frame avec les colonnes source, target et value, puis enchaînez e_charts() |> e_sankey(source, target, value) |> e_tooltip().

Solution

library(echarts4r)
funnel <- data.frame(
  source = c("Visit", "Visit", "Sign up", "Sign up"),
  target = c("Sign up", "Bounce", "Active", "Inactive"),
  value  = c(60, 40, 35, 25),
  stringsAsFactors = FALSE
)

funnel |>
  e_charts() |>
  e_sankey(source, target, value) |>
  e_color(c("#3a86d4", "#5b9bd9", "#8fbce6", "#f5a524", "#f7b84e")) |>
  e_tooltip()

Chaque ligne est un flux ; e_sankey() lit les trois colonnes et dimensionne chaque bande selon sa value.

Vérification rapide. Vous avez un data frame avec les colonnes from, to et amount et vous appelez e_sankey(from, to, amount). Que représente la largeur de chaque bande ?

Afficher la réponse

Le amount — la troisième colonne. Dans un Sankey, la largeur de la bande est proportionnelle à la valeur du flux, si bien que les bandes plus larges en transportent davantage. Les colonnes from et to placent chaque bande ; amount la dimensionne.

Conclusion

echarts4r transforme deux types de graphiques difficiles à rendre en statique en graphiques explorables avec un court pipe. Un Sankey n’a besoin que d’une table source/target/value et de e_sankey() pour montrer les volumes de flux ; un réseau a besoin d’une table de nœuds et d’une table d’arêtes avec e_graph_nodes() + e_graph_edges() pour montrer les relations. L’image statique ggplot2 garde la page rapide ; un clic révèle le graphique interactif complet. Chaque résultat de cette page a été produit par le code montré — copiez n’importe quel bloc et exécutez-le pour les reproduire.

Leçons connexes

Diagrammes en barres et en colonnes interactifs avec echarts4r — infobulles, zoom et barres groupées et barres empilées dans le même pipe ; Nuages de points et graphiques à bulles interactifs — encodez une troisième variable comme taille de bulle ; Graphiques interactifs avec ggiraph — rendez plutôt vos figures ggplot2 existantes interactives.
Pour aller plus loin : echarts4r — la série complète de graphiques interactifs. · Visualisation de données — le pilier. · ggplot2 — la base des graphiques statiques.

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 = {Diagrammes de Sankey et graphes de réseau interactifs en R
    avec echarts4r},
  date = {2026-07-09},
  url = {https://www.datanovia.com/learn/data-visualization/echarts4r/interactive-sankey-network},
  langid = {fr}
}

Veuillez citer ce travail comme suit :

“Diagrammes de Sankey et graphes de réseau interactifs en R avec echarts4r.” 2026. July 9. https://www.datanovia.com/learn/data-visualization/echarts4r/interactive-sankey-network.