Ir al contenido
  1. Cursos/
  2. Visualización de Información/

Colores e Ilusiones

·16 mins

A través del curso hemos visto que los colores expresan atributos a través de los canales. En la unidad de codificación visual definimos que el tono, la saturación y la luminosidad de los colores se utilizan para codificar valores cuantitativos o categóricos.

Solemos ser testigues del uso del color como expresi√≥n. Sin ir m√°s lejos, la artista chilena Matilde P√©rez, fallecida el a√Īo 2014, destac√≥ por su uso de las formas geom√©tricas y los colores como expresi√≥n de movimiento. Muchas de sus obras podr√≠an ser visualizaciones de datos (quiz√°s lo son, pero nunca lo sabremos):

“Sin t√≠tulo”, Matilde P√©rez.
Sin título, Matilde Pérez.

La obra de Matilde P√©rez que he mostrado podr√≠a ser una visualizaci√≥n, una atractiva ciertamente. Si utiliz√°semos un criterio est√©tico y expresivo (en un sentido art√≠stico) har√≠amos visualizaciones hermosas, sin embargo corremos el riesgo de no respetar los principios de eficiencia y coherencia. As√≠, en esta unidad discutiremos brevemente c√≥mo interpretamos la informaci√≥n, principalmente a trav√©s del color y de las formas geom√©tricas. Tambi√©n veremos ejemplos de como nuestra mente interpreta fen√≥menos o cambios en las im√°genes que realmente no est√°n all√≠. El uso de colores y formas geom√©tricas en visualizaci√≥n requiere que pensemos en qui√©n har√° uso de nuestras visualizaciones, que, como vimos en la unidad introductoria, es otra persona. Quien dise√Īa visualizaciones debe tener en cuenta que al otro lado del medio en el que publicamos las personas pueden ver algo distinto de lo que vemos nosotros.

Ejemplos de Uso de color #

Hasta ahora hemos utilizado el color de dos maneras: para codificar atributos categóricos y para codificar atributos cuantitativos. Un ejemplo de uso categórico es la siguiente scatterplot_matrix donde se utiliza el canal de tono para sobreponer distintas categorías en cada gráfico de la matriz:

Utilizando colores para diferenciar categorías dentro del mismo gráfico. Fuente: <code>seaborn</code>
Utilizando colores para diferenciar categorías dentro del mismo gráfico. Fuente: seaborn.

Este uso de los tonos es t√≠pico y adecuado. Usualmente quien dise√Īa la visualizaci√≥n elige colores cuyos tonos se distingan f√°cilmente. En otras ocasiones, el color elegido para cada categor√≠a se relaciona con la sem√°ntica de lo que es visualizado, como en este ejemplo de la visualizaci√≥n circle_packing aplicada a datos de Pok√©mon:

Estos son los √ļnicos Pok√©mon que reconozco, la primera generaci√≥n. Fuente: @DataToViz
Estos son los √ļnicos Pok√©mon que reconozco, la primera generaci√≥n. Fuente: @DataToViz.

También es posible que los colores estén relacionados con el mensaje que se está entregando. Esta visualización del New York Times muestra el espectro político en Estados Unidos con colores distintos a sus típicos azul y rojo (para representar a demócratas y republicanes):

Los verdaderos colores políticos de Estados Unidos. Fuente: New York Times.
Los verdaderos colores políticos de Estados Unidos. Fuente: New York Times.

Este normalized_stacked_area_chart utiliza los colores de la superficie asociados a cada candidate presidencial. Gris es asfalto y cemento (ciudad), verde son bosques, azul es agua, etc. Se refiere a la división urbana/rural en las votaciones en Estados Unidos. Un uso novedoso y potente del color, no solo como canal de codificación visual, sino también de expresión de un mensaje.

Respecto al uso cuantitativo del color, de colores secuencial, es decir, aquellos donde la saturaci√≥n o la luminosidad var√≠an. La siguiente visualizaci√≥n que muestra la poblaci√≥n de una ciudad en 3D utiliza una paleta de colores secuencial para representar la cantidad de poblaci√≥n en un espacio de la ciudad, en este caso, Santiago entre los a√Īos 1975 y 2015:

