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

Mis à jour le 20/05/2020 par Balam Saldana

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é, cliquez sur Mes données dans la barre de navigation. Charger le fichier des données de la ligue 1 sur votre compte à l'aide du bouton Chargez un fichier.

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 et en bleu.

Préparation d'un jeu de données

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 Mes visualisations dans la barre de navigation, puis sur Créer une visualisation. Choisissez la visualisation bar chart race, ajoutez un titre à votre visualisation et cliquez sur Créer la visualisation.

Choix d'une visualisation

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 choissisez Restreindre à des valeurs, sur la colone Season et la valeur season-1819.

Choix du jeu de données dans la configuration

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.

Préparation des données

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émarer automatiquement votre visualisation lorsqu'un visiteur arrive sur votre page.

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

Rendu

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 à ça :

<iframe src="https://koumoul.com/s/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.