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

Un diagramme Sunburst, ou "en rayon de soleil", est une visualisation adaptée à la représentation de données hiérarchisées.

Nous allons découvrir comment réaliser ce diagramme Sunburst à l'aide de la plateforme Koumoul. Dans notre exemple, nous allons utiliser les données des subventions directes attribuées aux associations de la ville de Poitiers publiées en opendata. Nous allons voir comment ces subventions ont été réparties en fonction du secteur d'activité des associations.

Les secteurs d'activités sont ceux issus de la Nomenclature d'Activités Française (NAF). Les codes NAF ne sont pas présents dans le jeu de données initial, mais la plateforme Koumoul permet de les récupérer par enrichissement à partir du code Siret des bénéficiaires. Pour réaliser cette visualisation, nous allons utiliser les données qui sont déjà enrichies.

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. Une fois la barre de téléchargement à 100%, vous êtes redirigé vers la page d'édition du jeu de données. Attendez que la dernière étape de finalisation soit validée en vert et valider le brouillon. Votre fichier est maintenant disponible et prêt à être utilisé.

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

Pour créer votre diagramme Sunburst, cliquez sur Visualisations dans la barre de navigation, puis sur Configurer une visualisation. Choisissez la visualisation Sunburst, ajouter un titre à votre visualisation et cliquez sur Enregistrer.

Vous êtes redirigé sur la page de configuration de votre visualisation. Dans la section source des données, choisissez le jeu de données que vous venez de charger sur la plateforme.

La préparation de données permet de choisir les colonnes que vous voulez afficher dans la visualisation. Dans notre visualisation, nous voulons afficher la somme des montants par secteur d'activité. Il y a cinq niveaux de code NAF dans les données de cet exemple. Vous pouvez donc ajouter cinq groupes différents pour avoir cinq niveaux dans votre visualisation. Choisissez ensuite Somme comme calcul de valeur, puis la colonne montant.

Après avoir ajouté tous les groupes, vous pouvez modifier les paramètres de la section Présentation pour modifier le rendu visuel.
Vous pouvez modifier l'affichage des textes ainsi que la couleur de vos groupes. Vous pouvez essayer différents paramètres pour avoir le rendu qui vous satisfait. Cliquez sur Valider pour sauvegarder votre visualisation.

Vous avez réussi à configurer un graphique Sunburst. Vous pouvez intégrer votre visualisation en copiant le code de votre application à 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/repartition-des-subventions-aux-associations-de-poitiers-par-secteur-d'activite?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 toutes les informations pour créer une visualisation d'un diagramme Sunburst sur la plateforme Koumoul et trouver le code pour pouvoir l’intégrer sur un site externe.

J’espère que nous avons répondu à vos questions. N’hésitez pas à nous contacter sur contact@koumoul.com pour de plus amples explications.