Configurer l'application Indicateurs clés

Les exemples de ce cours s'appuient sur trois jeux de données de référence, tenus à jour :

• Prix des carburants par station, une ligne par station et par carburant, pour les chiffres clés ;
• Naissances de 2014 à 2022, le nombre de naissances par commune et par année, pour les évolutions dans le temps ;
• le fichier consolidé des bornes de recharge IRVE, une ligne par point de recharge pour véhicules électriques, pour les barres de progression.

La section Source des données liste [1] les jeux de données de la visualisation. Vous pouvez en choisir plusieurs : chaque carte calcule ensuite sa valeur sur l'un d'eux (voir 3.), et une même visualisation peut réunir des chiffres venus de jeux différents.

La section Métriques liste les cartes de la visualisation, une métrique par carte, dans leur ordre d'affichage :

• [1] une métrique, désignée par son titre ;
• [2] son menu : Éditer la métrique, la Dupliquer (pratique pour créer une carte voisine, par exemple le même calcul avec un autre filtre), Trier la liste, Décaler la métrique vers le haut ou vers le bas, la Supprimer ;
• [3] Ajouter une métrique crée une nouvelle carte, à la fin de la liste.

Une métrique éditée [1] se règle dans cinq panneaux [2] :

• Titre et Description : les textes de la carte (voir 7.1 et 7.2) ;
• Valeur de l'indicateur : le calcul (voir 3. à 6.) ;
• Pictogramme : une icône ou une image (voir 7.3) ;
• Lien : la page ouverte au clic sur la carte (voir 7.4).

Le haut du panneau Valeur de l'indicateur définit le calcul de la carte :

• [1] Jeu de données : l'un des jeux de la section Source des données ;
• [2] Calcul de la valeur : le type de calcul (voir 3.1) ;
• [3] Colonne : la colonne sur laquelle porte le calcul, sauf pour le nombre de lignes, qui n'en a pas besoin ;
• [4] Filtres prédéfinis : les lignes prises en compte (voir 3.3).

Le champ Colonne temporelle, juste sous le jeu de données, sert à suivre une évolution (voir 6.).

• Nombre de lignes : les lignes du jeu, après les filtres. Dans le jeu des carburants, une ligne est un prix : une station par carburant proposé.
• Nombre de valeurs distinctes dans une colonne : le nombre de valeurs différentes, par exemple les identifiants de station, pour compter les stations. La colonne doit contenir une seule valeur par ligne.
• Ratio de doublons dans une colonne : le nombre de lignes divisé par le nombre de valeurs distinctes, c'est-à-dire le nombre moyen de lignes par valeur : ici, le nombre moyen de carburants proposés par station.
• Somme, Moyenne, Valeur minimale et Valeur maximale des valeurs d'une colonne numérique : seules les colonnes de nombres sont proposées.
• Valeur de la première ligne d'une colonne : la valeur d'une ligne choisie par un tri, un nombre ou un texte (voir 3.2).

Ce calcul affiche une valeur telle qu'elle est écrite dans le jeu de données, y compris un texte : un nom de commune, une date, un libellé.

• [1] Valeur de la première ligne d'une colonne : le type de calcul ;
• [2] Colonne de valeur : la colonne affichée ;
• [3] Colonne de tri et [4] Tri (ascendant ou descendant) : l'ordre qui désigne la première ligne. Trié par prix ascendant, et filtré sur le gazole, le jeu des carburants donne la commune de la station la moins chère.

Chaque métrique a ses propres filtres prédéfinis : une carte peut compter toutes les stations pendant que sa voisine calcule le prix moyen du gazole seulement, sur le même jeu de données. Pour décliner un chiffre (par carburant, par région), dupliquez la métrique et changez son filtre. Les filtres sont communs à la plupart des visualisations et décrits dans le cours Créer et gérer une visualisation.

La suite du panneau divise la valeur par une autre, pour obtenir une part, un taux ou une moyenne par unité :

