Viz Palette para Color de visualización de datos

A principios de este mes, Susie Lu y yo lanzamos Viz Palette, una herramienta para ayudar a los diseñadores de visualización de datos a evaluar y mejorar sus paletas. Muestra la paleta en uso en una variedad de tipos de visualización de datos, pero también mide los colores individuales utilizando técnicas que intentan identificar cuándo los colores son demasiado similares entre sí visualmente, pero también cuando los nombres de los colores son demasiado parecidos.

Solía ​​ser un académico, así que cuando comencé a pensar en el color, leí Interaction of Color de Josef Albers, el trabajo seminal sobre el color desde una perspectiva psicológica. Miré a Albers y a algunos otros para ayudarme a entender el color en lugar del enfoque más moderno de la ciencia cognitiva porque no pensaba en el color como un problema técnico para resolver. Implicaba algo más, que en ese momento habría atribuido a "estética" pero que ahora llamaría diseño. Pero encontré pocas reglas que podría aplicar fácilmente a la visualización de datos.

El trabajo de Albers con el color y la forma no tuvo nada que ver con lo que tradicionalmente pensamos como la visualización visual de la información, pero destacó el efecto combinatorio que el color, la posición y la forma tienen entre sí y que debe tenerse en cuenta en cualquier visualización de información que usa el color como codificación.

Las herramientas y las bibliotecas de software constantemente parecen finalmente "resolver" el problema del color. Existen herramientas para generar paletas, para visualizar el espacio de color de sus paletas o mostrar las paletas en uso en las imágenes. Hice referencia a varios de estos en Color Advice for Data Visualization with D3.js. Pero en lugar de resolver el problema de comprender el color, parecía que se convertían en una lista cada vez mayor para copiar cada vez que alguien preguntaba sobre el uso efectivo del color. En promedio, ese copypasta toma la forma de The Color Essay y consiste en poco más que una lista anotada de todas estas herramientas junto con algunas ruedas de color y gráficos que muestran el espectro de luz visible.

Estas listas y ensayos brindan poco material para mejorar activamente su trabajo. Implican que existe una función o herramienta que simplemente resuelve el problema y exime de responsabilidad al diseñador de visualización de datos. Cualquier falla es puramente técnica, más que un resultado de diseño o métodos. Cada herramienta defiende un nuevo espacio de color o una nueva técnica para medir el carácter distintivo, y obtiene un montón de retweets o un premio en una conferencia (dependiendo de su medida de éxito) y luego hace poco más que convertirse en otro ejemplo en esa lista.

Esto se caracteriza por Colorgorical, que promete generar automáticamente una paleta de colores que es distintiva y efectiva para la visualización de datos. Colorgorical se basa en una técnica conocida como Just Notable Diferencia (JND) que mide si un color de un tamaño particular debe ser notablemente diferente a un porcentaje particular de la población. Combina esto con la distinción del nombre del color (si los nombres de los colores son reconocibles y si se superponen) junto con la preferencia de pares para generar automáticamente paletas. Parece que debería haber "resuelto" la generación de paletas, pero en mi experiencia, sus colores seleccionados favorecen el verde que siempre presenta paletas de colores que solo pueden describirse como inspiradas por el vómito. Supongo que su dependencia de los nombres de color de XKCD tiene algo que ver con que los tonos verdes sean naturalmente más distintos.

Una serie de 11 paletas aleatorias generadas por Colorgorical, que mejor podría llamarse Colorgreenical.

Esto no está destinado a destacar Colorgorical, que demuestra algunas buenas áreas de investigación que utilizamos en Viz Palette (JND y nombres de colores). Más bien, el problema es la perspectiva tecnológica optimista del color como algo en lo que no tiene que invertir. El color es solo una molestia y cuando encontramos la herramienta adecuada que lo resuelve para nosotros, podemos continuar con el trabajo real de Visualización de datos.

