Visualización de métricas

1) Objetivos de visualización

Entender rápido: en 3-5 segundos reconocer tendencia/anomalía/cambio.
Comparar correctamente: períodos, segmentos, variantes A/B.
Creer en los datos: mostrar incertidumbre, fuentes, frescura.
Actuar: junto al gráfico - CTA, filtros, enlaces a playbooks.

2) Tipos de métricas y mejores formas

3) Escalas, ejes y agregación

Escalas: lineal predeterminada; logarítmico - para rangos múltiples; porcentaje - [0; 100].
Base cero: columnas - desde cero; líneas - sin requisito de cero (pero mostrar baseline).
Agregación: día/hora/minuto, p50/p95/p99; evite la media para distribuciones «ruidosas».
Roll-up/Drill-down: botones «D/N/H» (día/semana/hora) y «↑/↓» por jerarquía (region→strana→gorod).
Muestreo de puntos (downsampling): LTTB/MinMax para largas filas para no perder extremos.

4) Contexto y comparaciones

Comparación de períodos: «Actual vs Anterior» (overlay con puntos) y/o small multiples; firme la ∆ relativa y la ∆ absoluta.
Estacionalidad: franjas de fondo «fines de semana/vacaciones», zonas cálidas/frías por hora.
Referencias: líneas horizontales de normas/objetivos (SLO/SLA), firma unidades y horizonte de tiempo.
Intervalos de confianza: bandas/cintas ± CI; para A/B - barras de error y p-value/ascensor.

5) Incertidumbre, omisiones, auditorías

Pases: rompa la línea (no conecte con cero); «nieblas» grises para una ventana inacabada.
Lages de datos: la etiqueta «los datos están 12 min detrás», tooltip con timestamp ingest.
Revisiones: trazo fino de las secciones «recalculado», referencia al changelog.

6) Color, forma y disponibilidad (A11y)

Paleta: base neutral; rojo - crítico, naranja - advertencia, verde - positivo.
Color-independencia: duplicar el valor/marcadores/firmas; contraste ≥ WCAG AA.
Número de filas: ≤5 por gráfico; de lo contrario - small multiples/facetas.
Dimensiones/clics: objetivos interactivos ≥ 32-40 px; anillos focales, navegación por teclado.

7) Firmamos correctamente

Ejes: unidades, formato de números (1 234,56; 12. 3k; 5. 2%); etiquetas de fecha con local.
Leyenda: en orden de importancia visual; clicable para incluir/excluir series.
Anotaciones: breves y sobre el caso ("release PSP_X", "incidente # 4217"), en referencia al evento.

8) Interactividad: no sobrecargar

Hover/Tooltip: compacto, con campos clave y ∆ vs baseline.
Zoom/Brush: resaltar el rango con el ratón/teclado; botón Restablecer.
Drill-down: click por segmento → corte detallado; breadcrumb para la devolución.
Selectores: presets de rango (24h/7d/30d), filtros de segmento, interruptor «Abs/Porcentaje».

9) Plantillas de componentes (API de ejemplo)

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) Rendimiento de renderizado

Agregar en el servidor: devuelva las ventanas/cuantiles ya «correctas».
Canvas/WebGL: para decenas de miles de puntos y mapas térmicos; SVG - para ≤2 -3.000 elementos y firmas claras.
Virtualización de listas/tablas: ajusta las páginas a medida que se desplaza.
Almacenamiento en caché: archivos calientes, precompute «ayer/semana».

11) Credibilidad y anti-patrones

• Manipular la escala (recortar el eje de las columnas por encima de cero).
• Mezclar diferentes unidades sin un eje secundario y firmas explícitas.
• Construir un «bosque» stacked-area con 8-10 filas.
• Sustituir los pases por ceros.
• Usar 3D/sombras por «belleza».

12) Fórmulas, unidades y formato

