Quali algoritmi ci sono per selezionare i colori per le linee della trama sui grafici?

Sono interessato a quali algoritmi o regole posso implementare a livello di programmazione per generare colori RGB o HSV per trame per tenerli visivamente distinti dai vicini.

So che nella creazione di mappe professionali esistono algoritmi o regole che assicurano che non vi siano due paesi adiacenti su una mappa dello stesso colore. Posso anche pensare a Microsoft Office Excel come a scegliere buone tinte / sfumature per le linee della trama (rosso, quindi blu, quindi viola / arancione).

Ecco un esempio di ciò di cui sto parlando: ho bisogno di generare colori per 12 linee su uno sfondo nero. I colori qui sono stati codificati a mano usando codici colore RGB sicuri per il web. Il problema sorge quando queste linee si sovrappongono: è difficile dire se si guarda viola, leggermente viola più scuro o viola. Sto cercando un algoritmo migliore per produrre colori per trame come queste.

Ecco un esempio usando la libreria di stampa Flot per jQuery, ha una bella successione di colori per i grafici:

Consiglio di utilizzare gli spazi colore HSV o HSL, non lo spazio colore RGB, perché HSV e HSL sono strutturati meglio per generare colori che sembrano diversi dall'uomo. Avrai più lavoro in RGB (anche se esistono conversioni avanti e indietro, se ne hai bisogno).

Ecco come si presenta HSV / HSL:

Quando si utilizza lo spazio colore HSV o HSL, è possibile supporre (molto approssimativamente) che la differenza tra i componenti H (tonalità) di due colori sia una buona approssimazione della distanza percettiva tra i colori, ovvero maggiore è il cambiamento di tonalità, più diversi i colori appariranno agli umani. Puoi provare a giocare con S (saturazione) e L / V (luminosità / valore) e anche per ottenere qualche altro colore molto diverso, ma non sembreranno così diversi per la stessa variazione di valore che variando la tonalità.

A seconda del numero di colori distinti di cui hai bisogno, puoi dividere lo spazio tonalità in quel numero di colori diversi. Se ad esempio hai un intervallo di tonalità di 256 valori e hai bisogno di 16 colori distinti, il tuo primo colore potrebbe essere (0, 128, 128), il secondo (16, 128, 128) e così via. Ho scelto in qualche modo arbitrariamente valori S / L al centro qui perché di solito saranno abbastanza chiari e saturi da vedere chiaramente le differenze di colore. Questo sistema è semplice e presuppone che tu non debba sapere nulla sull'adiacenza dei colori nel tuo grafico / mappa.

Se non sai in anticipo di quanti colori distinti hai bisogno ma conosci il limite superiore e dividere la gamma di tonalità in colori con quel limite superiore in mente come sopra ti dà ancora buoni colori percettivamente diversi, allora puoi usare lo stesso sistema con il limite superiore.

Se (potresti) hai bisogno di moltissimi colori distinti, potresti comunque cavartela usando colori molto simili o addirittura uguali, purché non appaiano vicino agli altri elementi del grafico che hanno il colore simile. Ciò richiede la conoscenza della situazione di adiacenza nel grafico che stai visualizzando e potrebbe non essere sempre semplice, e anche in questo caso potrebbe non essere una buona idea come sottolinea Dukeling nei commenti: potrebbe essere fonte di confusione per gli spettatori che venga utilizzato lo stesso colore due volte nel grafico per due concetti diversi.

Quindi, infine, nella situazione più complessa il tuo grafico è abbastanza complesso da non avere abbastanza spazio colore per assicurarti di non finire con elementi distinti con colori troppo simili usando il sistema sopra. In questo caso è necessario creare un grafico di adiacenza degli elementi del grafico di visualizzazione. L'adiacenza qui è un concetto confuso: dovrai definirlo correttamente per la tua situazione attuale. Ad esempio, nel tuo secondo esempio, i dati del 12 luglio hanno un punto di strozzatura in cui ogni colore è adiacente a ogni altro. Un approccio che può aiutarti se puoi costruire il grafico adiacenza è il problema di colorazione del grafico - ci sono librerie che possono aiutarti - ad esempio boost :: graph in C ++ .

Nel caso in cui non si sappia in anticipo di quanti colori distinti sarà necessario un altro algoritmo interessante è l' algoritmo del rapporto aureo .

Inizia semplicemente dal tuo colore preferito e poi gira attorno alla ruota dei colori a passi dell'angolo d'oro (137,5 °). Con questo angolo ti assicurerai che dopo ogni convoluzione attorno alla ruota dei colori i tuoi nuovi colori cadano tra i colori che hai già creato.

(Immagine da Wikipedia )

Ho sperimentato un po 'e ho scoperto che anche con HSL / HSV non è abbastanza facile ottenere un algoritmo decente per colori piacevoli, indisturbanti, calmanti (tutti abbastanza soggettivi, ma ...), ma contrastanti. Alcune parti dello spettro sono visivamente simili - esp. la sezione verde-blu. Quindi ho dovuto aggiungere alcune variazioni di leggerezza.

Ecco cosa ho finito 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();
    })
});