Créez un diagramme sunburst interactif et intégrez-le à votre site
Un diagramme sunburst (ou diagramme en rayon de soleil) est une méthode de visualisation particulièrement adaptée pour représenter des données hiérarchisées.
Dans ce guide, nous expliquons comment créer ce diagramme sunburst en utilisant Data Fair. Pour ce tutoriel, nous nous basons sur les données des subventions directes accordées aux associations de la ville de Poitiers, disponibles en open data. Nous analysons comment ces subventions sont distribuées selon le secteur d'activité des associations.
Les secteurs d'activité sont définis selon la Nomenclature d'activités française (NAF). Bien que les codes NAF ne soient pas inclus dans le jeu de données initial, la plateforme permet de les obtenir par enrichissement à partir du code SIRET des bénéficiaires. Pour cette visualisation, nous utilisons le fichier de données déjà enrichies.
Avant de configurer votre diagramme sunburst, il est nécessaire d'importer votre jeu de données.
Configurez votre diagramme sunburst
Pour créer votre diagramme sunburst, commencez par cliquer sur Applications dans la barre de navigation, puis sélectionnez Configurer une application.
Ensuite, choisissez la visualisation de type Diagramme Sunburst, ajoutez un titre à votre visualisation, et cliquez sur Enregistrer.
Vous serez redirigé vers la page d'édition de votre visualisation. Cliquez sur Éditer la configuration.
Dans la section Données, sélectionnez le jeu de données que vous venez de charger sur la plateforme.
La préparation des données vous permet de sélectionner les colonnes que vous souhaitez afficher dans la visualisation. Pour notre visualisation, nous souhaitons afficher la somme des montants par secteur d'activité.
Dans cet exemple, les données comportent cinq niveaux de code NAF. Vous pouvez donc ajouter jusqu'à cinq groupes différents pour obtenir cinq niveaux dans votre visualisation.
Ensuite, choisissez somme comme calcul de valeur, puis sélectionnez la colonne montant.
Une fois tous les groupes ajoutés, vous pouvez ajuster les paramètres dans la section Présentation pour modifier l'apparence visuelle.
Vous avez la possibilité de changer l'affichage des textes ainsi que les couleurs de vos groupes. N'hésitez pas à essayer différentes options pour obtenir le rendu souhaité.
Enfin, cliquez sur Valider pour sauvegarder votre visualisation.
Intégrez votre diagramme à votre site
Vous avez configuré un graphique sunburst. Pour l'intégrer, vous pouvez copier le code de votre application en utilisant le bouton d'action Intégrer dans un site. Votre code devrait ressembler à ceci :
<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 rendre votre visualisation accessible à tous les visiteurs de votre site, activez l'accès public dans la page d'édition de vos données ainsi que dans la page de configuration de votre visualisation.
Lorsque vous l'intégrerez dans votre site, vous obtiendrez le rendu suivant :
Vous savez maintenant comment créer une visualisation de Diagramme Sunburst sur Data Fair et obtenir le code pour l'intégrer sur un site externe.
Données utilisées
Si vous avez des remarques sur ce cours, n'hésitez pas à nous les communiquer.