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

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.

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

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:

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 ++ .

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ó.

(Imagen de wikipedia )

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:

$.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();
    })
});