Contenu du cours

Créez un diagramme de Sankey et intégrez-le à votre site

Les diagrammes de Sankey sont souvent utilisés pour représenter des données de flux. Dans ce tutoriel, nous expliquons comment réaliser celui-ci à l'aide de la plateforme Koumoul, sans programmer.

Dans cet exemple, nous représentons 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.

Configurez votre diagramme de Sankey

Pour créer votre diagramme de Sankey, cliquez sur visualisations dans la barre de navigation, puis sur configurer une visualisation. Choisissez la visualisation de Sankey, ajoutez un titre 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 des résultats des voix du premier tour.


Dans cette visualisation, nous voulons représenter l’ensemble des voix pour chaque candidat. Nous effectuons donc une somme sur la colonne voix depuis les pays vers les candidats.

Rentrez un calcul de valeur par somme des valeurs sur la colonne voix avec, comme source, la colonne pays et, comme cible, la colonne candidats.


Vous pouvez à présent modifier les paramètres de la section présentation pour un rendu visuel qui vous plaise. Vous pouvez changer le nombre de groupes, la couleur de vos groupes et le tri.

Essayez différents paramètres pour obtenir le rendu idéal. Si vous ne rentrez aucun tri sur les groupes, l'application va préparer le rendu le plus homogène possible.

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

Sauvegardez et partagez votre visualisation

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/diagramme-de-sankey?embed=true" width="100%" height="550px" 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 :

Conclusion

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

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.

Données utilisées

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