Contenu du cours

Créez un diagramme sunburst interactif et intégrez-le à votre site

Un diagramme sunburst (en rayon de soleil) est une visualisation adaptée à la représentation de données hiérarchisées.

Nous expliquons ici comment réaliser ce diagramme sunburst à l'aide de la plateforme Koumoul. Dans ce tutoriel, nous utilisons les données des subventions directes attribuées aux associations de la ville de Poitiers publiées en open data. Nous observons 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 utilisons le fichier des données qui sont déjà enrichies.

Configurez votre diagramme sunburst

Pour créer votre diagramme sunburst, cliquez sur visualisations dans la barre de navigation, puis sur configurer une visualisation.

Choisissez la visualisation sunburst, ajoutez 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 obtenir le rendu qui vous satisfait. Cliquez sur valider pour sauvegarder votre visualisation.

Intégrez votre diagramme à votre site

Vous avez configuré 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 obtenez ce rendu :

Conclusion

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.

N’hésitez pas à nous contacter pour toute information complémentaire.

Données utilisées

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