Eso se debe a que el color es intimidante y ¿a quién no le gustaría que lo maneje una herramienta bien diseñada? Escribí sobre el color en ambas ediciones de D3.js in Action. Sin embargo, todavía me sentía nervioso haciendo declaraciones autorizadas al respecto. Conocía los aspectos técnicos y académicos del color, las interacciones de color gestalt y las normas culturales, pero fue difícil traducir toda esa señal en práctica. Por otro lado, a pesar de que la gente había construido excelentes herramientas como d3-jnd y chroma.js, estos parecían poco más que sistemas expertos para momentos particulares en el proceso de color (como querer aclarar o aclarar o interpolar).

La suma total de reglas concretas que sabía era:

No utilice rampas de color para datos cuantitativos.

Entonces, cuando creamos la paleta Viz, queríamos asegurarnos de que fuera práctica sin ser primitiva. Es por eso que proporciona una vista activa de su paleta en una variedad de diferentes tipos de datos. En ese sentido, Viz Palette se parece a otras herramientas de color relacionadas con la visualización de datos (como el venerable ColorBrewer o Colorgorical de Cynthia Brewer).

Colorgorical (izquierda) muestra áreas, barras y contornos circulares, mientras que ColorBrewer (derecha) se creó para mapas y, naturalmente, muestra un mapa coroplético con la paleta seleccionada.

Ampliando este enfoque, Viz Palette no solo muestra líneas y áreas, sino que muestra diferentes variaciones de estas primitivas gráficas que aparecen en gráficos comunes. Llamamos a esta sección Colores en acción. Toda la visualización de datos se realiza con líneas y áreas rellenas, pero en la práctica las formas creadas se ven afectadas por la posición, los bordes compartidos y otros atributos que se expresan mejor con el ejemplo.

Los colores en acción de Viz Palette, que muestra su paleta en el texto, así como una variedad de tipos de gráficos.

No es suficiente saber que diferentes colores son efectivos como áreas porque hay otros factores en las visualizaciones que usan áreas. Las tablas de violín no se bordean entre sí como las áreas apiladas en una tabla apilada. Las áreas en un diagrama de caja o mapa de árbol no son como las áreas en un gráfico de barras, porque también incluyen líneas que afectan las interacciones de color. Del mismo modo, las líneas en un gráfico de líneas no son las mismas que las líneas en un diagrama de red.

Cada una de estas vistas usa áreas para codificar el mismo conjunto de datos. No es suficiente que sean áreas, es importante si comparten bordes, se posicionan regularmente, codifican magnitud o tienen la posibilidad de influir en la señal que pasa el área que codifica los datos.

No existe una medida confiable de este efecto gestalt y cómo mejora o disminuye la comprensión de los datos en un gráfico. Es posible que no tengamos una buena medida técnica de ese efecto, pero podemos mostrárselo. También damos un cambio simple para examinar cómo esbozar y no esbozar sus áreas y formas puede afectar la percepción. Hicimos esto para asegurarnos de mostrar cómo la forma y el color interactúan en la visualización de datos de formas inesperadas y difíciles de describir con reglas simples. Una paleta de colores que no distingue del todo los colores en un gráfico de violín puede funcionar bien para los gráficos de áreas apiladas debido al efecto de las áreas de color que se bordean entre sí.

Los colores que no se pueden distinguir en áreas separadas siguen siendo distintos entre las áreas que bordean entre sí.

Es por eso que Viz Palette te ayuda a ver los desafíos de color de manera práctica y analítica. Para complementar la visión práctica, el Informe de color le brinda percepción y conflictos de nombres utilizando los mismos enfoques técnicos que mencioné anteriormente (como JND). En lugar de una oscura tabla de espacio de color, resalta los conflictos de color con énfasis en si están lo suficientemente cerca como para causar problemas como líneas, puntos o áreas. Para nombrar los colores, en lugar de confiar en una lista cuestionable de colores generados a través del crowdsourcing, el Informe de colores utiliza una lista personalizada de nombres de colores creados por Susie. La lista XKCD tiene "salmón" y "verde lima" como nombres de color, sin marrones y ninguna de las variaciones "claras" de un nombre de color. Aparentemente, se centró en el color como el tono, pero una razón por la que ve las paletas emparejadas como una opción popular en la visualización de datos es que un lector puede distinguir fácilmente verbalmente entre la línea naranja oscura y la línea naranja clara de una manera que no es tan fácil hacer para distinguir el nodo de color salmón del nodo naranja.

