Comment créer une course de barres animée

Les courses de barres (bar chart races) sont partout : « les 10 plus grandes économies depuis 2000 », « les langages de programmation les plus populaires année après année », « les plus grandes fortunes décennie par décennie ». Elles génèrent des millions de vues sur YouTube et LinkedIn, car voir des chiffres bouger raconte une histoire qu'un tableau figé ne pourra jamais transmettre. Le hic : la plupart sont ratées. Les barres sautent d'une position à l'autre, le rythme est soit étourdissant soit interminable, et il devient impossible de lire les valeurs qui défilent.

Ce guide explique comment réaliser une course de barres réellement lisible : la préparation des données, le détail d'animation qui distingue une course soignée d'une version bâclée, comment la cadencer, comment l'annoter, et les deux façons réalistes d'en produire une sans devenir motion designer.

La course ci-dessus classe les huit plus grandes économies de 2000 à 2024. Remarquez trois choses : les barres glissent les unes devant les autres au lieu de sauter, le compteur d'année et la valeur sur chaque barre restent toujours lisibles, et il y a un temps de pause au début et à la fin pour que l'œil puisse se poser. Ce sont les détails que nous allons construire pas à pas.

Qu'est-ce qu'une course de barres ?

Une course de barres est un graphique en barres animé où les barres représentent un ensemble d'éléments classés — pays, entreprises, produits, créateurs — dont les valeurs et les positions évoluent dans le temps. À mesure que la chronologie avance, les barres grandissent, rétrécissent et se dépassent, en se reclassant à chaque image. C'est une forme de motion design conçue spécifiquement pour les séries temporelles : au lieu de lire « le PIB de la Chine est passé de 1,2 T$ en 2000 à 18,5 T$ en 2024 », vous le regardez grimper de la sixième à la deuxième place.

Le format est devenu grand public vers 2019 et n'a jamais disparu, parce qu'il excelle dans une chose : transformer un jeu de données évoluant dans le temps en récit avec un début, un milieu et un vainqueur. C'est aussi pourquoi une version bâclée est si déconcertante : tout l'attrait repose sur un mouvement fluide et lisible, et dès qu'une barre se téléporte ou qu'un chiffre passe en flou, l'histoire se casse.

On retrouve ce format dans le journalisme de données, les rétrospectives de fin d'année, les comptes rendus aux investisseurs, la couverture du sport et des marchés, et les publications sur les réseaux — partout où une histoire de « comment les choses ont changé » doit capter l'attention dans les premières secondes et la retenir assez longtemps pour faire passer un message.

Étape 1 : donnez la bonne forme à vos données

Toute bonne course commence par des données propres et bien structurées. Le format à viser est le format large : une ligne par période (année, trimestre, mois), une colonne par élément, et les valeurs dans les cellules.

date,USA,Chine,Japon,Allemagne,Inde
2000,10.25,1.21,4.97,1.95,0.47
2008,14.77,4.59,5.11,3.75,1.20
2016,18.74,11.23,5.00,3.47,2.29
2024,28.78,18.53,4.07,4.59,3.94

Quelques règles qui vous éviteront un rendu disgracieux plus tard :

• Triez les lignes par ordre chronologique croissant. Des lignes dans le désordre font tourner la course à l'envers ou la font saccader.
• Comblez les trous explicitement. Une année manquante casse l'interpolation entre les images. Reportez la dernière valeur ou interpolez linéairement le trou — ne laissez jamais de vide.
• Supprimez les symboles monétaires, les virgules et les signes de pourcentage avant que les valeurs ne deviennent des nombres, sinon elles se transformeront silencieusement en barres de hauteur nulle.
• Limitez le nombre d'éléments. Au-delà d'une douzaine de barres, une course devient illisible. Gardez le top N à chaque image et supprimez la longue traîne ou pré-agrégez-la dans une barre « Autres ».

Les données éparses sont la norme — la plupart des jeux de données réels comportent une ligne par année, pas une par image. Ce n'est pas un problème, et cela mène directement à la technique la plus importante de tout le format.

Étape 2 : faites glisser les permutations, sans les faire sauter

Si vous ne corrigez qu'une seule chose, corrigez celle-ci. Le signe le plus révélateur d'une course de barres amateur, c'est le saut : deux barres ont des valeurs proches, l'une dépasse l'autre et, au lieu de glisser devant elle, la barre bondit d'une place entière en une seule image. Cela paraît cassé, et c'est le comportement par défaut si vous déduisez la position verticale de chaque barre de son rang entier.

Le problème, c'est qu'un rang entier bascule de façon discrète. À l'instant où la valeur interpolée de la Chine dépasse celle du Japon, le rang de la Chine passe de 3 à 2 en une image — et la barre se téléporte d'une ligne vers le haut. La solution consiste à faire de la position une grandeur continue et interpolable, plutôt que discrète.

Le même dépassement, côte à côte : à gauche, les barres sont positionnées par rang entier, donc la barre saute une place entière à l'instant où elle dépasse. À droite, un rang lissé est utilisé, donc les barres glissent l'une devant l'autre.

Il existe deux méthodes fiables pour y parvenir :

• Interpolez entre les lignes de données. Les données réelles sont éparses (une ligne par année), donc une course fluide a besoin de valeurs intermédiaires. Pour tout instant donné, calculez la valeur de chaque élément en interpolant entre les deux lignes qui l'encadrent, puis classez ces valeurs interpolées. Cela élimine déjà l'impression de diaporama.
• Lissez le rang lui-même. Déduisez la position verticale de chaque barre d'un rang qui tend progressivement vers sa cible sur une courte fenêtre (environ une demi-seconde), au lieu de sauter brusquement. Quand deux barres se croisent, elles glissent réellement l'une devant l'autre — ce qui se lit comme un dépassement spectaculaire plutôt que comme un bug.