• [1] Diviseur : Constante (= 1) laisse la valeur telle quelle ; Métrique la divise par une seconde métrique ;
• [2] le calcul du diviseur, réglé comme la valeur elle-même : jeu de données, calcul, colonne et filtres. Ici, le nombre de stations proposant de l'E85 est divisé par le nombre total de stations ;
• [3] Multiplicateur : multiplie le résultat, 100 pour l'exprimer en pourcentage ;
• [4] Unité : le texte affiché après la valeur, ici %.

Le multiplicateur sert aussi sans diviseur, pour changer d'échelle : 0,001 convertit une puissance cumulée de kilowatts en mégawatts (la carte Somme de la section 3.1).

La fin du panneau Valeur de l'indicateur règle l'affichage du chiffre :

• [1] Couleur : Aucune (la couleur du texte), Primaire (la couleur principale du thème du portail) ou Définie manuellement ;
• [2] Taille du texte : de Très petit à Très grand ;
• [3] Texte en gras ;
• [4] Nombre maximal de décimales (2 par défaut) : la valeur est arrondie, et les zéros inutiles ne sont pas affichés (1,99 €/L avec 3 décimales au plus).

La couleur de la valeur colore aussi la courbe d'évolution (voir 6.) et la barre de progression (voir 9.).

Avec une colonne temporelle, une carte ne calcule plus un seul chiffre, mais un chiffre par période : elle affiche celui de la dernière période, et montre son évolution.

• [1] Colonne temporelle : la colonne des périodes, une année, un mois ou une date. Chaque valeur distincte de la colonne est une période ;
• [2] Nombre de périodes affichées (de 2 à 20, 5 par défaut) : les dernières valeurs de la colonne prises en compte, ici les 9 années de 2014 à 2022 ;
• [3] Afficher : Sparkline et chip, Sparkline seule ou Chip seule.

La sparkline est une petite courbe des valeurs de chaque période ; son survol affiche la période et sa valeur. La chip donne l'évolution entre la première et la dernière période affichées, en pourcentage et avec la durée écoulée (-11.2 % sur 8 ans), en rouge pour une baisse et en vert pour une hausse. Pour une valeur de la première ligne, la chip indique seulement la période de la valeur affichée (en 2022), sans courbe.

Tous les calculs se suivent dans le temps. Un ratio aussi, à condition que son diviseur porte sur le même jeu de données : c'est le cas de la part des naissances franciliennes, dans les visualisations de ce cours. Sinon, la carte l'indique par un avertissement et affiche sa valeur sans évolution.

L'apparence des courbes se règle pour toutes les cartes à la fois, dans la section Rendu global, sous Sparkline :

• [1] Remplissage : coché (par défaut), la surface sous la courbe est remplie de la couleur de la valeur ; décoché, seule la ligne est tracée, en dégradé ;
• [2] Couleur de début, [3] Couleur de fin et [4] Direction du gradient : le dégradé de la ligne, quand elle n'est pas remplie ;
• [5] Hauteur (px) de la courbe, de 20 à 120 pixels ;
• [6] Épaisseur du trait, de 1 à 6.

Le panneau Titre règle le texte affiché au-dessus de la valeur :

• [1] Afficher : décoché, la carte n'a pas de titre ;
• [2] Texte : le titre ; laissé vide, il est déduit du calcul (Moyenne de …). Il nomme aussi la métrique dans la liste de la configuration ;
• [3] Couleur, [4] Taille du texte et [5] Texte en gras, comme pour la valeur (voir 5.).

Le panneau Description ajoute une ligne sous la valeur, pour préciser ce qu'elle mesure (qui publient leurs prix, en 2022) : [1] Texte, [2] Couleur et [3] Taille, de 0 à 5.

Le panneau Pictogramme ajoute une icône ou une image à la carte :

• [1] le type : Aucun, Icône ou Image ;
• [2] Position : En haut, À gauche, À droite ou Au milieu (entre le titre et la valeur) ;
• [3] Icône : à chercher par son nom anglais (gas-station, leaf…) parmi les icônes Material Design ;
• [4] Taille, de 1 à 4 ;
• [5] Couleur : sans couleur, l'icône est grise.

