Créez une visualisation treemap
Une Treemap (ou 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 avez besoin des données, d’être connecté à votre compte Data Fair et de quelques minutes.
Si vous disposez d'un compte découverte gratuit, les données que vous avez téléchargées sont filtrées pour l'académie de Nice en 2017 afin de ne pas dépasser les quotas.
Avant de configurer votre visualisation Treemap, vous devez d'abord importer votre jeu de données.
Configurez votre visualisation
Sur la page des applications, cliquez à droite sur Configurer une application, puis choisissez la visualisation Treemap dans la liste des applications de type graphique.
Dans la section Sources des données, sélectionnez le jeu de données que vous venez d'importer.
Dans cette visualisation, nous souhaitons obtenir plusieurs niveaux de représentation de la treemap.
Dans la section Rendu, sélectionnez les colonnes Voie, Catégorie, Domaine et Série, dans le paramètre des Colonnes de regroupement.
Votre treemap aura ainsi 4 niveaux.
Modifiez ensuite le paramètre du Type de calcul pour obtenir la Somme des valeurs d'un champ. Le champ que nous souhaitons afficher est Nombre d'élèves.
Dans le calcul de la proportion, vous pouvez choisir entre Linéaire ou Racine carrée, selon votre préférence d'affichage.
Pour la couleur, vous pouvez choisir une Couleur uniforme ou une couleur Calculée selon un champ.
Dans notre exemple, nous avons choisi Couleur uniforme et une Palette Primaire et blanc.
Voici les paramètres que nous avons sélectionnés pour notre graphique :
Cliquez sur Valider pour enregistrer votre visualisation.
Intégrez votre visualisation à votre site
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. Votre code devrait ressembler à ceci :
<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 rendre votre visualisation accessible à tous les visiteurs de votre site, activez l'accès public dans la page d'édition de vos données et dans la page de configuration de votre visualisation.
Lorsque vous l'intégrez sur votre site, vous obtenez le rendu suivant :
Vous pouvez désormais créer une visualisation Treemap sur Data Fair, sans avoir besoin de compétences en programmation, et trouver 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 .