10. Visualización de datos
10.1 Principios
- Tinta-dato (Tufte): todo píxel que no representa datos compite con ellos. Sin fondos decorados, sin 3D, sin sombras en barras.
- El cero importa: las barras siempre parten de cero. Las líneas pueden recortar eje, indicándolo.
- Una idea por gráfico: si necesita dos ejes Y, casi siempre son dos gráficos.
- El título dice la conclusión: "Las ventas crecieron 12% en el trimestre", no "Gráfico de ventas".
- Etiquetar directo: la etiqueta junto a la serie supera a la leyenda; la leyenda supera al tooltip.
10.2 Qué gráfico usar
| Pregunta | Gráfico |
|---|---|
| ¿Cómo evoluciona en el tiempo? | Línea (continuo) o barras verticales (períodos discretos) |
| ¿Cómo se comparan categorías? | Barras horizontales, ordenadas por valor |
| ¿Qué parte del total? | Barras apiladas 100% o dona (máx. 5 porciones; si no, barras) |
| ¿Cómo se relacionan dos variables? | Dispersión |
| ¿Cómo se distribuye? | Histograma |
| ¿Un solo número importa? | Tarjeta KPI, no un gráfico |
10.3 Aplicación de tokens
- Series con la paleta categórica
dato-1…dato-6en orden; resaltado dejando el resto en Niebla. - Rejilla del gráfico: líneas horizontales 1px Niebla, sin verticales salvo dispersión. Ejes y etiquetas en texto secundario, tamaño etiqueta.
- Cifras en tabular-nums; unidades una sola vez ("Ventas, M$"), no en cada etiqueta.
- Estados funcionales (Éxito/Error) solo cuando el dato es bueno/malo de verdad, no como decoración.
- Accesibilidad: cada gráfico con titular textual de su conclusión y tabla de datos accesible (visible o descargable); el color nunca como única codificación entre series adyacentes.