¿Qué algoritmos existen para elegir los colores para las líneas de trazado en los gráficos?

19

Estoy interesado en los algoritmos o reglas que puedo implementar mediante programación para generar colores RGB o HSV para trazados para mantenerlos visualmente distintos de los vecinos.

Sé que en la cartografía profesional, existen algoritmos o reglas que aseguran que no haya dos países adyacentes en un mapa del mismo color. También puedo pensar en Microsoft Office Excel como la elección de buenos tonos / sombras para las líneas de trazado (rojo, luego azul, luego púrpura / naranja).

Aquí hay un ejemplo de lo que estoy hablando: necesito generar colores para 12 líneas sobre un fondo negro. Los colores aquí los he codificado a mano usando códigos de color RGB seguros para la web. El problema surge cuando estas líneas se superponen: es difícil saber si uno está mirando púrpura, violeta o violeta ligeramente más oscuro. Estoy buscando un mejor algoritmo para producir colores para tramas como estas.

Ejemplo de color de múltiples líneas de trazado

Aquí hay un ejemplo que usa la biblioteca de trazado Flot para jQuery, tiene una buena sucesión de colores para gráficos: ingrese la descripción de la imagen aquí

Alex Stone
fuente
Parece que simplemente eligieron los colores base. Y solo tiene cinco líneas en este gráfico, mientras que su otro ejemplo tiene doce. Si permitieras que Flot tuviera más gráficos, lo más probable es que te encuentres con problemas similares. Solo hay muchos colores diferentes y desde allí tienes que repetir los tonos y solo puedes tratar de tener una "distancia" entre ellos.
thorsten müller
1
Si bien aquí hay un problema muy interesante (y bueno), desde el punto de vista de la implementación práctica, sugiero encarecidamente que busque identificar el conjunto de colores para un tema (escala de grises, alto contraste, pasteles, daltónico, etc.) con un número máximo razonable (antes de que se vuelva ilegible): 32 o 128 o más colores (dependiendo de la aplicación) y use ese índice de matriz en lugar de tratar de calcular el siguiente color.

Respuestas:

15

Recomiendo usar los espacios de color HSV o HSL, no el espacio de color RGB, porque HSV y HSL están mejor estructurados para generar colores que se ven diferentes a los humanos. Tendrá más trabajo en RGB (aunque existen conversiones de ida y vuelta, en caso de que las necesite).

Así es como se ve HSV / HSL: ingrese la descripción de la imagen aquí

Al utilizar el espacio de color HSV o HSL, puede suponer (muy aproximadamente) que la diferencia entre los componentes H (tono) de dos colores es una buena aproximación de la distancia perceptiva entre los colores, es decir, cuanto mayor sea el cambio de tono, mayor será Los colores serán diferentes para los humanos. Puedes intentar jugar con S (saturación) y L / V (luminosidad / valor) para obtener algunos colores más diferentes, pero no se verán tan diferentes para el mismo cambio de valor como para variar el tono.

Dependiendo de la cantidad de colores distintos que necesite, puede dividir el espacio de matiz en esa cantidad de colores diferentes. Si, por ejemplo, tiene un rango de tono de 256 valores y necesita 16 colores distintos, entonces su primer color podría ser (0, 128, 128), su segundo (16, 128, 128) y así sucesivamente. Elegí algo arbitrariamente los valores S / L justo en el medio aquí, ya que generalmente será lo suficientemente ligero y saturado como para ver claramente las diferencias de color. Este sistema es simple y supone que no necesita saber nada sobre la adyacencia de colores en su gráfico / mapa.

Si no sabe de antemano cuántos colores distintos necesita, pero conoce el límite superior, y dividir el rango de matices en colores teniendo en cuenta ese límite superior como se indica arriba todavía le da buenos colores perceptualmente diferentes, entonces puede usar el mismo sistema El límite superior.

