Sistema de Visualización de Datos

¿Qué hace Sistema de Visualización de Datos?

Propósito

El Sistema de Visualización de Datos proporciona una metodología para diseñar gráficos y tablas que se sitúa por encima del nivel de métricas individuales. Garantiza que las relaciones cuantitativas—como tendencias a lo largo del tiempo, comparaciones entre categorías y distribuciones de valores—se comuniquen de forma clara, precisa y accesible. Este sistema previene el "ruido visual" y la sobrecarga cognitiva al establecer reglas para la selección de gráficos, la normalización óptica, la codificación de colores accesible y el reflujo responsivo.

Casos de Uso

• Paneles SaaS: Visualización del crecimiento de usuarios, tendencias de ingresos o rendimiento del sistema.
• Informes Financieros: Mostrar distribuciones de cartera, categorías de gastos o fluctuaciones del mercado.
• Plataformas de Análisis: Visualización de fuentes de tráfico, embudos de conversión o cohortes de comportamiento.
• Informes de Impacto y Sostenibilidad: Visualización de métricas ambientales o datos de impacto social a lo largo del tiempo.
• Aplicaciones de Salud y Fitness: Seguimiento de signos vitales, niveles de actividad o progreso hacia objetivos.

Cuándo NO Usarlo

• Números Únicos de Alto Impacto: Para KPI aislados (ej., "Ingresos Totales: $10k"), usa sistema-de-metricas-y-estadisticas.
• Datos Brutos de Múltiples Atributos: Si el usuario necesita leer valores específicos de 20+ elementos en varias columnas, usa sistema-de-tabla-de-datos-ui.
• Infografías Puramente Decorativas: Donde el objetivo es la expresión artística o la narración de historias con gráficos no dinámicos y no basados en datos.
• Estado Paso a Paso: Para procesos lineales (ej., "Paso 2 de 4"), usa sistema-de-progreso-por-pasos.

Entradas

1. Objetivo del Usuario: ¿Qué intenta entender el usuario? (Comparación, Tendencia, Distribución o Parte-del-Todo).
2. Tipo de Dato: ¿Los datos son categóricos (ej., "Tipo de Navegador"), temporales (ej., "Ventas por Mes") o cuantitativos (ej., "Precio vs. Calidad")?
3. Cardinalidad: ¿Cuántos elementos o series deben mostrarse simultáneamente?
4. Restricciones del Dispositivo: Viewports objetivo y modos de interacción (Táctil vs. Ratón).
5. Tokens de Marca: Paleta, tipografía y espaciado del sistema de diseño padre.

Salidas

1. Mapa de Selección de Gráfico: El tipo de gráfico elegido (Línea, Barra, Tarta, Dispersión) basado en el objetivo y los datos.
2. Especificación de Color Accesible: Una paleta que sigue siendo distinguible para usuarios con daltonismo (Protanopia, Deuteranopia, Tritanopia).
3. Especificación de Anatomía y Etiquetado: Reglas para títulos de ejes, leyendas, tooltips y marcadores de datos.
4. Mapa de Transición Responsiva: Cómo se adapta el gráfico de escritorio a móvil (ej., cambios de orientación, simplificación de datos).

Flujo de Trabajo

1. Identificar el Objetivo de Comunicación

Antes de elegir un gráfico, define lo que los datos deben "decir":

• Tendencia a lo Largo del Tiempo: Usa un Gráfico de Líneas o Gráfico de Áreas.
• Comparación de Categorías: Usa un Gráfico de Barras (Vertical u Horizontal).
• Relación Parte-Todo: Usa un Gráfico de Dona o Mapa de Árbol (Evita los gráficos de tarta estándar para >3 categorías).
• Correlación/Distribución: Usa un Gráfico de Dispersión o Histograma.

2. Seleccionar y Normalizar el Tipo de Gráfico

Aplica las reglas de "Verdad en los Datos" para garantizar la precisión:

• La Regla de Línea Base Cero: Los gráficos de barras DEBEN comenzar en una línea base cero en el eje de valores para evitar exagerar las diferencias.
• La Regla de la "Relación de Aspecto": Para gráficos de líneas, mantén una relación de aspecto equilibrada (generalmente 2:1 o 3:2) para que las pendientes no se vean artificialmente pronunciadas o aplanadas.
• Geometría Minimalista: Elimina "basura de gráfico" no esencial como efectos 3D, líneas de cuadrícula pesadas o sombras que no transmiten datos.

3. Establecer Jerarquía Visual y Etiquetado

Aplica sistema-de-jerarquia-visual a los componentes del gráfico:

