Algoritma apa yang ada untuk memilih warna untuk garis plot pada grafik?

Saya tertarik dengan algoritme atau aturan apa yang dapat saya implementasikan secara terprogram untuk menghasilkan warna RGB atau HSV untuk plotline agar tetap berbeda secara visual dari tetangga.

Saya tahu bahwa dalam pembuatan peta profesional, ada algoritme atau aturan yang memastikan bahwa tidak ada dua negara yang berdekatan pada peta berwarna sama. Saya juga bisa memikirkan Microsoft office Excel sebagai memilih warna yang bagus untuk garis plot (merah, kemudian biru, kemudian ungu / oranye).

Berikut adalah contoh dari apa yang saya bicarakan - Saya perlu menghasilkan warna untuk 12 garis pada latar belakang hitam. Warna-warna di sini saya telah hardcoded dengan tangan menggunakan kode warna RGB web-safe. Masalahnya muncul ketika garis-garis ini tumpang tindih - sulit untuk mengetahui apakah seseorang melihat ungu, ungu gelap atau ungu. Saya mencari algoritma yang lebih baik untuk menghasilkan warna untuk plotline seperti ini.

Berikut ini contoh menggunakan pustaka flot Plot untuk jQuery, memiliki suksesi warna untuk grafik:

Saya merekomendasikan menggunakan ruang warna HSV atau HSL, bukan ruang warna RGB, karena HSV dan HSL lebih terstruktur untuk menghasilkan warna yang terlihat berbeda dengan manusia. Anda akan memiliki lebih banyak pekerjaan di RGB (meskipun konversi bolak-balik ada, jika Anda membutuhkannya).

Seperti inilah bentuk HSV / HSL:

Saat menggunakan ruang warna HSV atau HSL Anda dapat mengasumsikan (sangat kasar) bahwa perbedaan antara komponen H (rona) dari dua warna adalah perkiraan yang baik dari jarak persepsi antara warna - yaitu semakin besar perubahan rona, semakin besar berbeda warna akan terlihat manusia. Anda dapat mencoba bermain dengan S (saturation) dan L / V (lightness / value) juga untuk menambah beberapa warna yang sangat berbeda, tetapi mereka tidak akan terlihat berbeda untuk perubahan nilai yang sama dengan memvariasikan rona.

Bergantung pada jumlah warna berbeda yang Anda butuhkan, Anda dapat membagi ruang rona ke dalam jumlah warna yang berbeda. Jika misalnya Anda memiliki kisaran rona 256 nilai dan Anda memerlukan 16 warna berbeda, maka warna pertama Anda mungkin (0, 128, 128), warna kedua (16, 128, 128), dan seterusnya. Saya agak sewenang-wenang memilih nilai S / L memukul di tengah sini karena biasanya akan cukup ringan dan jenuh untuk melihat perbedaan warna dengan jelas. Sistem ini sederhana, dan mengasumsikan Anda tidak perlu tahu apa-apa tentang kedekatan warna dalam grafik / peta Anda.

Jika Anda tidak tahu sebelumnya berapa banyak warna berbeda yang Anda butuhkan tetapi Anda tahu batas atas, dan membagi kisaran rona menjadi warna dengan batas atas itu dalam pikiran seperti di atas masih memberi Anda warna yang berbeda secara perseptual yang baik maka Anda dapat menggunakan sistem yang sama dengan batas atas.

Jika Anda (bisa) membutuhkan banyak warna berbeda, Anda masih bisa menggunakan warna yang sangat mirip atau bahkan sama, asalkan tidak muncul di dekat elemen lain dari grafik yang memiliki warna serupa. Ini mengharuskan Anda mengetahui situasi kedekatan Anda dalam grafik yang Anda render dan mungkin tidak selalu langsung, dan meskipun demikian itu mungkin bukan ide yang baik seperti yang Dukeling tunjukkan dalam komentar: mungkin membingungkan bagi pemirsa bahwa warna yang sama digunakan. dua kali dalam grafik untuk dua konsep yang berbeda.

Jadi akhirnya dalam situasi yang paling kompleks, grafik Anda cukup kompleks sehingga Anda tidak memiliki ruang warna yang cukup untuk memastikan Anda tidak berakhir dengan elemen berbeda dengan warna yang terlalu mirip menggunakan sistem di atas. Dalam hal ini Anda perlu membangun grafik unsur-unsur elemen dari grafik visualisasi Anda. Adjacency di sini adalah konsep fuzzy - Anda harus mendefinisikannya dengan benar untuk situasi aktual Anda. Misalnya dalam contoh kedua Anda, data pada 12 Juli memiliki titik choke di mana setiap warna berdekatan satu sama lain. Salah satu pendekatan yang dapat membantu Anda jika Anda dapat membangun grafik adjacency adalah masalah pewarnaan grafik - ada perpustakaan yang dapat membantu Anda - misalnya boost :: graph di C ++ .

Untuk kasus di mana Anda tidak tahu sebelumnya berapa banyak warna yang berbeda Anda akan membutuhkan algoritma lain yang menarik adalah algoritma rasio emas .

Cukup mulai dari warna favorit Anda dan kemudian berkeliling roda warna dalam langkah-langkah sudut emas (137,5 °). Dengan sudut ini Anda akan memastikan bahwa setelah setiap putaran di sekitar roda warna warna baru Anda jatuh di antara warna yang sudah Anda buat.

(Gambar dari wikipedia )

Saya telah bereksperimen sedikit dan menemukan bahwa bahkan dengan HSL / HSV itu tidak cukup mudah untuk mendapatkan algoritma yang layak untuk menyenangkan, tidak mengganggu, menenangkan (semua sangat subjektif, tapi ...), namun warna kontras. Beberapa bagian dari momok secara visual serupa - esp. bagian hijau-biru. Jadi saya harus menambahkan beberapa variasi ringan.

Inilah yang akhirnya saya dapatkan:

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