Dinero: unidades menores/líneas decimales; especificar explícitamente la moneda.
Conversiones/participaciones: porcentajes con un decimal (si es necesario - p. p.) .
Velocidades/apuestas: «por hora/día» - firme el período.
Redondeo: a descargas significativas, sin ocultar el orden de las magnitudes.

13) Métricas de calidad específicas y SLO

Muestre error-budget burn (el% restante del presupuesto) y los niveles de alerta.
Para uptime - stacked status bar «OK/Degraded/Down» + ventanas de incidentes.
Para latency - distribución (p50/p95/p99), «violin/boxplot» por clústeres/endpoints.

14) Stortitelling y auto-sammarie

Bloque narrativo: 2-4 frases «qué pasó» + «por qué» + «qué hacer».
Diapositivas/exportación: PDF/PNG/SVG guardando fuentes y colores; marcas de agua y fecha de corte.

15) Plan de prueba para visualizaciones

Unidad: formato de ejes, cálculo de vendas, cintas CI.
Integración: filtros/rangos/local, drill-down y navegación inversa.
E2E: escenario «de alerta a acción»: haga clic en la anomalía → playbook.
A11y/i18n: lectores en pantalla, teclado, traducción de firmas.
Perf: render grandes filas, caché frío/warm, estrés en 10 puntos ×.

16) Métricas de calidad de visualización

Tiempo-a-Insight (TTI): la mediana del tiempo hasta el primer clic/comprensión.
Tasa Explanada: una fracción de los gráficos con Explain disponible.
Tasa de acción: donde se realizaron acciones desde el widget.
Error/Noise: firmas incorrectas, quejas de los usuarios.
Perf p95: tiempo hasta el primer contenido y hasta la interactividad.

17) Check-list del diseño del gráfico

• Tipo de gráfico correcto para la tarea
• Ejes claros, unidades, formato de números y fechas
• Contexto: baseline/SLO, período de comparación, anotaciones
• Mostrar omisiones/lagunas/revisiones
• Colores y contraste (WCAG), no más de 5 filas
• Interactividad sin sobrecarga: hover, zoom, drill-down
• Rendimiento: agregación, descarga, Canvas/WebGL cuando sea necesario
• CTA cerca: abrir informe/playbook/crear alerta
• Exportación/granallado con fecha de corte y parámetros de filtro

18) Incrustación en dashboards

Consistency-kit: fichas únicas (fuentes, tamaños, paletas), comportamiento uniforme de los tultipos.
Plantillas de widgets: KPI, timeseries, distribution, comparison, map, table.
Ranuras para pistas inteligentes: etiqueta «anomalía», explicaciones de controladores, botones de acción.

19) Plan de implementación (3 iteraciones)

• Tipos de gráficos, escalas/formatos uniformes, baseline/SLO, pases/lag-insignias, exportación.

• Comparaciones de períodos, cintas CI, multiples pequeños, anomalías/insignias, navegación por teclado.

• Downsampling/WebGL, panel Explain, auto-sammarie, presets dashboards y CTA.

20) Mini preguntas frecuentes

¿Es necesario empezar siempre el eje Y desde cero?
Para las columnas, sí. Para las líneas - no es necesario, pero especifique baseline y no «engañe» con la escala.

¿Cómo mostrar p95/p99 y no sobrecargar?
Cinta percentiles o pequeños múltiples con los mismos ejes.

¿Cómo reemplazar un «pastel» con 8 segmentos?
Barras 100% apiladas o tabla con barras dentro de filas (bar-in-cell) + clasificación.

La visualización eficiente de métricas es una correcta selección de formas + contexto honesto + acciones convenientes. Mantenga los estándares uniformes de escalas y formatos, muestre incertidumbre y pases, déjenos drill down rápido y CTA, tenga cuidado con el rendimiento y la disponibilidad. Entonces, los gráficos dejarán de ser «imágenes» y se convertirán en una herramienta de toma de decisiones.