Un tableau de bord (ou dashboard) est un outil permettant l’affichage de visualisations de différents types de données en un seul endroit, ce qui facilite la lecture des données : en un seul coup d’œil, vous avez accès à plusieurs visualisations.

Les visualisations peuvent être filtrées selon des concepts, comme sur le tableau de bord des Jeux olympiques.
Les éléments équipe, sport, jeux et sexe sont des concepts privés de notre organisation que nous utilisons en tant que filtres sur le tableau de bord des Jeux olympiques.

Dans ce cours, nous allons créer le tableau de bord des JO de l'équipe de France depuis 1980.
Vous aurez besoin de ces données pour créer ce dashboard.

Dans notre tableau de bord, nous allons utiliser les filtres Code-JO, sport et sexe.

Il vous faudra créer ces 3 concepts privés dans la section paramètres de votre compte

Sur la page d'édition de votre jeu de données, renseignez les trois concepts sport, Code-JO et sexe sur les colonnes correspondantes.

Appliquez les modifications et validez le brouillon du jeu de données.

Une fois votre jeu de données prêt, il est temps de configurer les trois applications qui seront affichées sur votre tableau de bord.

La première application à créer est métriques. Rendez-vous dans la barre de navigation de votre compte Koumoul, à gauche, cliquez sur applications, puis sur le bouton de configuration d’une application à droite, enfin sélectionnez métriques dans la liste des applications de type texte.

Dans la section métriques, vous allez créer quatre étiquettes. Vous pouvez essayer différents paramètres pour obtenir le rendu souhaité. Nos 4 étiquettes sont configurées de la même manière, seuls les icônes, titres et colonnes concernées changent.

Étiquette 1 :

• Affichage : tonal,
• Couleur : primaire,
• Pictogramme : icône, au milieu,
• Icône : human,
• Titre : Athlètes,
• Valeur de l’indicateur : nombre de valeurs distinctes dans une colonne,
• Colonne : Name.

Pour les étiquettes suivantes, voici les paramètres :

Étiquette 2 :

• Affichage : tonal,
• Couleur : primaire,
• Pictogramme : icône, au milieu,
• Icône : human-greeting,
• Titre : Équipes,
• Valeur de l’indicateur : nombre de valeurs distinctes dans une colonne,
• Colonne : Team.
  
  

Étiquette 3 :

• Affichage : tonal,
• Couleur : primaire,
• Pictogramme : icône, au milieu,
• Icône : badminton,
• Titre : Sports,
• Valeur de l’indicateur : nombre de valeurs distinctes dans une colonne,
• Colonne : Sport.
  
  

Étiquette 4 :

• Affichage : tonal,
• Couleur : primaire,
• Pictogramme : icône, au milieu,
• Icône : basketball,
• Titre : Épreuves,
• Valeur de l’indicateur : nombre de valeurs distinctes dans une colonne,
• Colonne : Event.
  
  

Cliquez sur valider pour enregistrer votre application.

À présent, vous allez configurer un histogramme représentant la participation aux Jeux olympiques des athlètes français depuis 1980. Pour cela, configurez une nouvelle application comme précédemment, puis sélectionnez graphiques divers dans la liste des applications de type graphique.

Dans la section type de visualisation, sélectionnez l’histogramme multivalué, puis cochez empiler les barres et désactiver la bascule d’empilement.

En ce qui concerne le paramètre de préparation des données, nous avons choisi de grouper les lignes. Le menu correspondant s’affiche et nous avons choisi de grouper les lignes par valeurs exactes d’une colonne, en l’occurrence les colonnes name et medal.
Vous devez ensuite choisir le nombre maximal d’éléments (nous avons choisi 16).
Nous souhaitons calculer le nombre de lignes et trier par valeur calculée, en choisissant un ordre descendant.
Pour les couleurs affichées, nous avons choisi la palette personnalisée pour définir l’ordre et les couleurs des valeurs des médailles.

Dans la section options, vous pouvez saisir le titre du graphique.

Cliquez sur valider pour enregistrer votre application.