Une image (un logo, une photo) vient des pièces jointes de la visualisation : ajoutez-la d'abord dans l'onglet Pièces jointes de la page de la visualisation. Choisissez ensuite [1] Image, puis l'image [2] parmi les pièces jointes, et sa [3] Taille, de 1 à 10.

Le panneau Lien rend la carte cliquable : [1] Lien de navigation est l'adresse ouverte au clic. La carte se soulève au survol de la souris, et le lien s'ouvre dans la fenêtre du site qui intègre la visualisation, comme une navigation ordinaire.

Un lien utile mène le lecteur aux données qui expliquent le chiffre. La page Tableau d'un jeu de données, sur un portail, accepte dans son adresse un filtre et un tri, qu'elle applique à l'ouverture :

• colonne_eq=valeur filtre les lignes : type_carburant_eq=E85 ne garde que l'E85 ;
• sort=colonne trie par ordre croissant, sort=-colonne par ordre décroissant ;
• cols=colonne1,colonne2 choisit les colonnes affichées.

Dans la visualisation des prix des carburants, la carte Gazole le moins cher mène ainsi à /datasets/prix-des-carburants-par-station/table?type_carburant_eq=Gazole&sort=prix_carburant : les stations du gazole le moins cher en premier. Une carte dont le chiffre ne se retrouve pas dans une liste de lignes, comme un prix moyen, reste sans lien.

La section Rendu global règle toutes les cartes à la fois :

• [1] rendu : le style des cartes (voir 8.1), ou les barres de progression (voir 9.) ;
• [2] Couleur : la couleur de fond des cartes, Aucune, Primaire ou Définie manuellement ;
• [3] Largeur : la largeur des cartes, donc leur nombre par ligne (voir 8.2) ;
• [4] Padding : l'espace entre le bord de la carte et son contenu, de 0 à 6 ;
• [5] Arrondi des coins : Aucun, Normal, Moyen ou Grand ;
• [6] Retirer les marges : supprime l'espace autour de l'ensemble des cartes, pour les aligner sur les autres blocs d'un tableau de bord.

La suite de la section règle les courbes d'évolution (voir 6.1).

• Flat : une carte plate, sans ombre ;
• Elevation (par défaut) : une carte ombrée, qui semble posée sur la page ;
• Tonal : un fond légèrement teinté, de la couleur du rendu global quand elle est définie ;
• Contours : un simple cadre ;
• Plein : la carte sans fond ni cadre, le contenu estompé.

La largeur va de 0 (les cartes les plus étroites) à 4 (les plus larges), 2 par défaut. Le nombre de cartes par ligne suit la largeur de l'écran : sur un grand écran, 6 cartes par ligne à la largeur 0, 4 à la largeur 1, 3 à la largeur 2, 2 aux largeurs 3 et 4 ; sur un téléphone, les cartes s'empilent. Les cartes d'une ligne incomplète sont centrées.

Le padding aère le contenu de la carte, l'arrondi adoucit ses coins : un padding faible et des coins droits donnent des cartes compactes, pour un tableau de bord dense ; un grand padding et un grand arrondi, des cartes plus légères.

Avec le rendu [1] Barres de progression, chaque métrique devient une barre horizontale remplie jusqu'à sa valeur, sur une échelle de 0 à 100 : ce rendu est fait pour des pourcentages, calculés avec un diviseur et un multiplicateur de 100 (voir 4.). La valeur, arrondie à une décimale, est écrite dans la barre ; une valeur au-delà de 100 remplit la barre entière.

Le titre s'affiche au-dessus de la barre, la description en dessous et le pictogramme toujours à gauche. La barre prend la couleur de la valeur, son fond la même couleur éclaircie. [2] Hauteur (px) règle l'épaisseur des barres, de 24 à 48 pixels. Le style, la couleur de fond et l'arrondi des cartes ne s'appliquent pas à ce rendu.

Si vous avez des remarques sur ce cours, n'hésitez pas à nous les communiquer.