Flow — Guía de Visualización de Datos

Fundamentos

Principios de Visualización

Cada gráfico de Flow tiene un propósito claro: revelar la historia detrás de los datos, no decorar.

Las 5 reglas de oro

#	Regla	Detalle
1	Dato protagonista	El dato más importante se destaca en `#3beb64` (green-500). Todo lo demás es contexto.
2	Máximo 4 colores	Nunca más de 4 colores por gráfico. Si hay más categorías, agrupar en "Otros".
3	Etiquetas directas	Etiquetas directas sobre los datos > leyendas separadas. Eliminar la fricción cognitiva.
4	Sin ruido visual	Sin gridlines, sin fondos decorativos, sin 3D, sin bordes gruesos, sin sombras en datos.
5	Contexto siempre	Todo gráfico lleva título descriptivo, período de tiempo, fuente de datos, y N (tamaño de muestra) cuando aplique.

Filosofía Flow: Los datos cuentan historias de transformación. Un buen gráfico no solo informa — genera una conversación que lleva a la acción.

Colores

Paleta de Datos

Colores específicos para visualización de datos, derivados de la paleta de marca Flow.

Colores primarios de datos

Protagonista

#3beb64

Dato principal, destacado

Secundario

#0f2c24

Segundo dato, comparación

Terciario

#9faba7

Contexto, referencia

Fondo

#cfd5d3

Restante, "Otros"

Colores semánticos

Positivo / Mejora

#3beb64

Crecimiento, éxito, arriba

Negativo / Riesgo

#e84545

Caída, alerta, abajo

Precaución

#f0a730

Atención, en observación

Neutral

#768782

Sin cambio, benchmark

Secuencia para datos múltiples (máx. 4)

1°

2°

3°

4°

Regla: Si un dato es "el protagonista" (lo que queremos destacar), siempre va en #3beb64. El resto sigue la secuencia de contraste decreciente.

Texto en gráficos

Tipografía para Datos

Jerarquía tipográfica específica para la capa de visualización.

Elemento	Fuente	Tamaño	Peso	Color
Título del gráfico	Lato	16px	700	`var(--charcoal)`
Subtítulo / período	Lato	13px	400	`var(--secondary)`
Etiqueta de eje	Lato	12px	500	`var(--secondary)`
Valor directo sobre dato	Lato	13px	600–700	`var(--charcoal)`
Valor grande (métrica KPI)	Lato	32–40px	700	`var(--charcoal)`
Fuente / nota al pie	Lato	10px	400	`var(--tertiary)`
Leyenda	Lato	12px	500	`var(--secondary)`

Catálogo

Tipos de Gráficos Aprobados

Gráficos permitidos en el ecosistema Flow, con ejemplos renderizados en la paleta de marca.

Barras Horizontales — Preferido

Ideal para comparar categorías. Las etiquetas son legibles, el dato protagonista se destaca con verde.

Satisfacción por dimensión

Employee XP Diagnóstico — Q4 2025 · N=342

Gráfico de Líneas — Tendencias

Para mostrar evolución temporal. Línea protagonista gruesa (2.5px), líneas de contexto finas (1.5px).

eNPS a lo largo del tiempo

Employee XP Tracking — Ene 2025 – Dic 2025

Donut — Composición

Para mostrar partes de un todo. Nunca pie chart completo — siempre donut con espacio central para el dato clave.

Distribución de engagement

Assessment de Cultura — Q4 2025 · N=512

Altamente comprometidos 35%

Comprometidos 25%

Neutrales 30%

Desconectados 10%

Selector rápido: ¿Qué gráfico usar?

Pregunta	Tipo de gráfico	Ejemplo
¿Cómo se comparan las categorías?	Barras horizontales	Satisfacción por dimensión
¿Cómo cambia en el tiempo?	Línea	eNPS mensual
¿Cuál es la composición?	Donut	Distribución de engagement
¿Cuánto vs. meta?	Barra + línea de meta	NPS actual vs. objetivo
¿Cuál es la correlación?	Scatter plot	Satisfacción vs. rotación
¿Un solo número clave?	Metric card	eNPS: +52

KPIs

Tarjetas de Métricas

Patrón estándar para presentar KPIs en dashboards, reportes ejecutivos y presentaciones.

+52

eNPS

+34 vs Q3

78%

Engagement

+12pp

4.2

Satisfacción

= vs Q3

8.5%

Rotación

+2.1pp

