Grafiklerde çizim çizgileri için renk seçmek için hangi algoritmalar var?

Grafiksel olarak komşularından görsel olarak farklı tutmak için plotline'lar için RGB veya HSV renkleri oluşturmak üzere programsal olarak uygulayabileceğim algoritmalar veya kurallarla ilgileniyorum .

Profesyonel harita yapımında, haritadaki iki bitişik ülkenin aynı renkte olmadığından emin olan algoritmalar veya kurallar olduğunu biliyorum. Ayrıca Microsoft office Excel'i çizim çizgileri için iyi renk tonları / gölgeler (kırmızı, sonra mavi, sonra mor / turuncu) seçmek olarak düşünebilirim.

İşte bahsettiğim şeyin bir örneği - Siyah bir arka plan üzerinde 12 çizgi için renk üretmem gerekiyor. Buradaki renkler web uyumlu RGB renk kodlarını kullanarak elle kodladım. Sorun, bu çizgiler üst üste geldiğinde ortaya çıkıyor - birinin mor, çok daha koyu mor veya menekşe bakıp bakmadığını söylemek zor. Böyle plotlines için renkler üretmek için daha iyi bir algoritma arıyorum.

İşte jQuery için Flot çizim kütüphanesini kullanan bir örnek, grafikler için güzel bir renk dizisi var:

HSV veya HSL renk uzaylarını değil, RGB renk uzayını kullanmanızı öneririm, çünkü HSV ve HSL insanlar için farklı görünen renkler üretmek için daha iyi yapılandırılmıştır. RGB'de daha fazla çalışmanız olacak (ileri geri dönüşümler olsa da, ihtiyacınız olursa).

HSV / HSL şöyle görünür:

HSV veya HSL renk uzayını kullanırken, iki rengin H (ton) bileşenleri arasındaki farkın renkler arasındaki algısal mesafenin iyi bir tahmini olduğunu varsayabilirsiniz (yani, tondaki değişiklik ne kadar büyük olursa, daha fazla farklı renkler insanlara bakacak. Birkaç farklı renk daha eklemek için S (doygunluk) ve L / V (açıklık / değer) ile oynamayı deneyebilirsiniz, ancak tonu değiştirmekle aynı değer değişikliği için farklı görünmeyecektir.

İhtiyacınız olan farklı renklerin sayısına bağlı olarak, ton alanını o sayıda farklı renge bölebilirsiniz. Örneğin, 256 değerlik bir renk aralığınız varsa ve 16 farklı renge ihtiyacınız varsa, ilk renginiz (0, 128, 128), ikinciniz (16, 128, 128) vb. Biraz keyfi olarak S / L değerlerini ortada şapırtı aldım, çünkü bu genellikle hafif ve renk farklılıklarını açıkça görebilecek kadar doygun olacak. Bu sistem basittir ve grafiğinizdeki / haritanızdaki renklerin bitişiğiyle ilgili hiçbir şey bilmemeniz gerektiğini varsayar.

Kaç farklı renge ihtiyacınız olduğunu önceden bilmiyorsanız ancak üst limiti biliyorsanız ve ton aralığını yukarıdaki gibi göz önünde bulundurarak renklere bölmek size hala algısal olarak farklı renkler kazandırırsa, aynı sistemi kullanabilirsiniz. üst sınır.

Çok fazla farklı renge ihtiyacınız varsa (eğer), grafiğin benzer renge sahip diğer öğelerinin yakınında görünmedikleri sürece, çok benzer veya hatta aynı renkleri kullanmaktan kurtulabilirsiniz. Bu, oluşturduğunuz grafikteki bitişik durumunuzu bilmenizi gerektirir ve her zaman basit olmayabilir ve o zaman bile Dukeling'in yorumlarda belirttiği gibi iyi bir fikir olmayabilir: İzleyicilere aynı rengin kullanıldığı kafa karıştırıcı olabilir iki farklı kavram için grafikte iki kez.

Son olarak, en karmaşık durumda grafiğiniz, yukarıdaki sistemi kullanarak çok benzer renklere sahip farklı öğelerle sonuçlanmamanızı sağlayacak kadar renk alanınız olmayacak kadar karmaşıktır. Bu durumda, görselleştirme grafiğinizin öğelerinin bir bitişik grafiğini oluşturmanız gerekir. Buradaki bitişiklik bulanık bir kavramdır - gerçek durumunuz için doğru bir şekilde tanımlamanız gerekecektir. Örneğin ikinci örneğinizde, 12 Temmuz'daki veriler, her rengin birbirine bitişik olduğu bir boğulma noktasına sahiptir. Bitişiklik grafiğini oluşturabilirseniz size yardımcı olabilecek bir yaklaşım, grafik renklendirme sorunudur - size yardımcı olabilecek kütüphaneler vardır - örneğin , C ++ 'da boost :: graph .

Kaç tane farklı renge ihtiyacınız olacağını bilmediğiniz durumda, başka bir ilginç algoritma altın oran algoritmasıdır .

En sevdiğiniz renkten başlayın ve ardından altın açının (137.5 °) adımlarında renk tekerleğini dolaşın. Bu açı ile renk tekerleği etrafındaki her kıvrımdan sonra yeni renklerin daha önce oluşturduğunuz renkler arasında kalmasını sağlarsınız.

( Vikipedi'den resim )

Biraz denedim ve HSL / HSV ile bile güzel, rahatsız edici, sakinleştirici (hepsi oldukça öznel, ancak ...), ancak kontrastlı renkler için iyi bir algoritma elde etmenin pek kolay olmadığını öğrendim. Hayaletlerin bazı bölümleri görsel olarak benzer - esp. yeşil-mavi bölüm. Bu yüzden hafiflik varyasyonu eklemek zorunda kaldım.

İşte sonuçta:

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