Uso de paleta de colores secuencial para codificar atributos cuantitativos. Fuente: Population Mountains
Uso de paleta de colores secuencial para codificar atributos cuantitativos. Fuente: Population Mountains.

Los mapas que hemos observado hasta ahora han sido bidimensionales. Si viésemos este mapa desde arriba, veríamos una grilla de cuadrados coloreados que nos permitirían entender la distribución geográfica de la población. Al ser un mapa tridimensional, donde hay barras con volumen en vez de celdas cuadradas, cuya altura codifica la cantidad de población, el color es un canal redundante puesto que expresa el mismo atributo. Sin embargo, es justamente esta redundancia la que permite entender la visualización, al proveer legibilidad a lo 3D, y, al mismo tiempo, le otorga atractivo estético.

El tono puede variar en una paleta que codifique colores secuenciales. Un ejemplo de uso estas paletas es el normalized_stacked_area_chart de El Lenguaje de la Ciencia, una visualizaci√≥n que muestra la evoluci√≥n del lenguaje empleado en los art√≠culos de la revista Scientific American. Cada √°rea en el gr√°fico representa la importancia de una palabra en cada a√Īo de publicaci√≥n de la revista, considerando solamente las 1000 palabras m√°s frecuentes. El orden de las √°reas y el color de √©stas codifican el a√Īo en que la palabra correspondiente tuvo su mayor frecuencia. Se ve as√≠:

The Language of Science. Fuente: Scientific American.
The Language of Science. Fuente: Scientific American.

El ejemplo presenta un buen uso de los cambios de tono. Mi hip√≥tesis sobre el uso de una paleta basada en tonos m√°s que en saturaci√≥n y luminosidad es que se buscaba mostrar la variaci√≥n temporal sin implicar que unos a√Īos fuesen m√°s importantes que otros, una interpretaci√≥n com√ļn en las paletas de colores secuenciales. Sin embargo, es un desaf√≠o usar bien los tonos o matices de esta manera — un buen punto de partida son las paletas de colores secuenciales y perceptualmente uniformes, es decir, cuyas variaciones de tono en la paleta son constantes. En contraste, en una paleta de colores categ√≥rica se busca que los tonos sean diferentes, pero no tienen por qu√© ser igualmente distintos entre s√≠.

Finalmente, recordemos que un atributo cuantitativo tambi√©n puede ser divergente o bidireccional. En estos casos se suelen utilizar paletas de colores que mezclan dos paletas secuenciales, una para direcci√≥n de divergencia, partiendo de un punto central com√ļn. Como ejemplo veremos una visualizaci√≥n que ha tenido impacto en los √ļltimos a√Īos, llamada Warming Stripes. Esta visualizaci√≥n muestra la evoluci√≥n de la temperatura promedio de un lugar (donde lugar puede ser el planeta, un continente, un pa√≠s, una ciudad, etc.). Cada a√Īo se muestra como una marca rectangular (o una barra de tama√Īo constante), y el canal de color codifica su divergencia desde el promedio de todos los a√Īos. Pueden construir esta visualizaci√≥n para cualquier pa√≠s del mundo en el sitio #ShowYourStripes. A continuaci√≥n, el de Chile:

Evolución de temperatura promedio en Chile. Fuente: ShowYourStripes de Ed Hawkins con datos de Berkeley Earth.
Evolución de temperatura promedio en Chile. Fuente: ShowYourStripes de Ed Hawkins con datos de Berkeley Earth.

