Visualisation des métriques

1) Objectifs de visualisation

Comprendre rapidement : en 3 à 5 secondes, reconnaître une tendance/anomalie/décalage.
Comparer correctement : périodes, segments, variantes A/B.
Croire les données : montrer l'incertitude, les sources, la fraîcheur.
Agir : à côté du graphique - CTA, filtres, liens vers les playbooks.

2) Types de métriques et meilleures formes

3) Échelles, axes et agrégation

Échelles : linéaire par défaut ; logarithmique - pour les multiples des gammes ; Pourcentage - [0 ; 100].
Base zéro : colonnes - à partir de zéro ; lignes - sans exigence de zéro (mais montrer baseline).
Agrégation : jour/heure/minute, p50/p95/p99 ; éviter la moyenne pour les distributions « bruyantes ».
Roll-up/Drill-down : boutons « D/H/H » (jour/semaine/heure) et « ↑/↓ » par hiérarchie (region→strana→gorod).
Échantillonnage de points (downsampling) : LTTB/MinMax pour les séries longues afin de ne pas perdre les extrêmes.

4) Contexte et comparaisons

Comparaison des périodes : « Courant vs Précédent » (overlay avec pointillé) et/ou petites multiples ; Signez la ∆ relative et la ∆ absolue.
Saisonnalité : bandes de fond « week-end/vacances », zones chaudes/froides à l'heure.
Repères : lignes horizontales des normes/objectifs (SLO/SLA), signer les unités et l'horizon temporel.
Intervalles de confiance : bandes/bandes ± CI ; pour A/B - error bars et p-value/ascenseur.

5) Incertitude, omissions, révisions

Passe : brise la ligne (ne connecte pas par zéro) ; « brouillard » gris pour la fenêtre inachevée.
Données : badge « les données sont 12 min en retard », tooltip avec timestamp ingest.
Révisions : hachurage fin des sections « recalculées », référence à changelog.

6) Couleur, forme et disponibilité (A11y)

Palette : base neutre ; le rouge est critique, l'orange est un avertissement, le vert positif.
Independence des couleurs : dupliquer les valeurs/marqueurs/signatures ; contraste ≥ WCAG AA.
Nombre de séries : ≤5 par graphique ; Sinon, small multiples/facettes.
Dimensions/clics : objectifs interactifs ≥ 32-40 px ; anneaux de focus, navigation clavier.

7) Nous signons correctement

Axes : unités, format des nombres (1 234,56 ; 12. 3k; 5. 2%); Les étiquettes de date avec le local.
Légende : par ordre d'importance visuelle ; cliquable pour inclure/supprimer les séries.
Les annotations : court et pour l'affaire ("le release PSP_X", "l'incident #4217"), avec le lien vers l'événement.

8) Interactivité : ne pas surcharger

Hover/Tooltip : compact, avec champs clés et ∆ vs baseline.
Zoom/Brush : allouer une plage avec la souris/clavier ; Bouton Réinitialiser.
Drill-down : clic sur le segment → coupe détaillée ; breadcrumb pour le retour.
Sélecteurs : préréglages de plage (24h/7d/30d), filtres de segments, commutateur Abs/Pourcentage.

9) Modèles de composants (exemple API)

json
{
"type": "timeseries",
"title": "Payment authorizations,"
"metrics": [
{"id":"auth_rate_p50","label":"p50","agg":"p50"},
{"id":"auth_rate_p95","label":"p95","agg":"p95","style":{"dash":true}}
],
"x": {"field":"ts","granularity":"5m"},
"y": {"unit":"%","min":0,"max":100},
"baseline": {"value": 92. 0, "label": "SLO 92%"},
"ci": {"field_low":"ci_low","field_high":"ci_high"},
"badges": ["late_data","revised"]
}

10) Performance de rendu

Agréger sur le serveur : renvoyer les fenêtres/quantifies déjà « correctes ».
Canvas/WebGL : pour des dizaines de milliers de points et de cartes thermiques ; SVG - pour ≤2 -3 mille éléments et signatures claires.
Virtualisation des listes/tables : agrandissez les pages au fur et à mesure.
Mise en cache : hot tyles, precompute « hier/semaine ».

11) Validité et anti-modèles