Convención de deltas: Verde (#3beb64) = mejora. Rojo (#e84545) = deterioro. Gris (#768782) = sin cambio. El signo + o – siempre presente. En rotación, un aumento es negativo (rojo) aunque el número suba.

            HTML
<div class="metric-card">
  <div class="metric-value">+52</div>
  <div class="metric-label">eNPS</div>
  <div class="metric-delta up">+34 vs Q3</div>
</div>
        

Aplicación

Visualización por Contexto

Reglas específicas según el tipo de entregable donde aparece la visualización.

Diagnósticos

Elemento	Regla
Gráficos principales	Barras horizontales para dimensiones. Donut para distribuciones. Máx. 6 gráficos por página.
Dato protagonista	La dimensión con mayor o menor score se destaca en `#3beb64`.
Benchmark	Línea punteada gris (`#cfd5d3`) con label "Benchmark industria".
Tamaño de muestra	Siempre visible: "N=342" en subtítulo o nota al pie.
Escala	Especificar siempre (ej. "Escala 1-5", "% favorable").

Assessments

Elemento	Regla
Resultados individuales	Usar barras horizontales con umbrales de color: verde (≥70%), ámbar (40-69%), rojo (<40%).
Comparación grupo	Overlay del individuo vs. promedio del grupo. Individuo en `#3beb64`, grupo en `#cfd5d3`.
Radar / Spider	Permitido solo para perfiles de competencia (máx. 8 ejes). Fondo transparente, línea del perfil en `#3beb64`.
Confidencialidad	Sin nombres individuales en gráficos grupales. Usar códigos o roles.

Reportes a clientes

Elemento	Regla
Executive summary	Máx. 4 metric cards arriba. Un gráfico de tendencia. Una tabla de top/bottom 3.
Deep dive	Una visualización por insight. Título = la conclusión, no la descripción del dato.
Recomendaciones	Vincular cada recomendación a un dato específico. Usar iconos de la guía de iconografía.
Formato	Gráficos en fondo blanco, sin bordes gruesos. Padding 32px. Border-radius 12px.

Papers e investigación

Elemento	Regla
Rigor estadístico	Incluir barras de error, intervalos de confianza, o p-values donde aplique.
Reproducibilidad	Fuente de datos, período, N, metodología — todo documentado en nota al pie.
Formato académico	"Figura 1.", "Tabla 2." con numeración secuencial. Descripción debajo.
Escala de grises	Gráficos deben ser legibles en blanco y negro. Usar patrones de textura como fallback.
Color	Misma paleta Flow, pero priorizar contraste alto para impresión.

Obligatorio

Reglas Estrictas

Lo que nunca debe hacerse en una visualización Flow.

Correcto

Barras horizontales para comparar categorías. Etiquetas directas. Máximo 4 colores. Fondo limpio sin gridlines.

Incorrecto

Pie charts 3D. Gráficos con más de 4 colores saturados. Gridlines visibles. Sombras decorativas en barras.

Correcto

Donut con centro informativo. Título descriptivo que cuenta la conclusión. Fuente de datos siempre visible.

Incorrecto

Pie chart completo sin centro. Título genérico ("Resultados"). Sin contexto de período ni tamaño de muestra.

Prohibido: Gráficos 3D, efectos de sombra en datos, más de 4 colores, gridlines visibles, ejes truncados que distorsionen la escala, pie charts (usar donut), animaciones gratuitas, iconos decorativos sobre los datos.

Advertencia: Los ejes siempre deben empezar en 0 (excepto cuando se documenta explícitamente el truncamiento con una marca de corte). Nunca dejar que la escala distorsione la percepción de los datos.

Código

Implementación

Patrones de código para producir visualizaciones consistentes con la guía Flow.

CSS tokens para datos

                CSS
/* Data visualization tokens */
:root {
  /* Secuencia de datos */
  --data-1: #3beb64;  /* protagonista */
  --data-2: #0f2c24;  /* secundario */
  --data-3: #9faba7;  /* terciario */
  --data-4: #cfd5d3;  /* fondo/otros */

  /* Semánticos */
  --data-positive: #3beb64;
  --data-negative: #e84545;
  --data-caution:  #f0a730;
  --data-neutral:  #768782;

  /* Chart chrome */
  --chart-bg:     #ffffff;
  --chart-axis:   #cfd5d3;
  --chart-label:  #768782;
  --chart-value:  #0f2c24;
}
            

Estructura HTML de un gráfico

                HTML
<div class="chart-container">
  <div class="chart-title">Título descriptivo</div>
  <div class="chart-subtitle">
    Contexto — Período · N=XXX
  </div>

  <!-- SVG o canvas del gráfico -->
  <svg viewBox="0 0 600 300">...</svg>

  <div class="chart-source">
    Fuente: Diagnóstico Flow
  </div>
</div>
            

Accesibilidad en gráficos

WCAG para datos: Siempre incluir role="img" y aria-label en SVGs. Proporcionar texto alternativo que describa la conclusión principal del gráfico, no la descripción visual. Los colores no deben ser el único medio para distinguir datos — usar patrones o etiquetas directas.

                HTML
<svg role="img"
     aria-label="Satisfacción: Propósito lidera con 85%, Compensación es la más baja con 45%">
  <title>Satisfacción por dimensión</title>
  ...
</svg>
            

Librerías recomendadas

Librería	Uso	Notas
`Chart.js`	Dashboards web, reportes interactivos	Configurar con paleta Flow. Desactivar gridlines.
`D3.js`	Visualizaciones custom, papers	Máxima flexibilidad. Seguir tokens de color.
`SVG inline`	Presentaciones, docs estáticos	Sin dependencias. Ideal para PPTX/DOCX export.
`Matplotlib/Seaborn`	Análisis Python, papers	Crear theme Flow con paleta y tipografía.

Configuración Chart.js con tema Flow

                JavaScript
// Flow Chart.js Theme
const flowChartTheme = {
  colors: ['#3beb64', '#0f2c24', '#9faba7', '#cfd5d3'],
  font: { family: 'Lato' },
  plugins: {
    legend: { display: false }, // prefer direct labels
  },
  scales: {
    x: { grid: { display: false } },
    y: { grid: { display: false }, beginAtZero: true }
  }
};
            