Visualización de datos: cómo elegir el gráfico correcto y diseñarlo con claridad

Hace poco una cadena de clínicas nos pidió rediseñar el informe mensual que enviaba a sus directores de centro. Eran doce páginas con gráficos de tarta en 3D, leyendas de diez colores y ejes que empezaban en valores distintos según la página. Cada director tardaba media mañana en entenderlo y casi nadie llegaba al final. Al terminar, el informe ocupaba tres pantallas y respondía cinco preguntas, cada una con un solo gráfico. La información era exactamente la misma.

La visualización de datos tiene mucho de diseño editorial: decidir qué es importante, ordenarlo y dejar que se lea solo. Y tiene una parte de ciencia, porque sabemos bastante bien qué formas compara el ojo con precisión y cuáles no. Con esas dos patas, cualquier persona puede pasar de gráficos que decoran a gráficos que explican.

Esta guía se centra en el gráfico en sí: cómo elegirlo y cómo diseñarlo. Si tu reto es organizar muchos indicadores en una pantalla, en la guía de dashboards que se entienden hablamos de jerarquía de KPIs y composición.

01Empieza por la pregunta, no por el gráfico

El error de partida más habitual es abrir la herramienta y elegir un tipo de gráfico porque «queda bien». Lo que funciona es escribir primero la pregunta que el gráfico debe responder, en una frase:

• →¿Qué producto vende más? → comparación.
• →¿Cómo han evolucionado las reservas este año? → evolución en el tiempo.
• →¿Qué parte de los ingresos viene de cada canal? → composición.
• →¿Cómo se reparten los tiempos de entrega? → distribución.
• →¿Gastan más los clientes que vuelven más a menudo? → relación.
• →¿Dónde están nuestros clientes? → geografía.

Cada tipo de pregunta tiene unas pocas formas que la responden bien. Y si no sabes formular la pregunta, el problema no es de diseño: todavía no está claro qué se quiere contar.

02Cómo elegir el gráfico correcto

La ciencia detrás: qué compara bien el ojo

En 1984, William Cleveland y Robert McGill publicaron un estudio clásico sobre la precisión con la que las personas leemos distintas codificaciones visuales. Su conclusión, confirmada después por otros trabajos, ordena las codificaciones de más a menos precisas, aproximadamente así: posición sobre una escala común, longitud, ángulo y pendiente, área, y por último volumen, saturación y tono de color.

Traducido a decisiones prácticas: las barras y los puntos sobre un eje se leen con mucha precisión; las porciones de tarta, las burbujas y los mapas de color se leen con bastante menos. No significa que estos últimos no sirvan, sino que son mejores para dar una impresión general que para comparar valores cercanos.

Tabla de decisión

Dos atajos que resuelven la mayoría de casos: si dudas, usa barras horizontales ordenadas de mayor a menor; y si el eje horizontal es tiempo, usa líneas.

03Diseñar con claridad: menos tinta, más información

Edward Tufte, uno de los grandes referentes de la disciplina, propuso en The Visual Display of Quantitative Information (1983) la idea de la proporción de tinta de datos: la mayor parte de lo que se dibuja debería representar datos, y lo que no lo hace (fondos, bordes, rejillas gruesas, efectos 3D) debería reducirse al mínimo. No hay que llevarla al extremo, pero es una brújula excelente.

Lo que funciona en cada parte del gráfico

• →Título que dice la conclusión. «Las reservas por móvil ya superan a las de escritorio» comunica más que «Reservas por dispositivo, 2026». El subtítulo puede aclarar unidades y periodo.
• →Etiquetas directas. Pon el nombre de cada serie junto a su línea o barra en lugar de una leyenda aparte. Ahorra al ojo ir y volver.
• →Rejilla suave. Líneas horizontales finas en gris claro, o ninguna si los valores están etiquetados.
• →Ejes limpios. Pocas marcas, números redondos, separador de miles y unidades claras («12 mil €», mejor que «12000»).
• →Barras desde cero. En barras, el eje empieza en cero siempre. En líneas, puede ajustarse al rango si se rotula con claridad.
• →Orden con sentido. De mayor a menor en comparaciones, cronológico en el tiempo, natural en escalas (de «muy insatisfecho» a «muy satisfecho»).
• →Nada de 3D ni sombras. Distorsionan la percepción de tamaños sin añadir información.
• →Anotaciones. Una nota breve sobre un pico o una caída («apertura del nuevo centro») convierte un dibujo en una historia.

Color con intención

El color en un gráfico debería significar algo. Tres tipos de paleta cubren casi todos los casos:

1. 01Categórica, para series sin orden (canales, productos). Colores de tono distinto y luminosidad parecida. Hasta seis o siete; con más, el ojo deja de distinguirlos.
2. 02Secuencial, para valores ordenados de menos a más. Un solo tono que va de claro a oscuro.
3. 03Divergente, para valores con un punto medio significativo (por encima y por debajo del objetivo). Dos tonos que se separan desde un neutro central.

Una técnica muy eficaz es el color de foco: todo en gris y solo la serie protagonista en el color de marca. El ojo va directo a ella, y el resto aporta contexto sin competir.

Para elegir paletas fiables, ColorBrewer, creado por la cartógrafa Cynthia Brewer, sigue siendo una referencia, y la paleta de Okabe e Ito está diseñada específicamente para distinguirse con los tipos de daltonismo más comunes, que afectan a alrededor del 8 % de los hombres de origen europeo.

04Gráficos honestos: cuando la forma cambia el mensaje

Casi nadie diseña un gráfico para engañar, pero algunas decisiones técnicas cambian lo que la gente entiende. Estas son las situaciones que revisamos siempre, con lo que funciona en cada una:

• →Dos ejes verticales. Un gráfico con dos escalas distintas a izquierda y derecha permite que cualquier par de líneas parezca relacionado, porque basta con ajustar las escalas para que se crucen donde se quiera. Lo que funciona es mostrar dos gráficos pequeños alineados en el mismo eje temporal, uno encima del otro.
• →Mapas con valores absolutos. Un mapa de provincias coloreado por número de clientes suele reproducir simplemente el mapa de población. Lo que funciona es usar valores relativos (clientes por cada mil habitantes) o símbolos proporcionales en lugar de rellenos.
• →Acumulados que siempre suben. Una línea de ventas acumuladas crece aunque el negocio vaya peor cada mes. Si la pregunta es el ritmo, lo que funciona es mostrar el valor de cada periodo.
• →Porcentajes sin base. «Las reservas por WhatsApp crecen un 200 %» puede significar pasar de dos a seis. Lo que funciona es acompañar el porcentaje del valor absoluto, al menos en la etiqueta o la nota.
• →Periodos elegidos a medida. Empezar la serie justo en el punto más bajo exagera cualquier recuperación. Lo que funciona es mostrar un periodo completo y comparable (el año, los últimos doce meses) y marcar los hechos relevantes con anotaciones.
• →Medias que esconden. Un tiempo medio de entrega de tres días puede esconder un 20 % de pedidos que tardan diez. Cuando la dispersión importa, un histograma cuenta lo que la media calla.

La regla de fondo es sencilla: la impresión que deja el gráfico a primera vista debería coincidir con la conclusión que sacaría alguien que mirase los números con calma.

05Gráficos accesibles

Un gráfico es contenido, y WCAG 2.2 se aplica a él igual que al texto. Los puntos principales:

• →Color no como única pista (criterio 1.4.1). Etiquetas directas, marcadores con formas distintas o patrones en las barras.
• →Contraste de elementos gráficos (criterio 1.4.11). Las líneas, barras y marcadores necesarios para entender el gráfico deberían tener al menos 3:1 frente al fondo, y los textos, 4,5:1.
• →Alternativa textual (criterio 1.1.1). Un resumen breve de la conclusión y, cuando sea posible, la tabla de datos accesible junto al gráfico, desplegable si molesta visualmente.
• →Interacción con teclado. Si el gráfico tiene información emergente al pasar el ratón, que también aparezca al navegar con el tabulador o que esté disponible de otra forma.
• →Tamaño de texto. Etiquetas de al menos 12 px en pantalla, mejor 13–14 px, y que escalen si la persona aumenta el tamaño de letra.

Si el gráfico es una imagen, el texto alternativo describe la conclusión, no la forma: «Las ventas crecieron un 40 % entre marzo y junio y se estabilizaron en verano», mejor que «gráfico de líneas azul».

06Gráficos en interfaces y en móvil

Dentro de un producto digital, los gráficos tienen retos propios.

• →Responsive real. Un gráfico de líneas con doce meses en escritorio puede mostrar seis en móvil, o girar a barras horizontales. Reducirlo proporcionalmente casi nunca funciona: las etiquetas se vuelven ilegibles.
• →Información al tocar. En móvil no hay hover; el detalle aparece al tocar un punto y se cierra al tocar fuera, con áreas táctiles generosas.
• →Estados. Cargando, sin datos («Aún no hay ventas este mes»), error y datos parciales, igual que cualquier otro componente.
• →Modo oscuro. Las paletas se revisan por separado; un color que contrasta bien sobre blanco puede quedar demasiado brillante o apagado sobre fondo oscuro.
• →Rendimiento. Para miles de puntos, librerías que dibujan en canvas o WebGL en lugar de SVG mantienen la fluidez.

Cuando los gráficos se combinan con listados de datos, conviene que la tabla siga las mismas reglas de claridad; en la guía de tablas de datos en UI tienes los criterios de alineación y densidad.

Herramientas según el caso

• →Gráficos editoriales para web o informes, sin programar: Datawrapper y Flourish, con buenas opciones de accesibilidad y responsive.
• →Gráficos dentro de una aplicación: Chart.js para lo habitual, Apache ECharts cuando hay muchos datos o interacciones avanzadas, Recharts o Nivo en proyectos React.
• →Visualizaciones a medida: Observable Plot para explorar rápido con una gramática sencilla, D3 cuando se necesita control total.
• →Análisis y cuadros de mando internos: Looker Studio, Power BI o Metabase, con una plantilla visual coherente con la marca.

07Ejemplo resuelto: del gráfico de tarta a la respuesta

Volvamos al informe de las clínicas. Una de las páginas originales mostraba una tarta en 3D con nueve porciones: el origen de los pacientes nuevos por canal.

1. 01Pregunta. ¿Qué canales traen más pacientes nuevos y cuál ha crecido?
2. 02Tipo. Comparación entre categorías más cambio en el tiempo: barras horizontales ordenadas con el valor del trimestre anterior como marca.
3. 03Simplificación. Los cuatro canales más pequeños, agrupados en «Otros».
4. 04Color. Todo en gris salvo el canal que más había crecido, en el color de la marca.
5. 05Título. «Google Maps ya trae uno de cada tres pacientes nuevos».
6. 06Etiquetas. Valor y porcentaje al final de cada barra; sin eje ni leyenda.
7. 07Accesibilidad. Resumen en texto bajo el gráfico y tabla desplegable con las cifras exactas.

Los directores pasaron de preguntar «¿qué estoy mirando?» a preguntar «¿qué hacemos con esto?». Esa es la mejor señal de que un gráfico funciona.

En SIMA diseñamos visualizaciones para webs, informes y productos digitales dentro del diseño web y de experiencia digital, siempre con la pregunta del negocio por delante. Si tienes datos que merecen contarse mejor, escríbenos y les damos forma.