• Manipuler l'échelle (couper l'axe des colonnes au-dessus de zéro).
• Mélanger différentes unités sans axe secondaire ni signatures explicites.
• Construire une « forêt » stacked-area avec 8-10 rangées.
• Remplacez les zéros.
• Utiliser des tentes 3D pour « beauté ».

12) Formules, unités et formatage

Argent : unités mineures/lignes décimales ; indiquer clairement la monnaie.
Conversions/parts : intérêts avec une décimale (si nécessaire - p. p.) .
Vitesses/taux : « par heure/par jour » - signer la période.
Arrondir : jusqu'à des positions significatives, sans cacher l'ordre des grandeurs.

13) Spécificité des métriques de qualité et SLO

Affichez l'error-budget burn (% du budget restant) et les niveaux d'alerte.
Pour l'aptyme, les barres de statut stacked « OK/Degraded/Down » + fenêtres d'incidents.
Pour la latitude - distribution (p50/p95/p99), « violin/boxplot » par clusters/endpoints.

14) Stortelling et auto-sammari

Bloc narratif : 2-4 phrases « ce qui s'est passé » + « pourquoi » + « ce qu'il faut faire ».
Diapositives/exportation : PDF/PNG/SVG avec conservation des polices et des couleurs ; filigranes et date de coupure.

15) Plan de test pour les visualisations

Unité : format des axes, calcul des bits, bande CI.
Intégration : filtres/gammes/local, drill-down et navigation inverse.
E2E : scénario « de l'alerte à l'action » : clic sur l'anomalie → le playbook.
A11y/i18n : lecteurs à l'écran, clavier, traduction des signatures.
Perf : rendu de grandes lignes, cold/warm cache, stress à 10 points ×.

16) Métriques de qualité des visualisations

Time-to-Insight (TTI) : médiane du temps jusqu'au premier clic/compréhension.
Taux Explained : proportion de graphiques avec Explain disponible.
Taux d'action : où les actions du widget ont été exécutées.
Error/Noise : signatures erronées, plaintes des utilisateurs.
Perf p95 : temps jusqu'au premier contenu et jusqu'à l'interactivité.

17) Chèque de conception graphique

• Type de graphique correct pour la tâche
• Axes clairs, unités, format des nombres et dates
• Contexte : baseline/SLO, période de comparaison, annotations
• Affichage des laissez-passer/des délais/des révisions
• Couleurs et contrastes (WCAG), pas plus de 5 rangées
• Interactivité sans surcharge : hover, zoom, drill-down
• Performance : Agrégation, downsampling, Canvas/WebGL au besoin
• CTA à proximité : ouvrir le rapport/pleybuk/créer un alert
• Exportation/boule avec la date de coupe et les paramètres de filtre

18) Incorporation dans les dashboards

Consistency-kit : jetons uniques (polices, tailles, palettes), comportement de tultipe unique.
Modèles de widgets : KPI, timeseries, distribution, comparaison, map, table.
Slots pour les indices « intelligents » : badge « anomalie », explications des conducteurs, boutons d'action.

19) Plan de mise en oeuvre (3 itérations)

• Types de graphiques, échelles/formats uniques, baseline/SLO, omission/bagage, exportation.

• Comparaisons de périodes, bandes CI, petites multiples, anomalies/badges, navigation au clavier.

• Downsampling/WebGL, panneau Explain, auto-sammari, presets de dashboards et CTA.

20) Mini-FAQ

Dois-je toujours commencer l'axe des Y à partir de zéro ?
Pour les colonnes, oui. Pour les lignes - pas nécessaire, mais spécifiez baseline et ne pas « tricher » à l'échelle.

Comment montrer p95/p99 et ne pas surcharger ?
Bande percentiles ou petites multiples avec les mêmes axes.

Comment remplacer une tarte à 8 segments ?
Barres 100 % empilées ou table avec barres à l'intérieur des lignes (bar-in-cell) + tri.

Résultat

La visualisation efficace des métriques est le bon choix de la forme + contexte honnête + actions pratiques. Gardez des normes uniformes pour les échelles et les formats, montrez l'incertitude et les omissions, laissez drill down rapide et CTA, prenez soin des performances et de la disponibilité. Alors les graphiques cesseront d'être des « images » et deviendront un outil de décision.