Visualisierung von Metriken

1) Ziele der Visualisierung

Schnell verstehen: Erkennen Sie den Trend/die Anomalie/Verschiebung in 3-5 Sekunden.

Richtig vergleichen: Perioden, Segmente, A/B-Varianten

Glauben Sie den Daten: Zeigen Sie Unsicherheit, Quellen, Frische.
Handeln: neben dem Zeitplan - CTA, Filter, Links zu Playbooks.

2) Arten von Metriken und bessere Formen

3) Skalen, Achsen und Aggregation

Skalen: standardmäßig linear; logarithmisch - für Vielfache von Bereichen; Zinsen [0; 100].
Nullbasis: Säulen - von Grund auf; Linien - keine Nullanforderung (aber baseline anzeigen).
Aggregation: Tag/Stunde/Minute, p50/p95/p99; Vermeiden Sie den Durchschnitt für „laute“ Verteilungen.
Roll-up/Drill-down: Tasten „D/N/H“ (Tag/Woche/Stunde) und „↑/↓“ in der Hierarchie (region→strana→gorod).
Punktprobe (Downsampling): LTTB/MinMax für lange Reihen, um keine Extreme zu verlieren.

4) Kontext und Vergleiche

Vergleich der Zeiträume: „Current vs Previous“ (overlay mit punktierter Linie) und/oder kleine Multiples; Unterschreiben Sie die relative ∆ und die absolute ∆.
Saisonalität: Hintergrundstreifen „Wochenende/Feiertage“, warme/kalte Zonen stundenweise.
Benchmarks: Horizontale Norm-/Ziellinien (SLO/SLA), Zeichnungseinheiten und Zeithorizont.
Vertrauensintervalle: Streifen/Bänder ± CI; für A/B - Fehlerbalken und p-Wert/Aufzug.

5) Unsicherheit, Lücken, Revisionen

Lücken: Brechen Sie die Linie (verbinden Sie nicht mit Null); graue „Nebel“ für ein unvollendetes Fenster.
Daten-Lags: Abzeichen „Daten liegen 12 min zurück“, Tooltip mit Timestamp ingest.
Revisionen: feine Schraffur der Abschnitte „neu berechnet“, Verweis auf changelog.

6) Farbe, Form und Verfügbarkeit (A11y)

Palette: neutrale Basis; Rot ist kritisch, Orange ist eine Warnung, Grün ist positiv.
Farbunabhängigkeit: Duplizieren mit Wert/Marker/Signaturen; Kontrast ≥ WCAG AA.
Anzahl der Reihen: ≤5 pro Diagramm; ansonsten - kleine Multiples/Facetten.
Abmessungen/Klicks: interaktive Ziele ≥ 32-40 px; Fokusringe, Tastaturnavigation.

7) Richtig unterschreiben

Achsen: Einheiten, Zahlenformat (1 234,56; 12. 3k; 5. 2%); Datenbeschriftungen mit Locale.
Legende: in der Reihenfolge der visuellen Bedeutung; anklickbar, um Reihen ein-/auszuschließen.
Anmerkungen: kurz und sachbezogen ("release PSP_X", "incident # 4217"), mit Bezug auf das Ereignis.

8) Interaktivität: nicht überladen

Hover/Tooltip: kompakt, mit Schlüsselfeldern und ∆ vs baseline.
Zoom/Brush: Markieren Sie den Bereich mit der Maus/Tastatur; Schaltfläche Zurücksetzen.
Drill-down: Klicken Sie auf ein Segment → einen detaillierten Schnitt; breadcrumb für die Rückkehr.
Selektoren: Bereichsvoreinstellungen (24h/7d/30d), Segmentfilter, Abs/Prozentschalter.

9) Komponentenvorlagen (Beispiel 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) Rendering-Leistung

Auf Server aggregieren: Bereits „richtige“ Fenster/Quantile zurückgeben.
Canvas/WebGL: für Zehntausende von Punkten und Heatmaps; SVG - für ≤2 -3.000 Elemente und klare Signaturen.
Listen/Tabellen-Virtualisierung: Laden Sie Seiten, während Sie scrollen.
Caching: Hot Tiles, Precompute „gestern/Woche“.

11) Glaubwürdigkeit und Anti-Muster

• Bearbeiten Sie die Skala (trimmen Sie die Achse der Balken über Null).
• Mischen Sie verschiedene Einheiten ohne sekundäre Achse und explizite Signaturen.
• Bauen Sie einen „Wald“ stacked-area mit 8-10 Reihen.
• Ersetzen Sie Lücken durch Nullen.
• Verwenden Sie 3D/tenyushki für „Schönheit“.

12) Formeln, Einheiten und Formatierung

