Configurer l'application Course de barres

Les exemples de ce cours s'appuient sur deux jeux de données :

• les résultats de la Ligue 1 2025-2026, un petit jeu construit pour ce cours à partir d'openfootball : deux lignes par match, une par club, avec les points gagnés et le logo du club quand Wikimedia Commons en héberge un libre de droits ;
• les prénoms les plus donnés en France depuis 1900, tirés du Fichier des prénoms de l'Insee : les 100 premiers prénoms de chaque année, filles et garçons confondus, avec le sexe majoritaire de chacun.

La Course de barres attend une ligne par entité et par instant : un prénom et une année de naissance, un club et la date d'un match. La section Source de données désigne ces données :

• [1] Jeu de données : le jeu à animer ;
• [2] Filtres prédéfinis : aucun ici ; ils permettraient par exemple de ne garder que les prénoms de filles, ou une partie du siècle. Les filtres sont communs à la plupart des visualisations et décrits dans le cours Créer et gérer une visualisation.

La section Barres et temporalité dit ce que représente chaque barre et comment le temps avance.

• [1] Champ de regroupement et de libellé : une barre par valeur de ce champ, ici par prénom ; sa valeur est aussi le libellé écrit sur la barre ;
• [2] Opération : la longueur des barres. Nombre de lignes compte les lignes de chaque barre ; Somme, Moyenne, Minimum et Maximum calculent sur une Colonne numérique, ici la somme des naissances.

La [3] Temporalité découpe l'animation en étapes. Deux types existent.

Date ou valeur ponctuelle : chaque ligne appartient à un seul instant, donné par le [4] Champ temporel (une date, une année, un rang…). Chaque valeur distincte du champ devient une étape. Pour une colonne de dates, un Regroupement temporel apparaît et rassemble les dates par année, trimestre, mois, semaine ou jour. Ici, l'année de naissance est un nombre : chaque année est une étape.

Période (début et fin) : chaque ligne compte dans toutes les étapes comprises entre sa [2] date de début et sa [3] date de fin. C'est le bon choix pour des objets qui durent (un contrat, un équipement en service) ou pour cumuler des événements : en Ligue 1, les points de chaque match comptent à partir du jour du match et jusqu'à la date de fin, la même pour toutes les lignes. La barre d'un club s'allonge ainsi à chaque victoire ou match nul : c'est le classement, journée après journée.

Le [4] Nombre d'étapes (de 10 à 100, 20 par défaut) découpe la période : plus il y en a, plus les transitions sont fines, mais plus le chargement est long.

La section Apparence et animation règle ce qui est tracé à chaque instant :

• [1] Nombre maximal de barres (10 par défaut) : seules les premières du classement sont affichées ;
• [2] Échelle et [3] Ordre des barres (voir 3.1) ;
• [4] Position de l'image ou de l'icône, [5] Position du libellé et [6] Afficher la valeur numérique à côté du libellé (voir 3.2).

En échelle Fixe, l'axe horizontal va de zéro au maximum de toute l'animation : les barres grandissent ou rétrécissent réellement au fil du temps : aucun prénom d'aujourd'hui n'approche les 52 000 Marie de 1901 ou les 53 000 Jean de 1946. En échelle Relative, l'axe s'adapte à chaque instant et la première barre remplit toujours la largeur : on lit le classement et les écarts, plus l'évolution des volumes.

Par classement, les barres changent de place au fil du temps : c'est la course. En ordre Alphabétique, chaque barre garde sa ligne et seule sa longueur varie : utile pour suivre un petit ensemble fixe, comme les 18 clubs d'une saison, au prix de l'effet de dépassement. Chaque valeur du jeu y a sa ligne réservée : avec des centaines de prénoms, seuls les premiers de l'alphabet seraient visibles.

Le libellé s'écrit à l'intérieur de la barre ou à gauche de la barre, dans une marge réservée : les barres sont alors plus courtes, mais un libellé long reste lisible même sur une barre courte. La valeur numérique suit le libellé, entre parenthèses, sauf si vous décochez Afficher la valeur numérique.

Une image ou une icône (voir 4.) se place à gauche de la barre, à l'intérieur, à gauche ou à l'intérieur, à droite, contre le bout de la barre.

À l'intérieur, deux variantes règlent le cas d'une barre trop courte pour son libellé : À l'intérieur, déborde si besoin (par défaut) laisse le texte dépasser le bout de la barre, À l'intérieur, sinon à droite le place juste après la barre. Dans ce second cas, l'image reste dans la barre, et n'est pas dessinée si elle n'y tient pas.

La fin de la section règle l'animation et ce qui remplit les barres :

• [1] Durée en secondes : la durée de toute l'animation, du premier au dernier instant (30 secondes par défaut) ;
• [2] Démarrer automatiquement : l'animation se lance à l'ouverture, sans attendre un clic sur le bouton de lecture ;
• [3] Utiliser les images des lignes : dessine sur chaque barre l'image de la ligne, prise dans une colonne d'images (ici le logo du club) ou dans les pièces jointes du jeu ;
• [4] Champ de couleur des barres : par défaut, chaque barre a sa couleur ; avec un champ, les barres qui partagent une valeur partagent une couleur, par exemple les prénoms colorés selon le sexe ;
• [5] Mode de coloration : une Palette qualitative, dont les couleurs sont attribuées automatiquement, ou Couleurs, images et icônes par valeur : pour chaque valeur [6], une couleur, une icône de la bibliothèque Material Design ou une image, jointe à la visualisation ou désignée par son adresse. L'icône l'emporte sur l'image ; ici, les clubs dont le logo n'est pas libre de droits reçoivent un écusson.

Le bouton de lecture, en bas à gauche, lance et met en pause l'animation, puis la relance une fois terminée. La barre de progression permet d'aller directement à un instant, à la souris ou au clavier (flèches, début, fin). L'instant courant est rappelé en bas à droite, avec le nom du champ temporel.

En mode période, les étapes se chargent au fur et à mesure : la barre de progression s'allonge jusqu'à ce que toute l'animation soit prête.

La capture d'écran d'une Course de barres (voir Créer et gérer une visualisation) montre la fin de l'animation, son état le plus parlant. Le service de capture sait aussi en produire une image animée :

Si vous avez des remarques sur ce cours, n'hésitez pas à nous les communiquer.