# Visualización de Datos y Teoría del Color Semestre 02, 2026 ## Por Qué se Grafica ### El cuarteto de Anscombe ![Cuarteto de Anscombe](/courses/2026/2/cc3084/assets/dv-anscombe.png) Los cuatro conjuntos comparten la misma media en x, la misma media en y, la misma varianza, la misma correlación de 0.816 y la misma recta de regresión. Graficados, no se parecen en nada. #### Conjunto I, relación lineal ![Conjunto I](/courses/2026/2/cc3084/assets/dv-anscombe-1.png) Los puntos se dispersan alrededor de la recta sin una forma sistemática. Es el único de los cuatro donde la regresión lineal describe lo que realmente ocurre. #### Conjunto II, una curva ![Conjunto II](/courses/2026/2/cc3084/assets/dv-anscombe-2.png) La relación existe, pero es curva. La recta pasa por el medio y reporta la misma correlación, aunque ningún tramo de los datos se comporte como ella. #### Conjunto III, un valor atípico ![Conjunto III](/courses/2026/2/cc3084/assets/dv-anscombe-3.png) Diez puntos caen sobre una recta perfecta y el undécimo está lejos. Ese único punto tuerce la pendiente y arrastra la recta fuera de la tendencia real. #### Conjunto IV, sin relación ![Conjunto IV](/courses/2026/2/cc3084/assets/dv-anscombe-4.png) Todas las observaciones comparten el mismo valor de x salvo una. No hay relación que estimar, y ese punto solitario fabrica la correlación completa. La conclusión es que los estadísticos resumen y, al resumir, descartan. Graficar antes de modelar es una verificación, no un adorno. ### Dos propósitos distintos * Visualización exploratoria: dirigida al analista, rápida, desechable y abundante. Sirve para formular preguntas. * Visualización explicativa: dirigida a una audiencia, cuidada, editada y única. Sirve para responder una pregunta ya resuelta. Los ejemplos de esta lección corresponden al segundo caso, donde cada decisión de diseño tiene consecuencias sobre lo que la audiencia entiende. ## Tres Principios Son los únicos tres principios teóricos necesarios para justificar todas las correcciones que siguen. ### Jerarquía de canales Cleveland y McGill midieron en 1984 la precisión con que las personas estiman magnitudes según el canal visual empleado. ![Jerarquía de canales](/courses/2026/2/cc3084/assets/dv-jerarquia.png) La figura codifica el mismo par de valores en los siete canales. De arriba hacia abajo, estimar cuánto más grande es el naranja que el azul se vuelve progresivamente más difícil. El orden resultante, de mayor a menor precisión, es el siguiente. 1. Posición sobre una escala común 2. Posición sobre escalas no alineadas 3. Longitud 4. Ángulo y pendiente 5. Área 6. Volumen 7. Luminosidad y saturación La regla práctica es asignar la variable más importante al canal más alto disponible. ### Canales de magnitud y de identidad * Canales de magnitud: posición, longitud, área y luminosidad. Responden cuánto. * Canales de identidad: matiz, forma y textura. Responden qué es. El matiz no sirve para representar cantidad y la posición no sirve para representar categoría. ### Tres tipos de paleta ![Tipos de paleta](/courses/2026/2/cc3084/assets/dv-tipos-paleta.png) * Secuencial: datos ordenados que van de poco a mucho, sin punto medio. La luminosidad crece de forma monótona. * Divergente: datos ordenados con un centro significativo. Dos matices que se encuentran en un neutro. * Cualitativa: categorías sin orden. Matices distintos con luminosidad semejante, hasta seis. Elegir el tipo equivocado es el error de color más frecuente y el más caro. ## Ejemplo 1: Gráfico de Pastel ### Problema ![Pastel](/courses/2026/2/cc3084/assets/dv-pastel-mal.png) Las seis porciones miden entre 13.8 y 19.0 por ciento. La pregunta de la audiencia es cuál es el mayor y por cuánto, y el pastel la obliga a comparar ángulos casi iguales, que es el cuarto canal de la jerarquía. ### Corrección ![Barras](/courses/2026/2/cc3084/assets/dv-pastel-bien.png) Las barras ordenadas codifican en longitud sobre una línea base común, que es el canal más preciso disponible. El orden por valor responde la pregunta sin que el ojo tenga que trabajar, y la etiqueta de valor elimina la necesidad de estimar. El pastel es defendible en un solo caso, que es mostrar dos o tres porciones muy desiguales donde el mensaje es la proporción respecto al total. ## Ejemplo 2: Eje Truncado ### Problema ![Eje truncado](/courses/2026/2/cc3084/assets/dv-eje-mal.png) La región Oriente parece tener una fracción de la cobertura de Central. El eje empieza en 94, así que una diferencia real de 2.2 puntos porcentuales ocupa casi toda la altura del gráfico. Una barra se lee de forma preatentiva como una razón respecto al cero. Al truncar el eje, la longitud deja de ser proporcional al valor y el gráfico miente aunque todos los números sean correctos. ### Corrección ![Eje desde cero](/courses/2026/2/cc3084/assets/dv-eje-bien.png) Con el eje desde cero, la longitud vuelve a ser proporcional al dato y se ve lo que realmente ocurre, que es que las cinco regiones son prácticamente iguales. Si la diferencia pequeña es el punto del análisis, la salida no es truncar el eje sino cambiar de gráfico. Un gráfico de puntos o un gráfico de la diferencia respecto al promedio no arrastran la expectativa del cero. ## Ejemplo 3: Doble Eje Vertical ### Problema ![Doble eje](/courses/2026/2/cc3084/assets/dv-doble-eje-mal.png) Las dos curvas parecen moverse juntas y el título propone una relación causal. El efecto se produjo eligiendo los límites de cada eje, con las ventas de 110 a 215 y la temperatura de 18.9 a 23.1. Con un doble eje se puede fabricar casi cualquier grado de acuerdo aparente entre dos series, porque las escalas son dos decisiones libres del autor. ### Corrección ![Paneles separados](/courses/2026/2/cc3084/assets/dv-doble-eje-bien.png) Dos paneles apilados que comparten el eje horizontal y empiezan cada uno en cero. La magnitud de cada serie queda visible, la comparación sigue siendo posible y ninguna escala se eligió para producir un efecto. Cuando el objetivo es realmente comparar la forma de dos series con unidades distintas, la alternativa honesta es graficar ambas como índice respecto a un período base. ## Ejemplo 4: Chartjunk ### Problema ![Chartjunk](/courses/2026/2/cc3084/assets/dv-chartjunk-mal.png) El fondo gris, la rejilla doble, el relleno con tramado, los marcadores con borde negro, el marco grueso, la sombra de la leyenda y el título redundante compiten con los datos. La razón tinta-datos de Tufte es la proporción de la tinta que representa información, y aquí es mínima. ### Corrección ![Gráfico limpio](/courses/2026/2/cc3084/assets/dv-chartjunk-bien.png) Fondo blanco, sin marco superior ni derecho, rejilla horizontal tenue y etiquetas directas al final de cada línea en lugar de leyenda. El ojo ya no tiene que saltar entre la leyenda y las curvas. La simplicidad aquí no es una preferencia estética, es reducción de carga cognitiva. ## Ejemplo 5: Demasiadas Series ### Problema ![Espaguetis](/courses/2026/2/cc3084/assets/dv-espaguetis-mal.png) Doce series con doce colores producen el gráfico de espaguetis. El matiz admite entre cinco y seis categorías antes de volverse ambiguo, y la leyenda de doce entradas obliga a ir y venir entre el texto y las curvas. El problema de fondo es que el gráfico no dice cuál de las doce series importa. ### Corrección ![Serie resaltada](/courses/2026/2/cc3084/assets/dv-espaguetis-bien.png) Las once series de contexto en gris y la serie relevante en color, con etiqueta directa. El contexto sigue presente, pero la jerarquía visual coincide con la jerarquía del mensaje. El gris es un color legítimo y suele ser el correcto para el contexto. Si las doce series importan por igual, la alternativa son pequeños múltiplos, que es el mismo gráfico repetido una vez por serie con ejes compartidos. ## Ejemplo 6: La Paleta Arcoíris ### Problema ![jet](/courses/2026/2/cc3084/assets/dv-jet-mal.png) La paleta jet fue el valor por omisión de muchas herramientas científicas durante décadas. * La luminosidad no crece de forma monótona, así que el ojo no puede ordenar los colores sin consultar la barra de color. * Aparecen bandas falsas en las zonas de cian y amarillo, que se leen como fronteras en los datos. * El par rojo-verde es el que más se confunde en las deficiencias de visión del color. ### Corrección ![viridis](/courses/2026/2/cc3084/assets/dv-jet-bien.png) La paleta viridis es perceptualmente uniforme, es decir que un mismo paso en los datos produce un mismo cambio percibido en el color a lo largo de toda la escala. Su luminosidad crece de forma monótona, así que el orden se lee sin barra de color. Es el valor por omisión de matplotlib desde la versión 2.0. ### La prueba de la escala de grises ![jet y viridis en grises](/courses/2026/2/cc3084/assets/dv-jet-grises.png) Convertidas a escala de grises, jet pierde por completo la estructura y viridis la conserva intacta. Esta prueba toma diez segundos y detecta la mayoría de los problemas de color. ## Ejemplo 7: Paleta Cualitativa sobre Datos Ordenados ### Problema ![Paleta cualitativa](/courses/2026/2/cc3084/assets/dv-orden-mal.png) Los siete rangos de pobreza están ordenados, de 0 a 70 por ciento. La paleta cualitativa asigna un matiz sin relación a cada rango, de modo que el rojo del rango más bajo y el café del más alto no se ordenan entre sí. La información del mapa se vuelve ilegible sin consultar la leyenda en cada celda, y el gradiente real del territorio desaparece. ### Corrección ![Paleta secuencial](/courses/2026/2/cc3084/assets/dv-orden-bien.png) La misma información con una paleta secuencial. La luminosidad creciente codifica el orden, así que el patrón aparece de inmediato y la leyenda solo sirve para poner números a lo que ya se ve. La verificación es responder dos preguntas sobre la variable, que son si tiene orden y si tiene un centro significativo. ## Ejemplo 8: Paleta Divergente Descentrada ### Problema ![Divergente descentrada](/courses/2026/2/cc3084/assets/dv-divergente-mal.png) Los residuales van de −1.5 a 4.5 y la paleta se estiró de extremo a extremo. El blanco de la paleta cayó en 1.5, no en cero. La consecuencia es que una región con residual de 0.8, que es positiva, se ve azul pálida y se lee como negativa. El color contradice al dato. ### Corrección ![Divergente centrada](/courses/2026/2/cc3084/assets/dv-divergente-bien.png) Con el centro fijado en cero y límites simétricos, el blanco marca el cero real y el azul y el rojo significan lo que la audiencia espera. En matplotlib se obtiene con `TwoSlopeNorm(vcenter=0)`, o fijando `vmin` y `vmax` simétricos alrededor del centro. ## Ejemplo 9: Rojo y Verde ### Problema ![Rojo y verde](/courses/2026/2/cc3084/assets/dv-rojoverde-mal.png) El panel izquierdo muestra el gráfico tal como lo ve una persona con visión tricromática. El panel derecho simula la deuteranopía, que es la deficiencia de visión del color más frecuente. Las dos categorías colapsan en el mismo tono oliva y el gráfico deja de comunicar. Alrededor del ocho por ciento de los hombres y del cero punto cinco por ciento de las mujeres de ascendencia europea presenta alguna deficiencia de visión del color, así que en un salón de cien personas varias ven el panel derecho. ### Corrección ![Okabe-Ito](/courses/2026/2/cc3084/assets/dv-rojoverde-bien.png) El azul y el naranja de la paleta Okabe-Ito, diseñada específicamente para deficiencias de visión del color, se mantienen distinguibles en ambos paneles. La regla general es no usar nunca el par rojo-verde como única distinción, y acompañar el color con un segundo canal como forma, patrón o etiqueta directa. ## Ejemplo 10: Luminosidad Constante ### Problema ![Luminosidad constante](/courses/2026/2/cc3084/assets/dv-luminosidad-mal.png) Los cuatro matices se eligieron con la misma luminancia relativa. En color se distinguen; impresos en escala de grises o proyectados en una sala con luz, las cuatro líneas colapsan en el mismo gris. El ojo detecta diferencias de luminosidad con mucha más precisión que diferencias de matiz, así que una paleta que solo varía el matiz desaprovecha el canal más fuerte. ### Corrección ![Luminosidad escalonada](/courses/2026/2/cc3084/assets/dv-luminosidad-bien.png) Cuatro pasos de luminosidad del mismo matiz. La distinción sobrevive la conversión a grises porque descansa en el canal correcto. Conviene recordar que esta solución aplica a series ordenadas. Para categorías sin orden, la paleta debe variar el matiz pero conservando cierta variación de luminosidad, que es exactamente lo que hace Okabe-Ito. ## Lista de Verificación Antes de publicar un gráfico, conviene recorrer estas preguntas. * ¿Cuál es la pregunta que responde el gráfico, y el canal más preciso está asignado a esa variable? * ¿Los ejes de longitud empiezan en cero? * ¿Hay un solo eje vertical? * ¿Se puede borrar algún elemento sin perder información? * ¿Cuántas categorías de color hay, y son seis o menos? * ¿La variable de color tiene orden, y tiene un centro significativo? * ¿El centro de la paleta divergente coincide con el centro real del dato? * ¿El gráfico sobrevive la conversión a escala de grises? * ¿El gráfico sobrevive la simulación de deuteranopía? * ¿El color distingue algo, o solo decora? ## Herramientas ```python import matplotlib.pyplot as plt import seaborn as sns from matplotlib.colors import TwoSlopeNorm # secuencial perceptualmente uniforme plt.imshow(matriz, cmap="viridis") # divergente centrada en cero plt.imshow(residuales, cmap="RdBu_r", norm=TwoSlopeNorm(vcenter=0)) # cualitativa segura para daltonismo okabe_ito = ["#0072B2", "#D55E00", "#009E73", "#CC79A7", "#F0E442", "#56B4E9", "#E69F00", "#000000"] sns.set_palette(okabe_ito) ``` * ColorBrewer: paletas secuenciales, divergentes y cualitativas con filtros de daltonismo e impresión. * Viridis y Scientific Colour Maps: mapas de color con uniformidad perceptual verificada. * Okabe-Ito: paleta cualitativa de ocho colores diseñada para deficiencias de visión del color. * Coblis y Viz Palette: simuladores de daltonismo sobre una imagen o una paleta. * colorspace: construcción y diagnóstico de paletas en el espacio HCL. ## Resumen * Los estadísticos resumidos no describen la estructura de los datos, como demuestra el cuarteto de Anscombe. * La jerarquía de Cleveland y McGill ordena los canales por precisión, y la variable importante va al canal más alto. * Las barras ordenadas superan al pastel porque la longitud sobre una base común vence al ángulo. * Un eje truncado rompe la proporcionalidad de la barra y exagera diferencias pequeñas. * El doble eje vertical permite fabricar el grado de acuerdo aparente que el autor desee. * La razón tinta-datos sube eliminando elementos, no agregándolos. * Doce colores no comunican; una serie en color sobre un fondo gris sí. * La paleta arcoíris no se puede ordenar, inventa bandas y falla en daltonismo y en grises. * El tipo de paleta se deriva del tipo de dato, con secuencial, divergente y cualitativa como únicas opciones. * El centro de una paleta divergente debe coincidir con el centro real del dato. * El par rojo-verde nunca debe ser la única distinción, y el color nunca el único canal. * Las dos pruebas finales son la escala de grises y la simulación de deuteranopía. ## Bibliografía * Cleveland, W. y McGill, R. Graphical Perception. Journal of the American Statistical Association, 1984. * Tufte, E. The Visual Display of Quantitative Information, 1983. * Anscombe, F. Graphs in Statistical Analysis. The American Statistician, 1973. * Wilke, C. Fundamentals of Data Visualization. https://clauswilke.com/dataviz/ * Munzner, T. Visualization Analysis and Design, 2014. * ColorBrewer. https://colorbrewer2.org * Choosing Colormaps in Matplotlib. https://matplotlib.org/stable/users/explain/colors/colormaps.html * Ten Simple Rules to Colorize Biological Data Visualization. https://pmc.ncbi.nlm.nih.gov/articles/PMC7561171/ * Okabe, M. y Ito, K. Color Universal Design. https://jfly.uni-koeln.de/color/ * Scientific Colour Maps. https://www.fabiocrameri.ch/colourmaps/