Geld: minor units/Dezimalzeilen; Währung explizit angeben.
Umrechnungen/Anteile: Prozentsätze mit einem Dezimalzeichen (falls erforderlich - p. p.) .
Geschwindigkeiten/Gebote: „pro Stunde/pro Tag“ - Zeitraum unterschreiben.
Rundung: zu signifikanten Stellen, ohne die Reihenfolge der Werte zu verbergen.

13) Spezifität von Qualitätsmetriken und SLOs

Zeigen Sie error-budget burn (verbleibende% des Budgets) und Warnstufen an.
Für Aptime - Stacked Status Bars „OK/Degraded/Down“ + Fenster von Vorfällen.
Für Latenz - Verteilung (p50/p95/p99), "violin/boxplot' nach Cluster/Endpoints.

14) Storytelling und Auto-Sammari

Narrativer Block: 2-4 Sätze „was ist passiert“ + „warum“ + „was ist zu tun“.
Folien/Export: PDF/PNG/SVG unter Beibehaltung von Schriftarten und Farben; Wasserzeichen und Schnittdatum.

15) Testplan für Visualisierungen

Einheit: Achsenformat, Berechnung von Bins, CI-Bänder.
Integration: Filter/Bereiche/Local, Drill-Down und Reverse Navigation.
E2E: Alert-to-Action-Szenario: Klicken Sie auf die Anomalie → das Playbook.
A11y/i18n: Bildschirmleser, Tastatur, Übersetzung von Unterschriften.
Perf: Rendering von großen Reihen, Cold/Warm Cache, Stress auf 10 × Punkte.

16) Qualitätsmetriken für Visualisierungen

Time-to-Insight (TTI): Die mediane Zeit bis zum ersten Klick/Verstehen.
Explained Rate: Anteil der Graphen mit verfügbarem Explain.
Aktionsrate: Hier wurden Aktionen aus dem Widget ausgeführt.
Error/Noise: Falsche Signaturen, Benutzerbeschwerden.
Perf p95: Zeit bis zum ersten Inhalt und bis zur Interaktivität.

17) Checklist des Grafikdesigns

• Der richtige Diagrammtyp für die Aufgabe
• Klare Achsen, Einheiten, Zahlenformat und Datumsangaben
• Kontext: baseline/SLO, Vergleichszeitraum, Anmerkungen
• Ausweise/Verzögerungen/Revisionen anzeigen
• Farben und Kontrast (WCAG), max. 5 Reihen
• Interaktivität ohne Überlastung: hover, zoom, drill-down
• Leistung: Aggregation, Downsampling, Canvas/WebGL bei Bedarf
• CTA in der Nähe: Bericht/Playbook öffnen/alert erstellen
• Export/Sharing mit Schnittdatum und Filteroptionen

18) Einbettung in Dashboards

Consistency-Kit: einheitliche Token (Schriftarten, Größen, Paletten), einheitliches Verhalten der Tultypen.
Widget-Vorlagen: KPIs, Zeitreihen, Verteilung, Vergleich, Karte, Tabelle.
Slots für intelligente Hinweise: Abzeichen „Anomalie“, Erklärungen der Fahrer, Aktionsschaltflächen.

19) Implementierungsplan (3 Iterationen)

• Diagrammtypen, einheitliche Skalen/Formate, Baseline/SLO, Auslassungen/Lag-Abzeichen, Export.

• Periodenvergleiche, CI-Feeds, kleine Multiples, Anomalien/Abzeichen, Tastaturnavigation.

• Downsampling/WebGL, Explain-Panel, Auto-Sammari, Dashboards und CTA-Presets.

20) Mini-FAQ

Muss ich die Y-Achse immer bei Null beginnen?
Für die Pfosten, ja. Für Linien - nicht erforderlich, aber geben Sie die Baseline an und „betrügen“ Sie nicht mit dem Maßstab.

Wie zeige ich p95/p99 und überlaste nicht?
Percentiles Band oder kleine Multiples mit gleichen Achsen.

Was ersetzt den „Kuchen“ mit 8 Segmenten?
100% gestapelte Balken oder Tisch mit Balken innerhalb der Zeilen (Balken-in-Zelle) + Sortieren.

Summe

Effektive Visualisierung von Metriken ist die richtige Wahl der Form + ehrlicher Kontext + bequeme Aktionen. Halten Sie einheitliche Standards für Skalen und Formate, zeigen Sie Unsicherheit und Lücken, lassen Sie uns schnell Drill Down und CTA, achten Sie auf Leistung und Verfügbarkeit. Dann sind Diagramme keine „Bilder“ mehr und werden zu einem Entscheidungsinstrument.