Las dos paletas secuenciales se basan en rojo (valores positivos, sobre el promedio) y azul (valores negativos, bajo el promedio). Un rojo m√°s saturado implica mayor distancia desde el promedio, lo mismo un azul m√°s saturado. El punto central es un gris donde ambos colores presentan ausencia de saturaci√≥n. Estas visualizaciones tienden a mostrar una agrupaci√≥n de colores azules a la izquierda y de colores rojos a la derecha, cuya saturaci√≥n nos comunica la tendencia de aumento de temperaturas en las √ļltimas d√©cadas. Esta visualizaci√≥n ha sido portada de revistas (The Economist, por ej.), ha sido pintada en murales, hay personas que la utilizan de fondo de pantalla o de sus perfiles de redes sociales, o incluso han creado ropa u objetos inspirados en ella. Warming Stripes muestra que una buena visualizaci√≥n responde una pregunta espec√≠fica y relevante utilizando una codificaci√≥n visual adecuada para ello. No se necesita complejidad para causar impacto.

Espacios de Color y Paletas de Colores #

Las definiciones de paletas de colores secuenciales, divergentes y categóricas se basan en como interpretamos la composición de los colores. Eso significa que existe una manera de representar un color que permite comparar y operar con sus componentes, de modo que podamos cuantificar esos tres aspectos. Un espacio de color se define como la manera de formalizar esos conceptos a través de la organización matemática de los colores. Así, podemos representar un color de acuerdo a un espacio específico.

Nuestra biolog√≠a nos da una primera aproximaci√≥n de lo que es un espacio de color. Nuestros ojos tienen dos tipos de c√©lulas fotorreceptoras, los bastones y los conos. Estos √ļltimos son los encargados de aportar la informaci√≥n del color, y hay de tres tipos: rojo (R), verde (G) y azul (B). As√≠, el espacio de color RGB define un espacio c√ļbico en el cual cada color es la suma ponderada de los tres colores primarios.

Espacio de color RGB. Fuente: Wikipedia.
Espacio de color RGB. Fuente: Wikipedia.

RGB es el modelo de color más usado. Los colores de las páginas web se expresan usualmente en este espacio. En matplotlib también se usa RGB. Cuando se escoge un color en un programa, usualmente vemos las componentes RGB como opción por omisión.

Lamentablemente, a pesar de que nuestra biolog√≠a funciona en RGB, no pensamos en RGB. ¬ŅAlguna vez han descrito un color como “una mezcla de azul y verde”?¬ŅO m√°s bien han dicho algo “este morado intenso pero no muy oscuro”? Este tipo de descripciones, que son intuitivas para nosotros, son posibles de expresar en espacios de colores. Uno de ellos es conocido como HSL, que proviene de las siglas hue (tono o matiz), saturation (saturaci√≥n) y lightness (luminosidad). De acuerdo a Wikipedia, “el modelo HSL se representa gr√°ficamente como un cono doble. Los dos v√©rtices en el modelo HSL se corresponden con el blanco y el negro, el √°ngulo se corresponde con el matiz, la distancia al eje con la saturaci√≥n y la distancia al eje blanco-negro se corresponde a la luminancia,” como se ve a continuaci√≥n:

Espacio de color <code>HSL</code>. Fuente: Wikipedia.
Espacio de color HSL. Fuente: Wikipedia.

Las componentes de este espacio de color (sus canales) se relacionan directamente con los principios de efectividad y coherencia:

  • ¬Ņqu√©? ¬Ņd√≥nde? => categor√≠as: matiz o tono (hue).
  • ¬Ņcu√°nto?¬Ņc√≥mo? => atributos cuantitativos: luminancia, saturaci√≥n.

En contraste, los tres canales RGB no se relacionan con estos principios.

Teniendo en consideración la especificación colores de acuerdo a su posición en estos espacios, podemos definir lo que es una paleta de colores o colormap (de allí los nombres de los parámetros cmap y palette en los métodos de matplotlib y seaborn). Hemos usado el término en las unidades anteriores y ésta de manera indiscriminada, con el supuesto de que nos referimos a un conjunto de colores que, a través de los canales de la visualización, utilizamos para expresar atributos en las marcas. Como base, partiendo de un tono específico, podemos definir estos colormaps a través de variaciones en cada uno de los canales:

Paletas de colores donde var√≠a un √ļnico canal. Fuente: Visualization Analysis &amp; Design.
Paletas de colores donde var√≠a un √ļnico canal. Fuente: Visualization Analysis & Design.

