Data & Numbers

Des lignes et des points s’animent entre des lieux sur une carte ou un globe.

Ajoute des « Animated Map Arcs » (aussi appelés globe arcs) sur [où].
Des lignes courbes doivent se dessiner l’une après l’autre entre des lieux sur une carte en points, puis se rétracter vers leur destination pendant qu’un anneau doux y pulse : calme et régulier.
Décale les arcs pour qu’ils ne bougent jamais en même temps, garde la boucle continue et mets-la en pause si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les barres montent d’une hauteur nulle jusqu’à leurs valeurs.

Ajoute une animation « Bar Chart Grow » (aussi appelée animated bar chart ou bar chart entrance) sur [où].
Chaque barre doit monter de la ligne de base jusqu’à sa valeur, l’une après l’autre avec un décalage rapide, en ralentissant en douceur à l’arrivée.
Joue-la une seule fois quand le graphique entre à l’écran, et affiche directement le graphique final si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Des barres horizontales échangent leur rang au fil du temps à mesure que les valeurs changent.

Ajoute un « Bar Chart Race » (aussi appelé racing bar chart) sur [où].
Les barres horizontales doivent grandir et rétrécir à mesure que les valeurs évoluent dans le temps, et glisser en douceur les unes devant les autres à chaque changement de rang, chacune gardant son libellé.
Déplace les barres avec des transformations plutôt qu’en réordonnant le balisage pour que les échanges glissent au lieu de sauter, et donne aux utilisateurs un moyen de le mettre en pause.

Les éléments du graphique passent en douceur des anciennes aux nouvelles valeurs quand les données changent ou qu’on bascule de jeu de données.

Ajoute une « Chart Data Transition » (aussi appelée chart update animation) sur [où].
Quand les données changent, toutes les barres doivent glisser en même temps de leur ancienne valeur à la nouvelle, en douceur et sans hâte, au lieu d’être redessinées depuis zéro.
Fais partir chaque mise à jour des valeurs actuellement affichées pour qu’un second changement rapide ne saute pas, et applique les nouvelles valeurs instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un anneau ou un camembert se remplit dans le sens horaire jusqu’à son pourcentage.

Ajoute une animation « Donut Chart Fill » (aussi appelée pie chart sweep ou animated donut chart) sur [où].
En partant du haut, chaque segment doit se déployer à tour de rôle dans le sens horaire jusqu’à ce que l’anneau affiche sa part, en ralentissant en douceur à la fin.
Joue-la une seule fois quand le graphique entre à l’écran, et garde les vraies valeurs disponibles en texte pour les lecteurs d’écran.

Un nombre défile d’une valeur de départ jusqu’à une valeur cible quand il devient visible.

Ajoute un compteur animé (Number Ticker) sur [où] : aussi appelé count up ou animated counter.
Quand le nombre entre à l’écran, il doit compter de zéro jusqu’à sa cible, vite au début puis en ralentissant doucement à l’arrivée.
Utilise des chiffres à chasse fixe pour que rien ne tremble autour, compte une seule fois, et donne directement la valeur finale aux lecteurs d’écran et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Chaque chiffre défile verticalement jusqu’à la nouvelle valeur quand un nombre change.

Ajoute une animation de nombres « Odometer » (aussi appelée rolling numbers ou slot-machine digits) sur [où].
Quand la valeur change, chaque chiffre doit rouler verticalement jusqu’à son nouveau chiffre, toujours vers l’avant, avec un léger décalage entre les chiffres et un petit calage à la fin.
Garde tous les chiffres de même largeur pour que le nombre ne bouge pas, et n’expose que la valeur finale aux lecteurs d’écran.