Tutoriel : Comment créer une bar chart race et l'intégrer à son site ?

Les courses de graphique à barres sont utilisées pour représenter des données évoluant dans le temps ou par rapport à des événements. Nous allons vous présenter comment réaliser cette course de graphique à barres à l'aide de la plateforme Koumoul, sans avoir besoin de programmer.

Dans notre exemple, nous allons représenter l'évolution du nombre de points des équipes de la ligue 1 au cours de la saison 2018-2019 en fonction des journées.
Pour réaliser cette visualisation, vous allez avoir besoin des données de la ligue 1, d’être connecté à votre compte Koumoul et de quelques minutes.

Lorsque vous êtes connecté à la plateforme, allez dans l'espace de Partage et visualisation de données, cliquez sur Jeux de données dans le menu de navigation. Chargez le fichier des données, que vous venez de télécharger, sur votre compte à l'aide du bouton Fichier dans la section de droite.

Un fois la barre de téléchargement à 100%, vous êtes redirigé vers la page d'édition du jeu de données. Attendez que l'étape 6 de finalisation soit validée en vert et validez le bouillon.

Vous pouvez modifier le titre du jeu de données en haut de cette page d'édition.

Pour créer votre courses de graphique à barres, 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 allons filtrer 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 valider cette valeur avec la touche Entrée.

Une fois le filtre configuré, nous allons préparer les données. Dans notre 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 l'avez pu constater, il y a beaucoup de colonnes differentes dans le jeu de données et il est possible de réaliser differentes bar chart races 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 nous plaît.
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 aussi activer l'option pour démarrer automatiquement votre visualisation lorsqu'un visiteur arrive sur votre page.

Essayez différents paramètres pour avoir le rendu qui vous satisfait.

Cliquez sur Enregistrer 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égrerez dans votre site vous aurez ce rendu (appuyez sur play pour relancer la visualsiation) :

Si vous souhaitez créer de nouvelles bar chart race avec les données de la ligue 1, vous avez differents exemples sur cette page.

Si vous souhaitez créer une bar chart race avec d'autres données, verifiez que vos données ont le meme format de données que celles du fichier de la ligue 1. Nous avons créé un turoriel pour vous permettre de mettre en forme vos données avec open refine si vous en avez besoin.

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