Nuages de points et graphiques à bulles interactifs en R avec echarts4r
Ajoutez des infobulles au survol, le dimensionnement des points et la coloration par groupe à un nuage de points de style ggplot
Transformez un nuage de points ggplot2 statique en un nuage interactif avec echarts4r — survolez un point pour lire ses valeurs, dimensionnez les points selon une troisième variable pour créer un graphique à bulles, et colorez par groupe avec une série par groupe, le tout dans un flux de pipe familier. Chaque graphique se charge à la demande afin que la page reste rapide.
Date de publication
9 juillet 2026
Modifié
9 juillet 2026
AstucePoints clés
echarts4r enveloppe Apache ECharts, une bibliothèque de graphiques JavaScript libre et open source, dans un pipe R soigné — e_charts() démarre un graphique, e_scatter() ajoute les points.
Un nuage de points montre la relation entre deux variables numériques ; l’interactivité ajoute une infobulle au survol qui nomme chaque point, si bien qu’un nuage dense devient lisible.
Dimensionner les points selon une troisième variable transforme un nuage de points en graphique à bulles ; tracer une série par groupe (un e_scatter() distinct par catégorie) colore les points par groupe, ce qui vous permet de lire trois ou quatre variables sur une seule figure.
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, afin que la page respecte 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
Vous réalisez déjà des nuages de points avec ggplot2 : geom_point(), un x et un y, et voilà. Ce graphique statique est parfait pour un rapport. Mais un nuage de points comportant trente points qui se chevauchent masque quelle voiture est laquelle — et un PNG statique ne peut pas vous le dire. C’est là qu’intervient echarts4r : il apporte Apache ECharts — une bibliothèque de graphiques mature, libre et open source — dans R avec un flux de travail en pipe qui vous semblera familier si vous connaissez le tidyverse. Survolez n’importe quel point et il nomme la voiture et affiche ses valeurs exactes.
Cette leçon construit le même nuage de points deux fois : d’abord comme figure ggplot2 statique (la base reproductible, et l’image à chargement rapide que vous voyez sur la page), puis comme widget echarts4r interactif que vous chargez d’un clic. Nous commençons par un nuage de points simple, ajoutons le dimensionnement des points pour créer un graphique à bulles, puis colorons les points par groupe.
NotePourquoi 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 que le navigateur peint à la volée, plutôt qu’une image statique). En charger plusieurs à la fois ralentirait la page sur un téléphone et dégraderait son Largest Contentful Paint — LCP, le temps nécessaire à l’affichage du contenu principal. Ainsi, sur cette page, chaque graphique interactif est d’abord représenté par une image statique ; cliquer sur ▶ Load interactive chart 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 base statique : un nuage de points ggplot2
Nous allons représenter le poids des voitures en fonction de la consommation pour le jeu de données intégré mtcars. D’abord, préparez un petit data frame en R de base — pas besoin de dplyr — puis tracez le nuage de points avec ggplot2. Cette figure statique est la base reproductible, et sur cette page l’image principale que la page charge en premier.
library(ggplot2)# Prepare a small data frame (base R — no dplyr needed)cars <-data.frame(model =rownames(mtcars),wt = mtcars$wt, # weight, in 1000s of lbsmpg = mtcars$mpg, # miles per gallonhp = mtcars$hp, # horsepowercyl = mtcars$cyl # number of cylinders)ggplot(cars, aes(wt, mpg)) +geom_point(colour ="#3a86d4", size =3) +labs(x ="Weight (1000 lbs)", y ="Miles per gallon",title ="Heavier cars use more fuel") +theme_minimal(base_size =13)
Les points utilisent l’azur de marque #3a86d4, et theme_minimal() conserve un rendu épuré. La tendance descendante est claire — les voitures plus lourdes parcourent moins de miles par gallon. Voilà un graphique prêt à publier. Maintenant, rendons-le explorable.
Votre premier nuage de points interactif
echarts4r lit un data frame : vous nommez la colonne x dans e_charts(), puis ajoutez les points avec e_scatter(). Le pipe (|>) enchaîne les étapes, exactement comme l’ajout de couches dans ggplot2. Nous assignons le graphique à scat plutôt que de l’imprimer directement, afin que la page reste légère — puis nous le chargeons derrière l’image statique ci-dessous.
library(echarts4r)scat <- cars |>e_charts(wt) |># the x axise_scatter(mpg, bind = model) |># points from mpg; bind the model name for the tooltipe_color("#3a86d4") |># brand azure, matching the static charte_tooltip() |># show a tooltip on hovere_x_axis(name ="Weight (1000 lbs)") |>e_y_axis(name ="MPG") |>e_legend(show =FALSE) # one series — no legend needed
Lisez le pipe de haut en bas : démarrez un graphique sur wt, ajoutez une série de points mpg, liez la colonne model pour que l’infobulle puisse nommer chaque voiture, colorez les points en azur, activez les infobulles au survol et étiquetez les axes. bind attache une étiquette à chaque point — la manière echarts4r de porter un identifiant qu’un graphique statique ne peut pas montrer. Maintenant, enregistrez le widget et affichez-le derrière une image statique.
Nuage de points du poids des voitures en fonction des miles par gallon montrant une tendance descendante. Survolez un point pour lire son poids exact et son MPG.
Survolez un point et ECharts affiche le nom de la voiture, son poids et son MPG dans une infobulle flottante — l’interaction que vous ne pouvez pas obtenir d’un PNG statique. Tout le reste, ce sont les mêmes données et la même palette azur.
Un graphique à bulles : dimensionner les points selon une troisième variable
Un nuage de points montre deux variables. Encodez-en une troisième dans la taille de chaque point et vous obtenez un graphique à bulles. Ici, nous laissons la puissance déterminer la taille des points : passez la colonne hp à l’argument size de e_scatter(). Les bulles plus grandes correspondent aux voitures plus puissantes.
Le seul changement par rapport au graphique de base est size = hp à l’intérieur de e_scatter() — echarts4r met à l’échelle le rayon de chaque point selon sa puissance. Lisez trois variables à la fois : le poids en x, la consommation en y, et la puissance dans la taille des bulles. Le motif qui saute aux yeux, c’est que les voitures lourdes et gourmandes situées en bas à droite sont aussi les grosses et puissantes.
Graphique à bulles du poids en fonction du MPG avec la taille des points représentant la puissance. Les bulles plus grandes correspondent aux voitures plus puissantes ; survolez pour les valeurs exactes.
Survolez n’importe quelle bulle et l’infobulle indique la voiture, son poids, son MPG et sa puissance ensemble — l’encodage par la taille raconte l’histoire, et l’infobulle donne les chiffres exacts.
Colorer les points par groupe
Pour colorer un nuage de points selon une catégorie, donnez à chaque groupe sa propre série de points — un appel e_scatter() par groupe, chacun dans sa propre couleur. La manière R de base de le faire sans dplyr consiste à répartir les valeurs mpg en une colonne par nombre de cylindres : ifelse() conserve le MPG d’une voiture dans sa propre colonne et le fixe à NA partout ailleurs, et echarts4r ignore simplement les points NA. C’est le même idiome « colonnes larges, séries multiples » qu’utilisent les leçons barres et courbes.
# Colour by group the base-R way: one mpg column per cylinder count (shared x = wt).# ifelse() masks the other groups to NA; echarts4r simply skips the NA points.cars$`4 cylinders`<-ifelse(cars$cyl ==4, cars$mpg, NA)cars$`6 cylinders`<-ifelse(cars$cyl ==6, cars$mpg, NA)cars$`8 cylinders`<-ifelse(cars$cyl ==8, cars$mpg, NA)grp <- cars |>e_charts(wt) |>e_scatter(`4 cylinders`, bind = model, symbol_size =11) |>e_scatter(`6 cylinders`, bind = model, symbol_size =11) |>e_scatter(`8 cylinders`, bind = model, symbol_size =11) |>e_color(c("#440154", "#21908c", "#fde725")) |># viridis, colourblind-safee_tooltip() |>e_x_axis(name ="Weight (1000 lbs)") |>e_y_axis(name ="MPG")
Voici l’idée. ifelse(cars$cyl == 4, cars$mpg, NA) construit une colonne 4 cylinders qui contient le MPG des voitures à quatre cylindres et NA pour toutes les autres ; les colonnes 6 cylinders et 8 cylinders font de même pour leurs groupes. Chaque colonne devient sa propre série e_scatter() sur l’axe wt partagé, si bien que chaque groupe est tracé séparément — e_color() attribue ensuite aux trois séries un triplet viridis à palette adaptée au daltonisme, et symbol_size fixe chaque point au même rayon (aucun dimensionnement accidentel). Le bénéfice : la couleur marque proprement le groupe, la légende permet au lecteur de cliquer sur un nombre de cylindres pour l’activer ou le désactiver, et les couleurs correspondent à l’image statique ci-dessous.
Nuage de points du poids en fonction du MPG avec des points colorés selon le nombre de cylindres. La couleur marque le nombre de cylindres ; survolez un point pour ses détails.
La couleur porte désormais le groupe : les voitures à quatre cylindres se regroupent en haut à gauche (légères, économes), les voitures à huit cylindres en bas à droite (lourdes, gourmandes). Comme chaque nombre de cylindres constitue sa propre série, la légende est interactive dans le graphique chargé — cliquez sur une entrée de légende pour activer ou désactiver ce groupe et isoler le motif qui vous intéresse.
NoteAfficher les données sous-jacentes
Chaque graphique ci-dessus représente le même petit tableau dérivé de mtcars — une ligne par voiture, avec le poids, la consommation, la puissance et le nombre de cylindres :
First 8 cars: weight (1000 lbs), MPG, horsepower, and cylinders.
model
wt
mpg
hp
cyl
4 cylinders
6 cylinders
8 cylinders
Mazda RX4
2.620
21.0
110
6
NA
21.0
NA
Mazda RX4 Wag
2.875
21.0
110
6
NA
21.0
NA
Datsun 710
2.320
22.8
93
4
22.8
NA
NA
Hornet 4 Drive
3.215
21.4
110
6
NA
21.4
NA
Hornet Sportabout
3.440
18.7
175
8
NA
NA
18.7
Valiant
3.460
18.1
105
6
NA
18.1
NA
Duster 360
3.570
14.3
245
8
NA
NA
14.3
Merc 240D
3.190
24.4
62
4
24.4
NA
NA
Le tableau complet compte 32 lignes. wt est sur l’axe des x, mpg sur l’axe des y ; hp détermine la taille des bulles et cyl détermine la couleur du groupe.
Problèmes fréquents
Le graphique n’apparaît pas / la page n’affiche que l’image statique. C’est voulu sur ce site — cliquez sur ▶ Charger le graphique interactif et le véritable widget se charge. Dans votre propre document, print(scat) (ou en laissant scat être la dernière ligne d’un chunk) affiche le widget directement, sans image statique.
Mes groupes se chevauchent tous en une seule couleur. Chaque groupe a besoin de sa propre série e_scatter(). Répartissez la colonne y en une colonne par groupe avec ifelse() (la valeur du groupe là où elle appartient, NA ailleurs), ajoutez un appel e_scatter() par colonne, puis passez une couleur par série à e_color(c(...)). echarts4r ignore les points NA, si bien que chaque série ne trace que son propre groupe.
Mes points sont d’énormes taches. Le deuxième argument positionnel de e_scatter() est size, pas une colonne de couleur — donc e_scatter(mpg, cyl) associe cyl à la taille des points et vous obtenez des bulles géantes (et symbol_size ne remplacera pas une taille associée). Pour colorer par groupe à la place, ne passez pas la colonne de groupe à cet endroit : masquez les valeurs y dans des colonnes NA distinctes et donnez à chacune sa propre série e_scatter() avec un symbol_size fixe.
Mes bulles ont toutes la même taille. La variable de taille va à l’argument size de e_scatter() — e_scatter(mpg, size = hp). Si vous définissez aussi symbol_size, il remplace le dimensionnement par un rayon fixe, ce qui est souhaitable pour un nuage de points de groupe coloré mais pas pour un graphique à bulles.
Questions fréquentes
Noteecharts4r 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, également sous Apache 2.0 — une licence permissive, libre et open source, sans frais par site ni frais commerciaux. Vous pouvez l’utiliser dans des rapports, des tableaux de bord et des sites publics sans licence payante.
NoteComment afficher une étiquette (comme un nom de voiture) dans l’infobulle ?
Utilisez l’argument bind de e_scatter() : e_scatter(mpg, bind = model) attache la colonne model à chaque point, et e_tooltip() l’affiche ensuite. Sans bind, l’infobulle n’indique que les valeurs x et y.
NoteQuelle est la différence entre un nuage de points et un graphique à bulles ?
Un nuage de points encode deux variables — une sur chaque axe. Un graphique à bulles en ajoute une troisième en l’associant à la taille des points. Dans echarts4r, vous passez de l’un à l’autre en passant une colonne à l’argument size de e_scatter().
NoteComment colorer un nuage de points par groupe sans group_by() ?
Donnez à chaque groupe sa propre série de points. Répartissez la colonne y en une colonne par groupe avec ifelse() (la valeur là où la ligne appartient, NA sinon), ajoutez un appel e_scatter() par colonne, et passez une couleur par série à e_color(c(...)). Cela garde votre code pédagogique en R de base — sans pipe dplyr — tout en produisant un nuage de points proprement coloré avec une légende interactive.
NoteEn quoi echarts4r diffère-t-il de ggiraph ?
ggiraph rend vos graphiques ggplot2 existants interactifs en les affichant en SVG, si bien que l’apparence est identique à ggplot2 et que le widget est léger. echarts4r dessine avec un moteur différent (Apache ECharts sur un canvas HTML) qui offre des interactions intégrées plus riches — filtrage visual-map, curseurs de zoom, transitions animées — au prix d’une charge JavaScript plus importante. Utilisez ggiraph lorsque vous voulez votre apparence ggplot de publication avec une interactivité légère ; optez pour echarts4r lorsque vous avez besoin de ces contrôles intégrés plus riches.
Testez vos connaissances
ImportantÀ vous : construisez un graphique à bulles
En utilisant le jeu de données intégré mtcars, préparez un data frame en R de base avec wt, mpg et qsec (temps sur le quart de mile), puis tracez un graphique à bulles interactif avec echarts4r : le poids sur l’axe des x, le MPG sur l’axe des y, et la taille des points déterminée par qsec. Colorez les points en azur, liez le nom du modèle pour l’infobulle et étiquetez les deux axes. Assignez-le à une variable et imprimez-le pour le visualiser.
AstuceIndice
Construisez le data frame avec data.frame(model = rownames(mtcars), wt = mtcars$wt, mpg = mtcars$mpg, qsec = mtcars$qsec), puis enchaînez e_charts(wt) avec e_scatter(mpg, size = qsec, bind = model). Définissez la couleur avec e_color("#3a86d4") et l’infobulle avec e_tooltip().
Passer qsec à size met à l’échelle le rayon de chaque point selon le temps sur le quart de mile ; bind = model permet à l’infobulle de nommer chaque voiture.
Vérification rapide. Vous voulez colorer un nuage de points selon la transmission (am, où 0 = automatique et 1 = manuelle). En utilisant l’approche R de base, sans dplyr, de cette leçon, combien d’appels e_scatter() écrivez-vous, et qu’est-ce qui alimente chacun ?
AstuceAfficher la réponse
Deux appels e_scatter() — un par groupe. Construisez deux colonnes masquées par NA, par exemple cars$Automatic <- ifelse(cars$am == 0, cars$mpg, NA) et cars$Manual <- ifelse(cars$am == 1, cars$mpg, NA), puis ajoutez e_scatter(Automatic, symbol_size = 11) et e_scatter(Manual, symbol_size = 11). Passez deux couleurs à e_color(c(...)) et chaque série ne trace que son propre groupe.
Conclusion
echarts4r transforme un nuage de points familier en un graphique explorable : e_charts() définit l’axe des x, e_scatter() ajoute les points, et un court pipe ajoute des infobulles, le dimensionnement des points pour un graphique à bulles, et une série par groupe pour la coloration par groupe. 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.
@online{2026,
author = {},
title = {Nuages de points et graphiques à bulles interactifs en R avec
echarts4r},
date = {2026-07-09},
url = {https://www.datanovia.com/learn/data-visualization/echarts4r/interactive-scatter-plots},
langid = {fr}
}
