Tutoriel : Comment créer un diagramme de comparaison de proportions ?

Updated 02/08/2021 by Mathis Querioux

Les « Waffle Charts » ou « Graphiques en gaufre » offrent un aperçu intuitif de proportions dans un ensemble de données et la possibilité de les comparer en fonction de différentes catégories/variables. Ils peuvent être utilisés pour mettre en avant des indicateurs de réalisation d'objectifs.

Nous allons présenter dans ce tutoriel comment réaliser ce diagramme de comparaison de proportions à l'aide de la plateforme Koumoul, sans avoir besoin de programmer.

Dans notre exemple, nous allons comparer la gravité des accidents de vélo survenus dans le Morbihan entre 2005 et 2017 en fonction de leur situation sur la route.
Pour réaliser cette visualisation, vous allez avoir besoin des données, d’être connecté à votre compte Koumoul et de quelques minutes.

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.

Choisissez le titre que vous allez donner à votre jeu de données, cliquez sur Lancer l’import, un fois la barre de téléchargement à 100%, vous êtes redirigé vers la page d'édition du « brouillon ».
Cette étape vous permet d’accéder aux 100 premières lignes de votre jeu, de vérifier que tout s’est bien déroulé lors de l’import et que le format du fichier est bien supporté par la plateforme.
Une fois votre brouillon validé, les 6 étapes sont effectuées sur l'ensemble du fichier. Une fois l'étape Finalisation terminée votre fichier est disponible et prêt à être utilisé.

Chargement

Pour créer votre diagramme de Comparaison de proportions : Naviguez sur la page de votre jeu de données récemment importé jusqu’à la partie Utilisations où vous pourrez cliquer sur Configurer une visualisation.

Parmi la liste d’application disponibles sur la plateforme Koumoul, choisissez la visualisation Comparaison de proportions, ajoutez un titre à votre visualisation et cliquez sur Enregistrer.

Les visualisations dont le titre est en rouge ne sont pas réalisables avec votre jeu de données car il ne possède pas les concepts nécessaires à la configuration de ces applications (exemple : pour une visualisation cartographique vous aurez besoin des concepts Latitude/longitude).

Choix d'une visualisation

Vous êtes redirigé sur la page de configuration de la visualisation.

Tout d’abord, commencez par vérifier que dans la section Sources des données notre jeu de données a bien été sélectionné.

Ensuite, dans notre visualisation, nous voulons une comparaison de la gravité des accidents en fonction de la situation. La valeur que nous souhaitons comparer étant la gravité des accidents nous allons alors sélectionner ce champ dans la section « Champ de la valeur à comparer » et mettre le champ situation dans la section « champ de la catégorie ».

De plus, étant donné que dans notre jeu de données nous savons que chaque ligne correspond à 1 accident nous allons choisir décompte des lignes comme type de calcul (L’autre option disponible est l’option « somme des valeurs d’un champ » mais elle ne nous intéresse pas pour notre configuration).

Configuration

Nous allons maintenant nous occuper du rendu visuel de notre visualisation, étape très simple et rapide pour cette application. Cette section de mise en forme apparait à partir du moment où vous avez sélectionné les champs à comparer.

Dans celle-ci vous allez pouvoir modifier la taille de la marge entre les différents « carrés », choisir si vous souhaitez remplacer les « carrés » par des pictogrammes ainsi que les couleurs et l’ordre des valeurs à comparer.

Voici les paramètres que nous avons sélectionnés pour notre graphique d’exemple :

Configuration

Cliquez sur Valider 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 à ça :

<iframe src=https://koumoul.com/s/data-fair/app/accidents-de-velo-morbihan-(56)?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 maintenant toutes les informations pour créer une visualisation d'un diagramme de Comparaison de proportions 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 aussi réaliser des visualisations personnalisées.

Share
facebook twitter linkedin