Estoy extremadamente contento con lo bien que funciona Viz Palette, pero para mí el valor real vino al crearlo. Me ayudó a comprender realmente la práctica del color para la visualización de datos, de modo que puedo dar algunas reglas más para el uso del color en la visualización de datos:

Optimiza tu paleta para tu conjunto de datos

No utilice una paleta de 20 colores para un conjunto de datos que solo tiene cuatro categorías. Si se siente intimidado por la construcción de paletas de colores, elija los cuatro colores más reconocibles y fáciles de nombrar y temáticamente similares de su paleta de 20 colores, no use solo los primeros cuatro.

El color es social

Viz Palette no sabe para qué estás usando tus colores. No sabe si está tratando de armar una paleta nítida para una gran presentación o una reunión llena de preguntas o para su visualización exploratoria en su cuaderno. Si se trata de una reunión y espera que otras personas hablen sobre su gráfico, entonces debe intentar tener un buen nombre distintivo. Esto significa que los colores en un gráfico deben ser distinguibles verbalmente de tal manera que si un miembro de la audiencia nombra uno de los elementos coloreados no hay posibilidad de confusión. "El rojo" no debería iniciar una conversación sobre si la referencia era o no al punto de datos fucsia o al punto de datos de la rosa oscura o al punto de datos de color rosa oscuro. Por otro lado, si es su computadora portátil, debe enfatizar la claridad del color. No importa si no puede nombrar los colores en el gráfico que está utilizando para la exploración, porque no es colaborativo, en su lugar, solo necesita asegurarse de que puede distinguir la diferencia entre los puntos de datos de manera efectiva. Si se trata de una gran presentación, debe tener en cuenta el daltonismo y también tratar de mantener cierta similitud temática.

Todos estos son colores visualmente distintos y adecuados para estos diseños de visualización de datos. Si esto fuera para fines exploratorios, no plantea problemas, pero si se presentara a una audiencia, tendrían dificultades para comunicarse al respecto porque todos los elementos podrían describirse como naranja.

El color de alta cardinalidad es malo

En lugar de tratar de encontrar esa paleta imposible de 20 colores, deje de usar el color cuando tenga tantas dimensiones. Es indistinguible, es confuso y simplemente está descargando la complejidad y la toma de decisiones a su lector. Pero si tiene que hacerlo, reconozca que es difícil y que llevará tiempo y esfuerzo. Señale eso a sus partes interesadas, programe un tiempo para ello, no lo ignore. Una de las principales razones por las que las personas son tan malas para el color en la visualización de datos es porque no presupuestan en ningún momento para ello.

Se puede lograr una paleta visualmente distinta de 24 colores como esta, pero nunca se debe usar. Si el propósito es la explicación, entonces el color solo debe usarse para los puntos importantes y el resto debe transformarse en puntos contextuales a través de un color compartido adecuadamente desaturado. Si el propósito es la exploración, entonces se debe utilizar la interactividad o la decoración complementaria, como las anotaciones, en lugar de una engorrosa leyenda de 24 elementos.

Hazlo bonito

He evitado cualquier mención de estética, pero es el elefante impecablemente vestido en la habitación. Sin embargo, en lugar de apuntar a la belleza, concéntrese en temas de color, como tonos tierra, clave alta, neón, pastel y desaturado. Intente mantener un tema con sus colores, de lo contrario, los colores que no están en ese tema se destacarán y señalarán importancia para sus lectores. Esto puede significar colores con el mismo nivel de saturación (colores grisáceos apagados) o la misma claridad (pastel), pero también tonos adyacentes en una rueda de colores (si tiene principalmente azules y verdes y un naranja, ese naranja se destacará como si fuera especial) .

