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


19

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.

Beberapa contoh garis warna alur

Berikut ini contoh menggunakan pustaka flot Plot untuk jQuery, memiliki suksesi warna untuk grafik: masukkan deskripsi gambar di sini



Sepertinya mereka hanya memilih warna dasar. Dan Anda hanya memiliki lima baris dalam bagan ini sementara contoh Anda yang lain memiliki dua belas. Jika Anda membiarkan Flot memiliki lebih banyak grafik, kemungkinan besar Anda akan mengalami masalah serupa. Hanya ada begitu banyak warna berbeda dan dari sana Anda harus mengulangi nuansa dan hanya dapat mencoba untuk memiliki "jarak" di antara mereka.
thorsten müller

1
Meskipun ada masalah yang sangat menarik (dan bagus) di sini, dari sisi implementasi praktis, saya akan menyarankan melihat identifikasi warna set untuk tema (skala abu-abu, kontras tinggi, pastel, buta warna, dll ...) dengan jumlah maksimum yang wajar (sebelum menjadi tidak dapat dibaca) - 32 atau 128 warna (tergantung pada aplikasi) dan gunakan indeks array daripada mencoba menghitung warna berikutnya.

Jawaban:


15

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: masukkan deskripsi gambar di sini

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


Terlepas dari apakah ada persimpangan atau tidak, Anda tidak ingin warna yang sama mewakili hal-hal yang berbeda pada satu grafik (jika ini yang Anda maksudkan), ada terlalu banyak ruang untuk kebingungan dan Anda mungkin tidak dapat menemukan yang mana , jadi pewarnaan grafik tidak terkait. Jika Anda tidak memperhatikan, setiap baris hanya memiliki satu warna dan terdiri dari urutan titik yang terhubung.
Dukeling

@Dukeling - Anda salah paham maksud saya. Pada titik tertentu, tidak peduli seberapa hati-hati Anda memilih, jika Anda membutuhkan banyak warna berbeda, Anda akan mulai memiliki warna yang terlihat serupa (misalnya ungu di gambar pertama dalam pertanyaan). Pada titik itu, implementasi yang naif namun sederhana seperti yang saya sarankan dapat menyatukan warna-warna tersebut, sehingga sulit untuk melihat apa yang terjadi. Saat itulah Anda dapat menggunakan pewarnaan grafik untuk memastikan bahwa Anda menggunakan warna yang jauh untuk garis "tutup" pada grafik.
Joris Timmermans

@Dukeling - Saya sudah mengedit jawaban saya untuk memasukkan komentar Anda tentang mengapa menggunakan kembali warna yang sama mungkin buruk.
Joris Timmermans

1

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.

Sudut antara kuntum berturut-turut pada beberapa bunga adalah sudut emas.

(Gambar dari wikipedia )


0

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:

masukkan deskripsi gambar di sini

$.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();
    })
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.