Existen muchas estrategias para construir paletas de colores utilizando las variaciones de los canales. Eso nos permite construir paletas para atributos binarios, paletas divergentes, paletas bivariable, que permiten expresar relaciones entre dos atributos, incluso considerando atributos cuantitativos y categóricos al mismo tiempo:

Estrategias de construcción de paletas de colores. Fuente: Visualization Analysis &amp; Design, basado en trabajo de Cynthia Brewer.
Estrategias de construcción de paletas de colores. Fuente: Visualization Analysis & Design, basado en trabajo de Cynthia Brewer.

Ahora bien, al construir estas paletas m√°s complejas debemos tener en cuenta no solo los principios de efectividad y coherencia, sino tambi√©n la legibilidad y discriminabilidad de los colores. Por ejemplo, ¬ŅEstamos utilizando marcas de tama√Īo variable? El tama√Īo de las marcas (por ejemplo, las √°reas en un choropleth_map) afecta la percepci√≥n de color, particularmente la saturaci√≥n: regiones peque√Īas se ven m√°s saturadas, regiones grandes se ven menos saturadas en comparaci√≥n a sus regiones vecinas. ¬ŅCu√°ntas categor√≠as podemos mostrar? La discriminabilidad de los colores var√≠a de acuerdo al contexto. En el siguiente gr√°fico de una publicaci√≥n cient√≠fica observamos que la distribuci√≥n de los colores en el genoma de humanos y ratas no deja claro cu√°ntos genes estamos analizando:

Discriminabilidad varía de acuerdo al contexto. Fuente: Sinha and Meller, Cinteny: flexible analysis and visualization of synteny and genome rearrangements in multiple organisms.
Discriminabilidad varía de acuerdo al contexto. Fuente: Sinha and Meller, Cinteny: flexible analysis and visualization of synteny and genome rearrangements in multiple organisms.

Una cantidad máxima aceptable de categorías cae entre 6 y 12. Más se vuelve imposible de percibir.

Construir paletas de colores categóricas basadas en tonos no es fácil. El investigador Martin Krzywinski nos advierte sobre el cuidado que debemos tener a la hora de elegir tonos. Por ejemplo, un azul y un amarillo que tengan los mismos valores de saturación y luminosidad son percibidos de manera distinta:

Azul y amarillo &mdash; un color predomina m√°s. Fuente: Martin Krzywinski.
Azul y amarillo — un color predomina m√°s. Fuente: Martin Krzywinski.

Observamos que el amarillo predomina. Eso significa que, ante la presencia de otros colores, tendemos a darle mayor importancia a las marcas que tienen ese color, como vemos en el siguiente ejemplo, que contiene un gráfico publicado en un paper, y una modificación que busca utilizar colores sin predominancia:

Propuesta de colores sin predominancia, modificación de un gráfico publicado en un artículo científico. Fuente: Martin Krzywinski.
Propuesta de colores sin predominancia, modificación de un gráfico publicado en un artículo científico. Fuente: Martin Krzywinski.

Afortunadamente existen buenas paletas de colores para estas situaciones, as√≠ como herramientas que nos facilitan elegirlas y configurarlas. El sitio Color Brewer nos permite explorar paletas de colores para m√ļltiples escenarios, con caracter√≠sticas √≥ptimas de predominancia y respetando los principios de efectividad y coherencia, m√°s previsualizaci√≥n para saber como luce cada paleta:

Imagen del sitio Color Brewer.
Imagen del sitio Color Brewer.

Esta herramienta permite construir paletas que tambi√©n sean compatibles con impresi√≥n y ceguera de colores. Este √ļltimo tema lo veremos m√°s adelante en esta unidad.

Usando la Transparencia: Value-by-Alpha #

La transparencia es √ļtil para crear capas de elementos y efectos visuales, pero interfiere con la luminosidad y la saturaci√≥n, as√≠ que debe ser usada con cuidado. Una t√©cnica que hace buen uso de ella es value_by_alpha_map, una extensi√≥n del choropleth_map que a√Īade el canal de transparencia a cada √°rea. En este ejemplo, la transparencia codifica la certidumbre que se tiene sobre la mortalidad del c√°ncer de c√©rvix en los Estados Unidos:

