Metrics visualization

1) Imaging objectives

Understand quickly: recognize a trend/anomaly/shift in 3-5 seconds.
Compare correctly: periods, segments, variants A/B.
Believe the data: show uncertainty, sources, freshness.
Act: next to the graph - CTA, filters, links to playbooks.

2) Metric types and best forms

3) Scales, axes and aggregation

Scales: linear by default; logarithmic - for multiple ranges; percentage - [0; 100].
Zero basis: bars - from scratch; lines - no requirement of zero (but show baseline).
Aggregation: day/hour/minute, p50/p95/p99; avoid the average for "noisy" distributions.
Roll-up/Drill-down buttons "D/N/H" (day/week/hour) and "↑/↓" in the hierarchy (region→strana→gorod).
Sampling points (downsampling): LTTB/MinMax for long rows so as not to lose extremes.

4) Context and comparisons

Period comparison: "Current vs Previous" (overlay with dotted line) and/or small multiples; sign relative ∆ and absolute ∆.
Seasonality: weekend/holiday background bands, warm/cold zones by the hour.
Benchmarks: horizontal norm/target lines (SLO/SLA), sign units and time horizon.
Trust intervals: strips/tapes ± CI; for A/B - error bars and p-value/elevator.

5) Uncertainty, omissions, revisions

Omissions: break the line (do not connect with zero); gray "fogs" for the incomplete window.
Data lags: badge "data is 12 minutes behind," tooltip with timestamp ingest.
Revisions: thin hatch areas "recalculated," reference to changelog.

6) Color, shape and availability (A11y)

Palette: neutral base; red - critical, orange - warning, green - positive.
Color independence: duplicate with value/markers/signatures; contrast ≥ WCAG AA.
Number of rows: ≤5 per graph; otherwise small multiples/facets.
Sizes/clicks: interactive targets ≥ 32-40 px; focus rings, keyboard navigation.

7) Signing correctly

Axes: units, number format (1,234,56; 12. 3k; 5. 2%); data labels with locale.
Legend: In order of visual importance; clickable to include/exclude series.
Annotations: briefly and in the case ("release, PSP_X" "incident # 4217"), with reference to the event.

8) Interactivity: don't overload

Hover/Tooltip: compact, with key fields and ∆ vs baseline.
Zoom/Brush: mouse/keyboard selection; Reset button.
Drill-down: click on segment → detailed section; breadcrumb to return.
Selectors: presets of ranges (24h/7d/30d), segment filters, "Abs/Percentage" switch.

9) Component templates (example 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 performance

Aggregate on the server: return already "correct" windows/quantiles.
Canvas/WebGL: for tens of thousands of points and heat maps; SVG - for ≤2 -3 thousand elements and clear signatures.
List/Table Virtualization - Load pages as you scroll.

Caching: hot tiles, precompute "yesterday/week."

11) Validity and anti-patterns

• Manipulate the scale (trim the axis of the columns above zero).
• Mix different units without secondary axis and explicit signatures.
• Build a stacked-area "forest" with 8-10 rows.
• Replace gaps with zeros.
• Use 3D/shadow for the sake of "beauty."

12) Formulas, units and formatting

Money: minor units/decimal strings; explicitly specify currency.
Conversions/fractions: percentages with one decimal (if necessary - p. p.) .
Rates/rates: "per hour/per day" - sign the period.
Rounding: to significant digits, without hiding the order of values.

13) Specificity of quality and SLO metrics

Show error-budget burn and warning levels.
For uptime - stacked status bars "OK/Degraded/Down" + incident windows.
For latency - distributions (p50/p95/p99), "violin/boxplot" by clusters/endpoints.

14) Storytelling and auto-sammari

Narrative block: 2-4 sentences "what happened" + "why" + "what to do."

Slides/export: PDF/PNG/SVG with fonts and colors; watermarks and cutoff date.

15) Test plan for visualizations

Unit: axis format, bin calculation, CI tape.
Integration: filters/ranges/locale, drill-down and reverse navigation.
E2E: alert-to-action scenario: clicking on an anomaly → playbook.
A11y/i18n: screen readers, keyboard, translation of signatures.
Perf: render of large rows, cold/warm cache, stress at 10 × points.

16) Visualization quality metrics

Time-to-Insight (TTI): Median time to first click/insight.
Explained Rate - share of graphs with Explained available.
Action Rate: where the actions from the widget were performed.
Error/Noise: incorrect signatures, user complaints.
Perf p95: time to first content and to interactivity.

17) Schedule Design Checklist

• Correct schedule type for the task
• Clear axes, units, number and date format
• Context: baseline/SLO, comparison period, annotations
• Show gaps/lags/revisions
• Color and Contrast (WCAG), 5 rows max
• Interactivity without overload: hover, zoom, drill-down
• Performance: Aggregation, downsampling, Canvas/WebGL on demand
• CTA side by side: open report/playbook/create alert
• Export/Share with Slice Date and Filter Settings

18) Embedding in dashboards

Consistency-kit: uniform tokens (fonts, sizes, palettes), uniform behavior of typefaces.
Widget templates: KPI, timeseries, distribution, comparison, map, table.
Slots for "smart" prompts: "anomaly" badge, driver explanations, action buttons.

19) Implementation plan (3 iterations)

• Types of graphs, unified scales/formats, baseline/SLO, gaps/lag badges, export.

• Period comparisons, CI tapes, small multiples, anomalies/badges, keyboard navigation.

• Downsampling/WebGL, Explain panel, auto-sammari, dashboard presets and CTA.

20) Mini-FAQ

Should the y-axis always start from scratch?
For columns - yes. For lines - not necessary, but specify baseline and do not "deceive" by scale.

How to show p95/p99 and not overload?
Tape percentiles or small multiples with the same axes.

How to replace the "pie" with 8 segments?
100% stacked bars or bar-in-cell + sort.

Total

Effective metric visualization is the correct choice of form + honest context + convenient actions. Keep uniform standards for scales and formats, show uncertainty and omissions, give a quick drill down and CTA, take care of performance and availability. Then the graphs will cease to be "pictures" and become a decision tool.