Une touche supplémentaire par-dessus : donnez à la barre qui est en train de grimper une brève mise en valeur — une légère lueur ou un petit agrandissement — pile au moment du dépassement. Cela attire l'œil sur le moment fort de l'histoire (l'instant où la Chine dépasse le Japon) sans aucune narration supplémentaire.

Étape 3 : cadencez-la pour qu'elle soit réellement lisible

Une animation qui va trop vite n'est que du bruit. Répartissez votre temps par événement de données, pas par seconde de fioritures :

• Maintenez la première image 1 à 1,5 seconde. Laissez les spectateurs lire l'axe, les unités et qui est en lice avant que quoi que ce soit ne bouge.
• Consacrez 0,3 à 0,6 seconde par ligne de données. Assez rapide pour sembler vivant, assez lent pour suivre le leader.
• Ralentissez sur les moments qui comptent. Ajoutez une demi-seconde supplémentaire autour d'un croisement ou d'un record pour que le public puisse l'enregistrer.
• Maintenez la dernière image 2 à 3 secondes. Le message clé doit marquer — et c'est cette dernière image que les gens capturent et partagent.

Si votre course ressemble à un diaporama, c'est que vous jouez une ligne brute par seconde ; interpolez entre les lignes. Si elle paraît frénétique, augmentez le temps par ligne et appuyez-vous sur les temps de pause.

Étape 4 : étiquettes, unités et lisibilité

Des chiffres sans contexte ne sont que du bruit. Une course lisible affiche toujours :

• Une étiquette de valeur sur chaque barre qui s'anime en même temps que la valeur — qui compte à mesure que la barre grandit, et non un chiffre figé collé à la fin.
• Un indicateur de temps — l'année ou la date en cours, généralement en grand et en faible contraste dans un coin — pour que les spectateurs sachent toujours où ils en sont sur la chronologie.
• Les unités, énoncées une seule fois. « milliers de milliards USD », « utilisateurs actifs mensuels », « % de parts de marché » — indiquez-les dans le titre pour ne pas les répéter sur chaque barre.

Un détail technique qui pèse plus lourd qu'il n'y paraît : utilisez des chiffres tabulaires (à chasse fixe) pour les nombres animés. Les chiffres proportionnels changent de largeur à mesure qu'ils défilent, ce qui fait sautiller la valeur et tressauter la mise en page. Les chiffres tabulaires conservent la même largeur pour chaque chiffre, donc un compteur qui grimpe de 1 000 à 28 800 reste parfaitement stable. Arrondissez aussi avant de formater — personne n'a envie de voir 18.5314T clignoter au passage.

Les deux façons réalistes d'en réaliser une

1. La construire à la main, en code

Si vous êtes à l'aise avec React, Remotion associé à une bibliothèque de graphiques comme d3-scale est la référence absolue. Vous pilotez chaque valeur à partir de l'image courante, interpolez entre des lignes éparses, déduisez les positions verticales d'un rang lissé, et générez un MP4 propre. C'est entièrement déterministe et cela vous donne un contrôle total — mais cela implique d'écrire et de maintenir du code, et de re-rendre à chaque changement de données. Idéal pour un projet unique que vous allez peaufiner ; lourd pour quelqu'un qui a juste besoin d'un graphique avant la fin de la journée.

2. La générer à partir de vos données

Si vous ne voulez pas passer votre vie dans After Effects ni écrire du React, la voie la plus rapide est un outil d'IA conçu exactement pour ça. Avec le créateur de graphiques animés d'iArt, vous collez votre CSV (ou tapez simplement les chiffres), décrivez le style — « course de barres, thème sombre, compteur d'année, couleurs de la marque » — et il génère l'animation pour vous : permutations de rang fluides, étiquettes de valeur animées, cadence judicieuse, tout est pris en charge. Il exporte un MP4 1080p en une trentaine de secondes et, comme chaque image est rendue directement à partir de vos chiffres, les valeurs sont exactes par rapport à vos données — aucun modèle génératif n'invente de chiffre. Modifiez le CSV et ré-exportez pour mettre à jour.

Les deux voies produisent le même type de résultat ; la différence tient au temps et au savoir-faire qu'il faut y consacrer. Pour un graphique vedette unique que vous peaufinerez pendant une semaine, le code l'emporte sur le contrôle. Pour « il me faut une course propre et exacte à partir de ce tableur, et il me la faut maintenant », un outil est le choix évident.

Erreurs courantes à éviter

• Des barres qui se téléportent. Presque toujours un positionnement par rang entier. Interpolez les valeurs et lissez le rang.
• Trop de barres. Au-delà d'une douzaine, le spectateur ne peut plus rien suivre. Limitez le nombre.
• Des étiquettes de valeur figées. Si le chiffre ne compte pas en même temps que la barre, le graphique paraît mort.
• Aucun temps de pause final. L'image la plus partageable est la dernière — laissez-lui de l'espace pour respirer.
• Des chiffres faux ou inventés. Si vous utilisez un modèle vidéo génératif, il peut halluciner des chiffres. Pour les données, faites le rendu à partir des valeurs réelles — l'exactitude est tout l'enjeu.

Des données propres, des permutations qui glissent, une cadence pensée pour l'œil humain et un étiquetage clair — voilà 90 % d'une course de barres que les gens regarderont vraiment jusqu'au bout et partageront.