Mapa de Coropletas tipo value-by-alpha. Fuente: Andy Woordruff.
Mapa de Coropletas tipo value-by-alpha. Fuente: Andy Woordruff.

¬ŅLes parece un mapa f√°cil de interpretar? En ocasiones puede ser m√°s eficiente tener un color para representar √°reas con datos que no son confiables. Eso permitir√≠a poner la atenci√≥n en las √°reas donde los datos s√≠ permiten el an√°lisis.

Arcoiris ūüĆą es una Mala Opci√≥n #

La paleta de colores de arcoiris ūüĆą tiene m√ļltiples nombres, dependiendo de la plataforma en la que se utilice. Los m√°s comunes son rainbow y jet. Esta paleta es utilizada frecuentemente para todo tipo de tareas. No se puede negar que evoca familiaridad, sin embargo, presenta muchos problemas de percepci√≥n. Veamos el siguiente ejemplo, cortes√≠a de Google AI:

Izquierda: mapa de profundidad con una paleta secuencial monocrom√°tica. Derecha: mapa de profundidad con paleta conocida como jet o rainbow. Fuente: Google AI
Izquierda: mapa de profundidad con una paleta secuencial monocrom√°tica. Derecha: mapa de profundidad con paleta conocida como jet o rainbow. Fuente: Google AI.

Observamos que los colores no tienen orden en ninguno de los canales (tono o matiz, luminosidad, saturación) y que los cambios de un tono a otro no son lineales. Este mapa de colores puede mostrar una estructura fina en los datos, pero también introduce artefactos que pueden interpretarse como estructurales, cuando solamente son una característica de la paleta elegida. Puede servir para datos categóricos, pero hay mejores, puesto que utiliza colores que tienen predominancia. El siguiente choropleth_map ilustra como su uso categórico también puede introducir artefactos estructurales:

Mapa de coropletas utilizando una escala de colores de arcoiris. Fuente: EagerEyes.
Mapa de coropletas utilizando una escala de colores de arcoiris. Fuente: EagerEyes.

Pareciera que el país se divide en dos, sin embargo, los cambios bruscos de tonalidad no representan lo que realmente sucede: como vemos en la leyenda, hay una transición suave entre los valores de cada categoría.

¬ŅCeguera a los Colores? #

Hasta ahora hemos discutido aspectos técnicos del uso de color. Sin embargo, también hay un aspecto humano que no podemos ignorar: la ceguera a los colores (color blindness en inglés). Esta condición, en la que una persona no percibe todos los colores, es más frecuente y compleja de lo que se puede creer. En términos de frecuencia, el 8% de los hombres y el 0.4% de las mujeres no ve todos los colores que pueden percibir las personas. En términos de complejidad, usualmente se confunde daltonismo con la ceguera a los colores, pero existen más condiciones dentro de esta categoría. Una persona con ceguera a los colores ve de la siguiente manera:

Ejemplos de como distintos tipos de ceguera a los colores afectan la percepción. Fuente: Martin Krzywinski.
Ejemplos de como distintos tipos de ceguera a los colores afectan la percepción. Fuente: Martin Krzywinski.

A continuación vemos una animación de algunas de las paletas de colores disponibles en matplotlib:

Animación de mapas de colores en <code>matplotlib</code> de acuerdo a como los ve una persona: sin ceguera a los colores; con ceguera del color verde (deuteranopia); ceguera del color rojo (protanopia); ceguera del color azul (tritanopia); y en blanco y negro.
Animación de mapas de colores en matplotlib de acuerdo a como los ve una persona: sin ceguera a los colores; con ceguera del color verde (deuteranopia); ceguera del color rojo (protanopia); ceguera del color azul (tritanopia); y en blanco y negro.

Si tienes que presentar una visualizaci√≥n a una audiencia es probable que hayan personas con alg√ļn grado de ceguera a los colores. Una visualizaci√≥n que utiliza paletas aptas para todes ampl√≠a la accesibilidad de tu trabajo y no perjudica la aplicaci√≥n de los principios de efectividad y coherencia.

