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.

Dans ce tutoriel, nous représentons 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 réaliser cette visualisation, vous avez besoin des données de la ligue 1, d’être connecté à votre compte Koumoul et de quelques minutes.

Pour créer votre course de bar chart, cliquez sur visualisations dans la barre de navigation, puis sur configurer une visualisation. Choisissez la visualisation bar chart race, ajoutez un titre à votre visualisation et cliquez sur enregistrer.

Vous êtes redirigé sur la page de configuration de votre visualisation.

Dans la section sources des données, choisissez le jeu de données de la ligue 1. Le jeu de données contient des données de la saison 2009-2010 à la 29e journée de la saison 2018-2019. Pour notre exemple, nous filtrons les données pour avoir seulement la saison 2018-2019. Ajoutez un filtre dans le type de filtre, choisissez restreindre à des valeurs sur la colonne season, puis 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 des équipes. Nous allons donc effectuer une somme sur la colonne full time points avec le champ temporel played pour les team. Comme vous pouvez le constater, il y a beaucoup de colonnes différentes dans le jeu de données et il est possible de réaliser différentes courses de bar chart avec ce jeu de données en changeant la valeur full 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 également activer l'option pour démarrer automatiquement votre visualisation lorsqu'un visiteur consulte votre page.

Essayez différents paramètres pour obtenir un rendu qui vous satisfasse.

Cliquez sur valider pour sauvegarder 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 à droite. Votre code devrait ressembler à celui-ci :

<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 que votre visualisation soit accessible à tous les visiteurs de votre site, activez l'accès au public dans la page d'édition de vos données et la page de configuration votre visualisation.

Lorsque vous l’intégrez dans votre site vous obtenez ce rendu (appuyez sur play pour relancer 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 trouvez différents exemples sur cette page.

N'hésitez pas à nous contacter pour toute information complémentaire.
Si vous souhaitez aller plus loin, nous pouvons aussi réaliser des visualisations personnalisées.

Si vous avez des remarques sur ce cours, n'hésitez pas à nous contacter pour nous en faire part.