Tutoriel : Comment créer un diagramme de Sankey et l'intégrer à son site

Mis à jour le 03/05/2019 par Balam Saldana

Les diagrammes de Sankey sont souvent utilisés pour représenter des données de flux. Nous allons présenter dans ce tutoriel comment réaliser ce diagramme de Sankey à l'aide de la plateforme Koumoul, sans avoir besoin de programmer.

Dans notre exemple, nous allons représenter la répartition des voix des français à l'étranger lors du premier tour des présidentielles de 2017 en fonction de leur pays de résidence et du candidat pour lequel ils ont voté. Pour réaliser cette visualisation, vous allez avoir besoin des données, d’être connecté à votre compte Koumoul et de quelques minutes.

Lorsque vous êtes connecté à la plateforme, cliquez sur Mes données dans la barre de navigation. Charger le fichier des données, que vous venez de télécharger, 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 en bleu. Votre fichier est maintenant disponible et prêt à être utilisé.

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 diagramme de Sankey. Cliquez sur Mes visualisations dans la barre de navigation, puis sur Créer une visualisation. Choisissez la visualisation de Sankey, 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 des résultats des voix du premier tour.

Choix du jeu de données dans la configuration

Dans notre visualisation, nous voulons représenter l’ensemble des voix pour chaque candidats. Nous allons donc effectuer une somme sur la colonne voix depuis les pays vers les candidats. Rentrez un calcul de valeur par Somme sur la colonne Voix avec comme source la colonne Pays et comme cible la colonne Candidats.

Préparation des données

Nous allons ensuite modifier les paramètres de la section Présentation pour avoir un rendu visuel qui nous plaît.

Dans Présentation, vous pouvez modifier le nombre de groupes, la couleur de vos groupes et le tri.

Vous pouvez essayez différents paramètres pour avoir le rendu qui vous satisfait. Si vous ne rentrez aucun tri sur les groupes, l'application va essayer d'avoir le rendu le plus homogène possible.

Voici les paramètres que nous avons sélectionnés pour notre graphique :

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/diagramme-de-sankey?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 :

Vous avez maintenant toutes les informations pour créer une visualisation d'un diagramme de Sankney sur la plateforme Koumoul sans avoir besoin de programmer, et trouver le code pour pouvoir l’intégrer sur un site externe.

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.