Heatmaps et graphiques calendrier interactifs en R avec echarts4r
Encodez une valeur en couleur sur deux axes — une matrice de corrélation et une heatmap calendaire sur une année entière
Créez une heatmap interactive de matrice de corrélation et une heatmap calendaire sur une année entière en R avec echarts4r — encodez une valeur en couleur sur deux axes, ajoutez des infobulles au survol et une échelle visuelle de couleur, le tout depuis un pipe en R de base. Chaque graphique se charge à la demande pour que la page reste rapide.
Date de publication
9 juillet 2026
Modifié
11 juillet 2026
AstucePoints 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_heatmap() colore une grille de cellules.
Une heatmap encode une valeur en couleur sur deux axes ; e_visual_map() associe la valeur à une échelle de couleur et ajoute une légende déplaçable. Une heatmap calendaire dispose des valeurs journalières sur une année avec e_calendar().
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
Une heatmap répond bien à une seule question : où sont les pics et les creux à travers une grille ? Encodez une valeur en couleur, disposez-la sur deux axes, et l’œil lit le motif instantanément — quelles paires de variables évoluent ensemble, quel jour de l’année a été chaud. Vous réalisez déjà ces graphiques de façon statique : geom_tile() avec une échelle de remplissage. Cette leçon ajoute de l’interactivité 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 deux heatmaps. D’abord une matrice de corrélation — cinq métriques de voitures les unes contre les autres, cellules colorées selon la force de corrélation de chaque paire. Ensuite une heatmap calendaire — une année entière de valeurs journalières disposées comme un calendrier mural, colorées par magnitude. Chacune est dessinée deux fois : un poster statique ggplot2 (la référence reproductible, et l’image à chargement rapide que vous voyez en premier), puis un widget interactif echarts4r que vous chargez d’un clic.
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. 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 : une heatmap de corrélation
Nous commençons par une matrice de corrélation. cor() donne une matrice carrée des corrélations entre cinq colonnes numériques du jeu de données intégré mtcars ; round() la tronque à deux décimales. echarts4r veut des données au format long — une ligne par cellule, avec une colonne x, une colonne y et la valeur — nous remodelons donc la matrice en trois colonnes en R de base (pas besoin de dplyr). Cette figure statique ggplot2 est la référence reproductible et l’image principale que la page charge en premier.
library(ggplot2)# Correlation matrix of five car metrics (base R)m <-round(cor(mtcars[, c("mpg", "hp", "wt", "qsec", "disp")]), 2)# Reshape the wide matrix to long: one row per cell (x, y, z)long <-data.frame(x =rep(rownames(m), ncol(m)),y =rep(colnames(m), each =nrow(m)),z =as.vector(m))ggplot(long, aes(x, y, fill = z)) +geom_tile(color ="white", linewidth =0.6) +geom_text(aes(label =sprintf("%.2f", z)),color =ifelse(long$z >0.4, "grey10", "white"), size =4) +scale_fill_viridis_c(name ="Correlation") +labs(x =NULL, y =NULL, title ="Correlation between five car metrics") +theme_minimal(base_size =13)
La diagonale vaut 1.00 (chaque variable est parfaitement corrélée avec elle-même) ; mpg et wt se situent à -0.87 — les voitures lourdes consomment plus de carburant — tandis que wt et disp sont fortement positives. theme_minimal() garde le tout épuré et l’échelle viridis est adaptée au daltonisme. C’est une figure prête à publier. Rendons maintenant la même grille explorable.
Votre première heatmap interactive
echarts4r lit le data frame au format long : vous nommez la colonne x dans e_charts(), puis e_heatmap() prend la colonne y et la colonne de valeur et dessine une cellule colorée par ligne. Une heatmap n’a aucune couleur tant que vous n’ajoutez pas e_visual_map() — elle associe la valeur à une échelle de couleur et place une légende déplaçable sur le côté. Nous assignons le graphique à une variable plutôt que de l’imprimer directement, pour que la page reste légère, puis nous le chargeons derrière le poster ci-dessous.
library(echarts4r)# Correlation matrix reshaped to long (x, y, z) — base R, no dplyrm <-round(cor(mtcars[, c("mpg", "hp", "wt", "qsec", "disp")]), 2)long <-data.frame(x =rep(rownames(m), ncol(m)),y =rep(colnames(m), each =nrow(m)),z =as.vector(m))heat <- long |>e_charts(x) |># the x axis (first metric)e_heatmap(y, z) |># y axis + the value that becomes coloure_visual_map(z, inRange =list( # map z to a colourblind-safe viridis scalecolor =c("#440154", "#21918c", "#fde725"))) |>e_tooltip() # show x, y and the value on hover
Lisez le pipe de haut en bas : démarrez un graphique sur x, ajoutez une heatmap indexée sur y et colorée par z, associez cette valeur à une plage de couleurs viridis (violet foncé → turquoise → jaune, en accord avec le poster), et activez les infobulles au survol. Contrairement à ggplot2, echarts4r n’hérite pas de theme_minimal(), nous définissons donc l’échelle de couleur explicitement. Enregistrez maintenant le widget et affichez-le derrière un poster.
Heatmap de corrélation de cinq métriques de voitures, colorée du sombre au jaune selon la corrélation. Survolez une cellule pour lire la corrélation exacte entre deux métriques.
Survolez n’importe quelle cellule et ECharts affiche les deux métriques et leur corrélation exacte — l’interaction qu’un PNG statique ne peut offrir. Faites glisser les poignées de la légende de l’échelle visuelle pour filtrer les cellules sur une plage de corrélation, et le reste s’estompe. Tout le reste, ce sont les mêmes données et la même palette viridis.
Une heatmap calendaire sur une année entière
Une heatmap calendaire est une heatmap dont les deux axes sont les jours de la semaine et les semaines de l’année — un calendrier mural coloré par une valeur journalière (pensez au graphique de contributions de GitHub). echarts4r la construit en deux étapes : e_calendar() dispose la grille du calendrier pour une année donnée, puis e_heatmap() avec coord_system = "calendar" peint chaque jour. Ici, nous générons une année déterministe de valeurs journalières avec une onde sinusoïdale — pas de nombres aléatoires, donc la figure est identique à chaque rendu.
library(echarts4r)# A full year of daily values — deterministic (a seasonal sine wave, no RNG)dates <-seq(as.Date("2023-01-01"), as.Date("2023-12-31"), by ="day")cal <-data.frame(date = dates,val =round(50+40*sin(seq_along(dates) /12), 0))calendar <- cal |>e_charts(date) |>e_calendar(range ="2023") |># lay out the 2023 calendar gride_heatmap(val, coord_system ="calendar") |># paint each day by its valuee_visual_map(val, inRange =list( # same viridis scale as the matrixcolor =c("#440154", "#21918c", "#fde725"))) |>e_tooltip()
e_calendar(range = "2023") doit correspondre à l’année de vos dates, sinon les jours tombent hors de la grille. coord_system = "calendar" est le seul argument qui indique à e_heatmap() de placer les cellules par date plutôt que sur une grille x/y normale. L’onde saisonnière apparaît sous forme de bandes de couleur qui balaient l’année. Enregistrez-la maintenant derrière un poster — une grille de tuiles semaine par jour de la semaine, la même disposition que dessine ECharts.
Heatmap calendaire d’une année de valeurs journalières, colorée par magnitude. Survolez un jour pour lire sa valeur ; la couleur montre le motif saisonnier.
Dans le graphique chargé, survolez n’importe quel jour et ECharts affiche la date et sa valeur dans une infobulle flottante. La disposition en calendrier est un véritable atout interactif pour repérer la saisonnalité — les périodes de valeurs élevées brillent en jaune, les périodes basses restent sombres — ce qu’un graphique en courbes dense peut masquer.
NoteAfficher les données sous-jacentes
La heatmap de corrélation utilise la matrice de corrélation arrondie de cinq colonnes de mtcars :
Correlation matrix of five car metrics (mtcars).
mpg
hp
wt
qsec
disp
mpg
1.00
-0.78
-0.87
0.42
-0.85
hp
-0.78
1.00
0.66
-0.71
0.79
wt
-0.87
0.66
1.00
-0.17
0.89
qsec
0.42
-0.71
-0.17
1.00
-0.43
disp
-0.85
0.79
0.89
-0.43
1.00
Le graphique calendrier trace une ligne par jour pour 2023 — 365 lignes de date et une val calculée comme round(50 + 40 * sin(day_index / 12), 0), une onde saisonnière lisse.
Problèmes fréquents
La heatmap s’affiche mais chaque cellule est grise / sans couleur. Une heatmap n’a pas d’échelle de couleur qui lui soit propre — vous devez ajouter e_visual_map() et le pointer vers la colonne de valeur (e_visual_map(z)). Sans cela, ECharts dessine les cellules mais n’associe jamais la valeur à une couleur.
echarts4r se plaint, ou la grille semble incorrecte, quand je passe une matrice.e_heatmap() a besoin de données au format long : une ligne par cellule avec une colonne x, une colonne y et la valeur. Une matrice de corrélation large ne fonctionnera pas directement — remodelez-la d’abord avec le motif en R de base de cette leçon (rep() sur les noms de lignes et de colonnes, as.vector() sur les valeurs).
Mon calendrier n’affiche aucun jour, ou ils tombent au mauvais endroit. L’année dans e_calendar(range = "2023") doit correspondre à l’année de vos dates, et l’appel à e_heatmap() doit porter coord_system = "calendar". Supprimez l’un ou l’autre et les jours ne se placeront pas sur la grille du calendrier.
Questions fréquentes
Noteecharts4r est-il libre d’utilisation, même sur un site web commercial ?
Oui. echarts4r est publié sous licence Apache 2.0 et enrobe Apache ECharts, également 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.
NoteQuelle est la différence entre une heatmap et une heatmap calendaire ?
Une heatmap ordinaire colore une grille dont les deux axes sont deux variables catégorielles ou ordonnées quelconques — ici, deux listes de métriques. Une heatmap calendaire est le cas particulier où les axes sont les jours de la semaine et les semaines de l’année, de sorte que les valeurs journalières se disposent comme un calendrier mural. Les deux utilisent e_heatmap() ; la version calendrier ajoute e_calendar() et coord_system = "calendar".
NoteComment changer les couleurs de la heatmap ?
Définissez la plage de couleurs sur la carte visuelle : e_visual_map(z, inRange = list(color = c("#440154", "#21918c", "#fde725"))). N’importe quel vecteur de couleurs hexadécimales fonctionne — echarts interpole entre elles. Pour une échelle adaptée au daltonisme, passez les extrémités viridis comme montré ici.
NotePuis-je afficher la valeur dans chaque cellule, comme un tableau de matrice de corrélation ?
Oui. ECharts affiche la valeur au survol par défaut ; pour l’afficher en permanence dans chaque cellule, ajoutez e_labels() au pipe (par exemple e_labels(show = TRUE)). Il lit la colonne de valeur que vous avez passée à e_heatmap().
NoteComment créer une heatmap calendaire sur plus d’une année ?
Donnez à e_calendar() la plage dont vous avez besoin — une seule année (range = "2023") ou une paire début/fin (range = c("2022-01-01", "2023-12-31")) — et assurez-vous que vos données la couvrent. Pour une disposition propre par année, ajoutez une paire e_calendar() / e_heatmap() par année avec un calendarIndex.
Testez vos connaissances
ImportantÀ vous : construisez une heatmap de corrélation des mesures d’iris
En utilisant iris intégré, calculez la matrice de corrélation de ses quatre colonnes numériques (Sepal.Length, Sepal.Width, Petal.Length, Petal.Width), remodelez-la au format long en R de base, puis dessinez une heatmap interactive avec echarts4r : cellules colorées par corrélation avec une carte visuelle viridis, et une infobulle au survol. Assignez-la à une variable et imprimez-la pour la visualiser.
AstuceIndice
Construisez la matrice avec round(cor(iris[, 1:4]), 2), puis remodelez-la exactement comme dans la leçon : x = rep(rownames(m), ncol(m)), y = rep(colnames(m), each = nrow(m)), z = as.vector(m). Enchaînez e_charts(x) → e_heatmap(y, z) → e_visual_map(z, inRange = ...) → e_tooltip().
cor() donne la matrice carrée ; les trois lignes rep()/as.vector() la font fondre en une ligne par cellule ; le pipe la colore et l’étiquette. Petal.Length et Petal.Width brillent autour de 0.96 — la paire la plus forte.
Vérification rapide. Vous dessinez long |> e_charts(x) |> e_heatmap(y, z) et la grille apparaît mais chaque cellule est du même gris. Quelle fonction avez-vous oubliée ?
AstuceAfficher la réponse
e_visual_map(). Une heatmap n’a pas d’échelle de couleur tant que vous n’associez pas la colonne de valeur à une. Ajoutez e_visual_map(z) (éventuellement avec un vecteur de couleurs inRange) et les cellules prennent leur couleur de z.
Conclusion
echarts4r transforme une heatmap familière en une carte explorable : e_charts() définit l’axe, e_heatmap() colore la grille, et e_visual_map() associe la valeur à une échelle de couleur avec une légende déplaçable. Ajoutez e_calendar() avec coord_system = "calendar" et la même grammaire dispose les valeurs journalières sur une année entière. Le poster 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 = {Heatmaps et graphiques calendrier interactifs en R avec
echarts4r},
date = {2026-07-09},
url = {https://www.datanovia.com/learn/data-visualization/echarts4r/interactive-heatmap-calendar},
langid = {fr}
}