Si (podría) necesitar muchos colores distintos, aún podría salirse con la suya usando colores muy similares o incluso los mismos, siempre que no aparezcan cerca de los otros elementos del gráfico que tienen el color similar. Esto requiere conocer su situación de adyacencia en el gráfico que está renderizando y puede que no siempre sea sencillo, e incluso entonces puede que no sea una buena idea como Dukeling señala en los comentarios: puede ser confuso para los espectadores que se use el mismo color dos veces en el gráfico para dos conceptos diferentes.

Entonces, finalmente, en la situación más compleja, su gráfico es lo suficientemente complejo como para no tener suficiente espacio de color para garantizar que no termine con elementos distintos con colores que son demasiado similares usando el sistema anterior. En este caso, necesita construir un gráfico de adyacencia de elementos de su gráfico de visualización. La adyacencia aquí es un concepto difuso: tendrá que definirlo correctamente para su situación real. Por ejemplo, en su segundo ejemplo, los datos del 12 de julio tienen un punto de estrangulamiento donde cada color es adyacente a todos los demás. Un enfoque que puede ayudarlo si puede construir el gráfico de adyacencia es el problema del color del gráfico : hay bibliotecas que pueden ayudarlo, por ejemplo boost :: graph en C ++ .

Joris Timmermans
fuente
Independientemente de si existe o no intersección, no desea que los mismos colores representen cosas diferentes en un solo gráfico (si esto es lo que implica), hay demasiado espacio para la confusión y es posible que no pueda determinar cuál es cuál , por lo que el color del gráfico no está relacionado. En caso de que no lo haya notado, cada línea solo tiene un solo color y consiste en una secuencia de puntos conectados.
Dukeling
@Dukeling: no entiendes mi punto. En algún momento, no importa cuán cuidadosamente elija, si necesita muchos colores diferentes, comenzará a tener colores que se parecen (p. Ej., Los morados en la primera imagen de la pregunta). En ese momento, una implementación ingenua pero simple como la que sugerí puede poner esos colores muy juntos, lo que dificulta ver lo que está sucediendo. Es entonces cuando puede usar el color del gráfico para asegurarse de que está usando colores distantes para líneas "cercanas" en el gráfico.
Joris Timmermans
@Dukeling: he editado mi respuesta para incluir su comentario sobre por qué reutilizar el mismo color puede ser malo.
Joris Timmermans
1

Para el caso en el que no sabe de antemano cuántos colores distintos necesitará, otro algoritmo interesante es el algoritmo de proporción áurea .

Simplemente comience con su color favorito y luego rodee la rueda de color en pasos del ángulo dorado (137.5 °). Con este ángulo, se asegurará de que después de cada convolución alrededor de la rueda de colores, sus nuevos colores se encuentren entre los colores que ya creó.

El ángulo entre los floretes sucesivos en algunas flores es el ángulo dorado.

(Imagen de wikipedia )

Reiner romano
fuente
0

He experimentado un poco y descubrí que incluso con HSL / HSV no es fácil obtener un algoritmo decente para obtener colores agradables, tranquilos y relajantes (todos bastante subjetivos, pero ...), pero contrastantes. Algunas partes del espectro son visualmente similares, especialmente. La sección verde-azul. Así que tuve que agregar alguna variación de ligereza.

Esto es lo que terminé con:

ingrese la descripción de la imagen aquí

$.plot($('#application_pie'), data_application_pie, {
    series: { pie: { show: true,  innerRadius: 0.55, offset: { top: 0, left: -120 } } },
    colors: $.map( data_application_pie, function (item, index) {
        return jQuery.Color({
            hue: (index*0.95*360/data_application_pie.length),
            saturation: 0.95,
            //lightness: (index%2/-4)+0.55, alpha: 1
            lightness: ((index%4 == 3 ? 1:0)/-4)+0.55, alpha: 1
        }).toHexString();
    })
});
Ondra Žižka
fuente