• Etiquetado Directo: Siempre que sea posible, etiqueta las series de datos directamente junto a las líneas/barras en lugar de usar una leyenda separada para reducir la fatiga de seguimiento ocular.
• Énfasis: Usa un color de alto contraste para la serie de datos "Actual" o "Objetivo" y neutros apagados para los datos históricos o de referencia.
• Jerarquía de Contexto: Los títulos de los ejes deben estar presentes pero subordinados (más pequeños/más claros) a los datos primarios y al título del gráfico.

4. Aplicar Color y Patrón Accesibles

Asegúrate de que los datos sean perceptibles por todos:

• Paletas Seguras para Daltonismo: Usa tonos distintos y pasos de luminosidad variables. Evita emparejar solo Rojo y Verde para indicar "Malo" vs. "Bueno"; usa Rojo/Azul o agrega iconos/símbolos.
• Codificación Redundante: Usa más que solo color. Agrega líneas discontinuas, diferentes formas de marcadores (círculos, cuadrados, triángulos) o patrones/texturas distintos para diferenciar series.
• Contraste: Asegura que todo el texto (etiquetas, ejes) cumpla con el contraste WCAG AA (4.5:1) contra el fondo.

5. Diseñar para la Interacción y la Capacidad de Respuesta

• Divulgación Progresiva: Usa tooltips para mostrar valores exactos al pasar el ratón/tocar, de modo que el gráfico permanezca limpio y escaneable.
• Reflujo Responsivo:
  • Horizontal a Vertical: Un gráfico de barras verticales ancho en escritorio debe cambiar a un gráfico de barras horizontal en móvil para evitar el desplazamiento horizontal.
  • Reducción de Datos: En móvil, reduce el número de etiquetas del eje X (ej., muestra cada dos meses) o agrega puntos de datos.
  • Bloqueo de Relación de Aspecto: Asegura que el gráfico mantenga su legibilidad; usa aspect-ratio en CSS para reservar espacio y evitar CLS.

Reglas de Decisión

• La "Regla de No Tarta": Evita los gráficos de Tarta/Dona si tienes más de 5 categorías o si las diferencias entre categorías son pequeñas. Usa un gráfico de Barras Horizontal en su lugar.
• Etiquetado sobre Leyendas: Si se necesita una leyenda, colócala lo más cerca posible de los datos (ej., encima del gráfico o alineada a la derecha) en lugar de en la parte inferior absoluta.
• Éxito Monocromático: Un buen gráfico aún debe ser comprensible si se imprime en escala de grises. Si no lo es, las opciones de color o marcadores dependen demasiado solo del tono.
• Precisión vs. Escaneo: En paneles, redondea los valores (ej., 1.2M vs. 1,242,301) para un escaneo instantáneo. Mantén la alta precisión para los tooltips.

Restricciones

• Accesibilidad: Los gráficos deben tener una tabla de datos adjunta o un aria-label descriptivo que resuma la información clave. Usa role="graphics-document" o role="img" con un aria-label. Asegúrate de que todos los elementos interactivos (marcadores) cumplan con el tamaño mínimo objetivo de 24x24px.
• Capacidad de Respuesta: Los gráficos nunca deben tener un ancho fijo en píxeles; deben ser fluidos. Para gráficos SVG complejos, usa viewBox para escalar.
• Jerarquía: El título del gráfico debe ser el texto más prominente, seguido de los datos en sí.

Patrones de Falla Comunes

• Sobrecarga de Gráfico de Tarta: Intentar mostrar 10 porciones en un gráfico de tarta, haciendo imposible distinguir las más pequeñas.
• El Eje Truncado: Comenzar un gráfico de barras en un valor distinto de cero para hacer que una pequeña diferencia parezca enorme (diseño engañoso).
• Dependencia Solo del Color: Diferenciar 5 líneas en un gráfico de líneas usando solo tonos similares de azul, lo que lo hace inaccesible para usuarios daltónicos.
• Fatiga de Leyenda: Forzar al usuario a mirar de un lado a otro entre una clave de color y los datos 10 veces para entender el gráfico.
• Gráficos Móviles Desbordados: No ajustar el tipo de gráfico o el etiquetado para móvil, resultando en texto diminuto e ilegible o diseños rotos.

Criterios de Validación

• La selección del tipo de gráfico coincide con el objetivo de comunicación (ej., Línea para Tendencia).
• Los gráficos de barras comienzan en una línea base cero.
• La paleta de colores es segura para daltonismo y utiliza codificación redundante (marcadores/patrones).
• Se utiliza etiquetado directo donde el espacio lo permite; las leyendas se colocan en estrecha proximidad.
• El gráfico es fluido y se adapta correctamente a móvil (ej., reflujo horizontal).
• Accesibilidad: aria-label proporciona un resumen de los datos/información.
• Interacción: Los tooltips proporcionan datos precisos al pasar el ratón/tocar.
• Todo el texto cumple con el contraste WCAG AA (4.5:1).