01
Fundamentos visuales
Paletas de color semánticas
El color de un gráfico codifica el tipo de dato. Cada visualización usa una sola de estas tres paletas, nunca una mezcla.
Cualitativa · categóricaVariables sin orden: productos, canales, regiones
data-1data-2data-3data-4data-5data-6
- Orden de asignación fijo; la serie principal siempre es data-1.
- Máximo 6 series. Más → agrupa en «Otros» (data-6).
- Misma categoría = mismo color en todo el informe.
SecuencialMagnitud o densidad de menor a mayor
seq-1 · menosseq-coral-* · alternativamás · seq-6
- Petrol por defecto; Coral solo para una segunda métrica en la misma página.
- 5–6 pasos discretos; nunca degradado continuo sin leyenda.
DivergenteDesviación respecto a un punto medio neutro
div-* · Coral ↔ neutro ↔ Petrol · por defecto, segura CVD
div-sem-* · rojo ↔ gris ↔ verde · solo con signo o icono
- El centro (0 %, objetivo, media) siempre es el neutro.
- Escala simétrica: mismo número de pasos a cada lado.
Tokens de accesibilidad · daltonismo
Simulación de las paletas con las matrices de Machado (2009). Las series 1–4 (--cvd-safe-1…4) se distinguen en los tres tipos de daltonismo; las series 5 y 6 necesitan etiqueta directa.
Categórica
Divergente por defecto · Coral ↔ Petrol
Divergente semántica · rojo ↔ verde
{{ s.n }}{{ s.tag }}
Gráfico de prueba
{{ t.t }}
{{ lg.name }}
contrastObjetos gráficos con contraste ≥ 3:1 sobre blanco. Gray (data-6) no lo cumple: solo para «Otros».
labelEl color nunca es el único canal: etiqueta directa, forma del marcador o patrón.
arrow_upwardRojo/verde solo acompañados de ▲ ▼ o signo; por defecto, divergente Coral ↔ Petrol.
Tipografía de alta legibilidad
IBM Plex Sans · cifras tabularesfont-variant-numeric: tabular-nums
Orgánico1.111.111
Directo888.080
Social41.170
Total2.040.361
{{ t.spec }}
02
Anatomía y componentes de gráficos
Ejes y cuadrículas
{{ s.n }}
{{ s.name }}{{ s.spec }}
Cuándo ocultar elementos para reducir ruido
visibility_off{{ h }}
Contenedor y tarjeta de gráfico
Sesiones por canal
Últimos 12 meses · miles
A
B
download
open_in_full
more_vert
C
área de trazadoD
WebAppE
Fuente: Analítica web · Actualizado: 01/03/2026F
{{ s.k }}
{{ s.name }}{{ s.spec }}
Leyendas interactivas y tooltips
Haz clic en la leyenda para ocultar o mostrar series; pasa el cursor sobre una serie de la leyenda para resaltarla y sobre el gráfico para ver el tooltip.
Sesiones por canal2025 · miles
{{ tip.title }}
{{ r.name }}{{ r.value }}
Total{{ tip.total }}
{{ tip.delta }}
Estados de leyenda
ActivoWeb
HoverWeb
DesactivadoWeb
- Clic: muestra u oculta la serie. Siempre queda al menos una visible.
- Hover: la serie pasa a 2,75 px y el resto baja a 20 % de opacidad.
- Alt/⌥ + clic: aísla la serie.
Anatomía del tooltip
1 · jun 2025
2 · Web74
App42
3 · Total116
4 · ▲ +6,4 % vs mes anterior
- Encabezado: fecha o categoría, 12/600.
- Filas por serie, ordenadas de mayor a menor: punto 8 px, nombre 12 Gray, valor 13/600 alineado a la derecha.
- Total separado por filete.
- Comparación opcional, 11 px, con signo y flecha.
03
Catálogo de gráficos
{{ g.name }}
{{ g.desc }}pie_chart{{ g.note }}
{{ ch.name }}{{ ch.sub }}
download
check{{ ch.use }}
block{{ ch.avoid }}
04
Guías de uso y patrones UX
Matriz de selección de gráficos
¿Qué datos tienes? Elige una fila y verás el gráfico recomendado, la alternativa y qué evitar.
Si tengo {{ pick.q }}
{{ t.t }}
arrow_forward{{ pick.chart }}
Alternativa{{ pick.alt }}
Evita{{ pick.avoid }}
Escalabilidad e interacción
{{ ir.icon }}{{ ir.title }}
–{{ it }}
Comportamiento adaptativo del mismo gráfico
{{ t.t }}
{{ r.note }}
{{ r.icon }}{{ r.name }}{{ r.bp }}
EtiquetaEscritorioTabletMóvil
Fechafeb 2026febF
Cifra1.520.0001,52 mill.1,5 M
CategoríaCastilla y LeónCastilla y L.CL
Estrategia de carga y microinteracciones
Sesiones por día{{ filterSub }}
bar_chart
Sin datos para el periodo seleccionado
Amplía el rango de fechas o quita filtros.
error
No se pudieron cargar los datos
{{ s.k }}{{ s.v }}
Revelación progresiva
{{ lv.icon }}{{ lv.n }}
{{ lv.name }}
{{ lv.desc }}
{{ lv.trigger }}