Heatmap Cell Animation
Calendrier de chaleur jour par jour : chaque case prend l'une des cinq intensités selon sa valeur et les cases se colorent une à une, en vague.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Data comprend 28 effets, dont 1 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Vous donnez une valeur par jour dans data-values (nombres séparés par des virgules) ; le script construit un vrai <table> de sept colonnes, une ligne par semaine. Les en-têtes de jours sont pris dans la langue de la page avec Intl.DateTimeFormat (« L M M J V S D » en français, « M T W T F S S » en anglais), à partir du lundi ou du jour choisi par data-week-start.
Chaque case .hmp-cell reçoit un niveau de 0 à 4 dans data-level : 0 pour une valeur nulle, puis 1 à 4 selon le quart de la valeur maximale où elle tombe (maximum des données, ou data-max). Le CSS peint les niveaux avec la même couleur à 5, 20, 40, 65 et 100 % d'opacité, avec un halo pour les deux plus forts ; la légende « Moins / Plus » utilise exactement ces cinq teintes.
À la première apparition puis à chaque changement de data-values (surveillé par un MutationObserver), les cases changent de teinte en 0,8 s avec 25 ms de décalage de l'une à la suivante : la couleur se propage comme une vague, de la première semaine à la dernière. Au survol, une case grossit de 20 %.
La dernière semaine peut être incomplète : les jours manquants restent des cases vides. Chaque racine construit sa propre grille, plusieurs calendriers cohabitent sans se gêner.
Accessibilité
- Tableau lisible : un lecteur d'écran trouve un tableau nommé par
data-label(dans un<caption>), avec le nom complet des jours en en-tête et, dans chaque case, un texte masqué « semaine 2 : 290 visiteurs ». - Valeurs exactes, pas seulement des teintes : les niveaux de couleur ne sont qu'un résumé ; la valeur précise (avec
data-unit) est dans le texte de chaque case et dans son attributdata-value. - Mouvement réduit : sous
prefers-reduced-motion: reduce, la vague est coupée, toutes les cases prennent leur teinte d'un coup. - Survol sans information cachée : le grossissement au survol est un repère visuel ; il ne révèle rien qui ne soit déjà dans le tableau. Si vous affichez une infobulle, lisez la valeur dans
data-valueet prévoyez aussi un accès au clavier.
Compatibilité navigateur
Tableau HTML, aspect-ratio, transitions de couleur, Intl.DateTimeFormat, MutationObserver, IntersectionObserver. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : case en cours de changement de teinte à 150 ms, deux calendriers indépendants (le second n'est plus vide), 390 px, fond blanc, aucune erreur JS.
Sans JavaScript, seule la légende s'affiche : la grille est créée par le script. Prévoyez un résumé chiffré à côté si le calendrier doit rester lisible sans script.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0250-root" data-values="3,1,0,4,2,0,1,2,4,3,1,0,2,0,4,4,2,3,1,1,0,1,3,4,2,0,3,2" data-label="Activité sur quatre semaines">
<div class="hmp-wrap">
<table class="hmp-grid"></table>
<div class="hmp-scale" aria-hidden="true">
<span class="hmp-less">Moins</span>
<span class="hmp-swatch" data-level="0"></span>
<span class="hmp-swatch" data-level="1"></span>
<span class="hmp-swatch" data-level="2"></span>
<span class="hmp-swatch" data-level="3"></span>
<span class="hmp-swatch" data-level="4"></span>
<span class="hmp-more">Plus</span>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
data-values (HTML, sur la racine) |
28 valeurs de 0 à 4 | Une valeur par jour, dans l'ordre, à partir du premier jour de la semaine. Le nombre de semaines suit le nombre de valeurs. |
data-max (HTML) |
la plus grande valeur | Valeur qui correspond au niveau le plus fort ; utile pour comparer plusieurs mois sur la même échelle. |
data-week-start (HTML) |
1 (lundi) | Premier jour des lignes : 0 pour dimanche, 1 pour lundi… 6 pour samedi. |
data-unit, data-decimals, data-label (HTML) |
aucune, 0, « Activité sur quatre semaines » | Unité et décimales du texte lu dans chaque case, nom du tableau. |
--hmp-color (CSS) |
99, 102, 241 | Couleur des cases et de la légende, en trois nombres R, G, B (les opacités des niveaux s'appliquent dessus). |
--hmp-gap, --hmp-radius, --hmp-max-width (CSS) |
4px, 4px, 320px | Espace entre cases, arrondi, largeur maximale de la grille (les cases restent carrées). |
--hmp-stagger, --hmp-speed (CSS) |
25ms, .8s | Décalage entre deux cases et durée du changement de teinte. |
| Libellés de la légende (HTML) | « Moins », « Plus » | Textes de .hmp-less et .hmp-more, à adapter à vos données. |
--hmp-bg, --hmp-text, --hmp-min-height (CSS) |
#0a0a0f, blanc 40 %, 300px | Fond, couleur des jours et de la légende, hauteur minimale. |
FAQ
racine.setAttribute('data-values', valeursDuMois.join(',')). La grille se reconstruit si le nombre de valeurs change, puis la vague recolore les cases. Pour comparer deux mois, fixez data-max à la même valeur pour les deux.data-week-start). Deux possibilités : commencer la série au premier lundi du mois, comme dans l'exemple de la bibliothèque, ou mettre des 0 pour les jours d'avant ; ces cases prendront alors la teinte la plus pâle, celle d'une valeur nulle.data-value. Écoutez pointerover sur la racine, retrouvez la case avec e.target.closest('.hmp-cell') et affichez sa valeur où vous voulez ; c'est ce que fait l'exemple de la bibliothèque. Le texte lu par les lecteurs d'écran est déjà dans la case.
