Les courses de bar chart (graphique à barres) sont utilisées pour représenter des données évoluant dans le temps ou par rapport à des événements. Nous vous présentons ici comment réaliser cette course de graphique à barres à l'aide de la plateforme Koumoul, sans que vous n’ayez à programmer.

Les Courses de bar chart (graphiques à barres) sont utilisées pour représenter des données évoluant dans le temps ou en fonction d'événements. Nous vous présentons ici comment créer cette course de graphique à barres à l'aide de Data Fair, sans avoir besoin de programmer.

Dans ce tutoriel, nous illustrons l'évolution du nombre de points des équipes de la Ligue 1 de football au cours de la saison 2018-2019 en fonction des journées. Pour créer cette visualisation, vous aurez besoin des données de la Ligue 1, d'être connecté à Data Fair, et de quelques minutes.

Pour créer votre course de bar chart, cliquez sur Application dans la barre de navigation, puis sur Configurer une application. Sélectionnez la visualisation Bar chart race, ajoutez un titre à votre visualisation, et cliquez sur Enregistrer.

Vous serez redirigé vers la page d'édition de votre visualisation.
Cliquez sur Éditer la configuration.

Dans la section Données, sélectionnez le jeu de données que vous venez de charger sur la plateforme.

Le jeu de données contient des informations allant de la saison 2009-2010 à la 29e journée de la saison 2018-2019. Pour notre exemple, nous filtrons les données pour ne conserver que la saison 2018-2019.

Ajoutez un filtre dans le type de filtre, choisissez restreindre à des valeurs sur la colonne season, puis sélectionnez la valeur season-1819 et validez cette valeur avec la touche Entrée.

Une fois le filtre configuré, nous préparons les données.
Dans cette visualisation, nous souhaitons représenter l’évolution des points à la fin du match pour chaque équipe. Nous allons donc effectuer une somme des valeurs sur la colonne full time points avec le champ temporel played. Pour le champ des libellés, nous avons choisi Team afin d'afficher les noms des équipes sur les barres.

Comme vous pouvez le constater, le jeu de données contient de nombreuses colonnes différentes, ce qui permet de créer diverses courses de bar chart en remplaçant la valeur ull time points par une autre valeur.

Vous pouvez ensuite modifier les paramètres de la section présentation pour avoir un rendu visuel qui vous plaise.
Dans cette section, vous pouvez modifier :

• le nombre de barres (et donc d'équipes) disponibles sur la visualisation ;
• la durée de la visualisation ;
• les propriétés des barres ;
• les couleurs.

Vous pouvez ensuite ajuster les paramètres de la section Présentation pour obtenir un rendu visuel qui vous convienne.

Dans cette section, vous pouvez modifier :

• le nombre de barres (et donc d'équipes) affichées sur la visualisation ;
• la durée de la visualisation ;
• les propriétés des barres ; les couleurs.

Vous avez également la possibilité d'activer l'option pour lancer automatiquement votre visualisation lorsqu'un visiteur accède à votre page.

N'hésitez pas à essayer différents paramètres pour obtenir un rendu qui vous convienne.

Cliquez sur Valider pour enregistrer votre visualisation.

Vous pouvez intégrer votre visualisation sur un autre site en copiant le code de votre visualisation à l'aide du bouton d'action Intégrer dans un site. Votre code devrait ressembler à ceci :

<iframe src="https://koumoul.com/data-fair/app/classement-ligue-1-saison-1819?embed=true" width="100%" height="500px" style="background-color: transparent; border: none;"></iframe>

Pour rendre votre visualisation accessible à tous les visiteurs de votre site, activez l'accès public dans la page d'édition de vos données ainsi que dans la page de configuration de votre visualisation.

Lorsque vous l'intégrez dans votre site, vous obtenez ce rendu (appuyez sur play pour lancer la visualisation) :

Vous avez créé votre Bar chart race en quelques minutes.

Si vous souhaitez créer de nouvelles courses de bar chart avec les données de la Ligue 1, vous trouverez différents exemples sur cette page.

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