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

Mis à jour le 02/07/2019 par Balam Saldana

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, à un niveau plus ou moins précis.

Les secteurs d'activité 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 Koumoul, cliquez sur Mes données dans la barre de navigation. Chargez le fichier des données, que vous venez de télécharger, sur votre compte à l'aide du bouton Chargez un fichier. 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 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 Sunburst, cliquez sur Mes visualisations dans la barre de navigation, puis sur Créer une visualisation. Choisissez la visualisation Sunburst, ajouter un titre à votre visualisation et cliquez sur Créer la visualisation.

Choix visualisation

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.

Choix du jeu de données

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.

Configuration de la visualisation

Après avoir ajouté tous les groupes, nous allons modifier les paramètres de la section Présentation pour modifier le rendu visuel. Dans cette section vous avez l'option Afficher les descendants uniques, elle permet d'afficher ou d'enlever les arcs de cercle qui sont à 100% identiques par rapport au niveau précédent.

Avec l'option cochée, vous aurez un disque rempli.

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 Enregistrer pour sauvegarder votre visualisation.

Vous avez réussi à configurer une visualisation d'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 à ça :

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