Comment créer une visualisation Treemap ?
Une treemap (carte proportionnelle) est une visualisation permettant d'explorer des données hiérarchiques.
Dans notre exemple, nous allons représenter la répartition des bacheliers en 2017 pour obtenir un rendu tel que celui-ci :
Répartition des bacheliers en 2017
Pour réaliser cette visualisation, vous allez avoir besoin des données, d’être connecté à votre compte Koumoul et de quelques minutes.
Votre compte étant un compte décourverte gratuit, les données que vous avez téléchargées sont filtrées sur l'academie de Nice en 2017 pour ne pas dépasser les quotas d'un compte gratuit.
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.
Un fois la barre de téléchargement à 100%, vous êtes redirigé vers la page d'édition du jeu de données. Valider le brouillon de votre jeu de données et attendez que l'étape 6 de finalisation soit validée en vert.
Votre fichier est maintenant disponible et prêt à être utilisé.
Vous pouvez modifier le titre du jeu de données dans les metadonnées.
Configurez votre visualisation Treemap
Pour créer votre diagramme de Treemap. Cliquez sur Applications dans la barre de navigation, puis sur Configurer une application.
Choisissez la visualisation Treemap, ajoutez un titre à votre visualisation 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 que vous venez d'importer.
Dans notre visualisation, nous souhaitons obtenir plusieurs niveaux de representation de Treemap.
Dans la section Rendu, selectionnez les colonnes voie, catégorie, domaine et enfin série sur le paramètre des colonnes de regroupement.
Votre treemap aura ainsi 4 niveaux.
Nous allons ensuite modifier le paramètre du Type de calcul pour avoir la somme des valeurs d'un champ.
Le champ que nous souhaitons afficher est le nb éléves
Dans le calcul de la proportion, vous pouvez choisir entre Lineaire ou Racine carrée selon votre préférence d'affichage.
Sur la couleur, vous pouvez choisir une couleur uniforme ou calculée selon un champ.
Dans notre exemple, nous avons choisi couleur uniforme et une Pallette Primaire et blanc.
Voici les paramètres que nous avons sélectionnés pour notre graphique :
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://opendata.koumoul.com/data-fair/app/repartition-des-bacheliers-en-2017?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 sur votre site vous aurez ce rendu :
Vous avez maintenant toutes les informations pour créer une visualisation Treemap sur la plateforme Koumoul sans avoir besoin de programmer, et trouver le code pour pouvoir l’intégrer sur un site externe.
N'hésitez pas à nous contacter pour toute information supplémentaire. Si vous souhaitez aller plus loin, nous pouvons également réaliser des visualisations personnalisées.