La dernière des applications à configurer pour ce cours est un diagramme de comparaison de proportions. Sélectionnez comparaison de proportions parmi les applications de type graphique.

Dans la section rendu, le champ de la valeur à comparer est sex. Nous sélectionnons le décompte des lignes comme type de calcul et ne gardons qu’une ligne par valeur dans cette colonne : ID.

Pour l’apparence de votre application, vous pouvez essayer différents paramètres pour obtenir un rendu satisfaisant. Nous avons choisi la marge minimum entre les éléments et d’afficher des icônes (human) bleus (M) et roses (F).

Cliquez sur valider pour enregistrer votre application.

Il est maintenant temps de configurer votre tableau de bord, qui présentera les trois visualisations configurées dans ce cours, ainsi qu’une prévisualisation du jeu de données sous forme de tableau.

Dans la barre de navigation de votre compte Koumoul, cliquez sur applications, puis sur configurer une application. Sélectionnez dashboards parmi les applications de type autre et renseignez un titre.

Vous être redirigé sur la page de configuration de votre application. Cliquez sur éditer la configuration dans la partie rendu. Votre écran de configuration sera alors divisé en deux parties : l’aperçu à gauche et le menu à droite.

Dans le menu, dans la section données, sélectionnez votre jeu de donnée, qui doit être celui avec lequel vous avez déjà configuré les autres applications.

Nous allons à présent utiliser les concepts privés créés dans la première partie de ce cours en ajoutant des filtres au tableau de bord, à l’aide du bouton « + » à droite. Dans la colonne de libellé, choisissez sport, games et sex, et leurs concepts respectifs (homonymes).

Vous pouvez créer plusieurs sections à votre tableau de bord. Pour ce cours, nous n’en configurons qu’une, vous pouvez donc tester différents paramètres de rendu pour choisir celui que vous préférez. Cliquez sur le bouton « + » et donnez un titre à votre section (ici « participation »), et attribuez-lui éventuellement une icône.

Notre section contient deux lignes. Cliquez sur le bouton « + » pour ajouter la première ligne, contenant uniquement l’application métriques créée précédemment. Vous pouvez choisir la hauteur de votre ligne (par défaut de 400 pixels, nous avons réduit la nôtre à 200 pixels pour éviter un vide peu esthétique avant la seconde ligne).

Ajoutez un élément en cliquant sur le bouton « + ». Vous pouvez choisir de renseigner un titre et sélectionner la largeur que vous préférez (ici « moyen »). Sélectionnez la visualisation dans la liste des types d’éléments et choisissez votre application métriques créée précédemment.

La deuxième ligne est un peu plus longue à configurer, car elle contient deux applications et une prévisualisation.

Les deux applications sont présentées l’une au-dessus de l’autre dans une colonne. Pour réaliser cela, ajoutez une ligne. La hauteur choisie est 600 pixels, pour que les deux applications restent lisibles.

Ajoutez un élément. Nous avons choisi la largeur la plus petite (« fin ») et sélectionné une colonne comme type d’élément. Ajoutez deux éléments :

• le premier est une visualisation : l’application graphiques divers configurée pour ce cours ;
• le second est aussi une visualisation : l’application comparaison de proportions créée précédemment.

La deuxième partie de la ligne est occupée par la vue tableau du jeu de données. Ajoutez un deuxième élément sur cette ligne. Vous pouvez renseigner un titre et choisir la largeur de votre prévisualisation (ici « large »).

L’élément à intégrer ici est la prévisualisation table. Sélectionnez votre jeu de données (dataset) et l’affichage (nous avons choisi le tableau dense pour une meilleure lisibilité). Vous pouvez ensuite opter pour les champs (colonnes) que vous souhaitez voir s’afficher.

Si vous souhaitez ajouter d’autres sections, répétez ces étapes.

Cliquez sur valider pour enregistrer votre tableau de bord.

Vous pouvez intégrer votre tableau 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://koumoul.com/data-fair/app/iXV-yk8Xaycj__64n8_Y8" 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égrez sur votre site, vous obtenez ce rendu :

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