Ilusiones #

Incluso si ves todos los colores, puede que las cosas no sean como crees que son. En la siguiente imagen, ¬Ņcu√°l es el color de las frutillas?

¬ŅCu√°l es el color de las frutillas? Fuente: @AkiyoshiKitaoka.
¬ŅCu√°l es el color de las frutillas? Fuente: @AkiyoshiKitaoka.

Vemos que las frutillas son de un color rojizo. Sin embargo, si utilizamos un programa para ver cu√°l es el color exacto, veremos que en realidad son grises:

Las frutillas eran grises (en la imagen). Fuente: @AkiyoshiKitaoka.
Las frutillas eran grises (en la imagen). Fuente: @AkiyoshiKitaoka.

¬ŅCu√°nto de lo que vemos est√° influenciado por lo que esperamos ver? Es una pregunta que debemos hacernos a la hora de dise√Īar una visualizaci√≥n. Hay que tener cuidado con los contextos y con la manera de percibir de nuestra mente. Los contextos son importantes puesto que determinan lo que observamos. La siguiente imagen nos muestra un tablero de ajedrez, en el que nos preguntamos si los colores A y B son iguales:

¬ŅSon A y B iguales?. Fuente: Edward H. Adelson.
¬ŅSon A y B iguales?. Fuente: Edward H. Adelson.

Aunque vemos que la celda A es más oscura que B, basta trazar una línea gruesa entre ambas celdas para darnos cuenta de nuestro error de percepción:

A y B son iguales. Fuente: Edward H. Adelson.
A y B son iguales. Fuente: Edward H. Adelson.

Esto se debe a que percibimos en términos relativos al contexto de la imagen.

Para ejemplificar este fen√≥meno en un escenario cotidiano, hace algunos a√Īos se hizo viral el meme del vestido que preguntaba si un vestido en una foto era azul y negro o blanco y amarillo. La gente no parec√≠a ponerse de acuerdo porque cada persona ve√≠a el vestido de una manera, pero ambas respuestas eran correctas. A continuaci√≥n un ejemplo de ese fen√≥meno:

¬ŅEl vestido es azul y negro o blanco y amarillo? La respuesta: ambas. Fuente: an√≥nima.
¬ŅEl vestido es azul y negro o blanco y amarillo? La respuesta: ambas. Fuente: an√≥nima.

El contexto que rodea al vestido, la disposición de receptores en nuestros ojos, las condiciones de iluminación, es decir, todo el contexto que rodea a la imagen es el que incide en como lo percibimos.

Conclusiones #

En esta unidad vimos como los colores pueden ser un medio de expresi√≥n que incluye los atributos de nuestros datos, pero que puede incluir otros aspectos relacionados con el mensaje que queremos comunicar. Aprendimos que los colores se pueden posicionar formalmente en un espacio de colores y que se pueden construir paletas o conjuntos de colores en base a estos espacios. No todas las paletas son igual de eficientes y coherentes para lo que visualicemos, pero hay estrategias y herramientas que nos ayudar√°n a elegir y probar. Ahora bien, el contexto t√©cnico es importante, pero nunca debemos olvidar que nuestra visualizaci√≥n ser√° utilizada por otras personas. As√≠, si no tenemos en cuenta c√≥mo los dem√°s perciben lo que estamos visualizando, podemos inducir errores en la interpretaci√≥n de los resultados. Al ser un curso introductorio no profundizamos en c√≥mo percibimos informaci√≥n, pero el siguiente paso en un curso m√°s avanzado ser√≠a entender la percepci√≥n visual. Asimismo, existen factores culturales que inciden en la interpretaci√≥n y percepci√≥n del color que tampoco revisamos. Sin embargo, estamos en posici√≥n de concluir que quien dise√Īa visualizaciones debe tener en cuenta que las personas pueden ver algo distinto de lo que esperamos que vean, sea por motivos biol√≥gicos como la ceguera a los colores o contextuales propios o externos a la visualizaci√≥n.