Las paletas artísticas como esta paleta complementaria dividida son siempre una buena opción para tratar de desarrollar una paleta distintiva. Si bien las paletas artísticas y especialmente las pictóricas no siempre son adecuadas para la visualización de datos, puede medir su efectividad con Viz Palette.

Piensa en la interacción del color

Los efectos de color de la Gestalt significan que una paleta de colores que funciona para un tipo de gráfico puede no ser para otro. Algunos tipos de gráficos son muy resistentes (como los gráficos de área apilados), mientras que otros son muy frágiles (todos los gráficos de líneas) y eso debería influir en su decisión no solo de qué color usar sino qué diseño usar. Intente especialmente evitar los colores transparentes, que nunca deben usarse solo para aclarar (use el color sólido más claro que espera) y rara vez se deben usar de otra manera. Este mapa de símbolos graduados del uso del agua del New York Times muestra una interacción de color no planificada entre los elementos transparentes en capas que crean colores que no existen en la leyenda y también colores que sí existen en la leyenda pero que no transmiten los datos con precisión.

Integre el color, no lo agregue

Las decisiones de color no están separadas de otras decisiones gráficas. Puede procesar un conjunto de datos y explicar su estructura en sus estrategias de color. Intenta asegurarte de que, si realmente necesitas representar 20 valores distintos o estás limitado por alguna otra opción terrible (como los colores de marca), el diseño es resistente. En esas situaciones, trate de asegurarse de que los colores no se superpongan entre sí o que las regiones del gráfico no estén coloreadas al azar, sino que estén coloreadas para evitar los conflictos de color más desafiantes.

Estos diagramas de red utilizan un esquema de color complejo y tienen una alta complejidad visual. No sería suficiente encontrar la paleta perfecta, necesitan un diseño cuidadoso y elementos complementarios (como el minimapa o la cuadrícula de comunidades).

Los nombres de color son más importantes para la colaboración, no para la exploración

Los nombres de colores y otros aspectos sociales de la visualización de datos son importantes. Si tiene un cuadro con tres verdes distintos, se sentirá bastante tonto cuando alguien diga "Ese verde es importante" y la respuesta no es constructiva, sino más bien "¿Te refieres al verde claro a verde azulado o al verde marino más oscuro? "Si su organización ha utilizado ciertos colores o paletas para indicar métricas o umbrales particulares, entonces tenga eso en cuenta en su diseño. Si el cuadro debe presentarse a grupos con fuertes asociaciones culturales sobre el color, tenga en cuenta eso. No hay una regla para esto, el rojo no siempre es malo y el verde no siempre es bueno, depende de la configuración.

Usa las herramientas

Existen herramientas y espacios de color que permiten una medición conveniente de los rasgos de color que se pueden utilizar para construir mejores paletas, incluidas las paletas de color seguro y las paletas de alta cardinalidad de alto rendimiento. Viz Palette es genial, pero tal vez tenga un caso más particular para nombrar colores o JND. Comprender bibliotecas como chroma.js es imprescindible para cualquiera que quiera ser efectivo con la visualización de datos.

Viendo hacia adelante

No hemos terminado con Viz Palette. Después de ver a las personas usarlo y escuchar sus comentarios, hemos discutido algunas características para agregar que creemos que mejorarían su efectividad.

  • Tenga en cuenta la luminosidad (para que no tenga un color en su paleta sin querer que sea mucho más brillante que el resto de sus colores).
  • Tenga un modo de comparación para que pueda ver una paleta junto a la otra.
  • Permita que el Informe de color y los Colores en acción se inserten fácilmente.

En términos más generales, me gustaría ver que Viz Palette actúe como un punto de entrada accesible en aspectos de color más avanzados pero aún prácticamente importantes. En mi experiencia, la comunidad de visualización de datos es demasiado rápida para descartar el color con la vieja excusa "El color es difícil". El color es difícil, pero también lo es la visualización en red, la anotación, la animación de un mapa de árbol y la creación de un gráfico de burbujas. Hacer Viz Palette mejoró dramáticamente mi comprensión del color, y su compromiso con el color hará lo mismo.

Gracias a Susie Lu y Rachel Binx y Helen Ngo por sus comentarios.