Jakie są algorytmy wybierania kolorów linii wykresu na wykresach?

Interesuje mnie, jakie algorytmy lub reguły mogę programowo zaimplementować w celu generowania kolorów RGB lub HSV dla linii kreślenia, aby odróżnić je wizualnie od sąsiadów.

Wiem, że w profesjonalnym tworzeniu map istnieją algorytmy lub reguły, które zapewniają, że żadne dwa sąsiednie kraje na mapie nie będą tego samego koloru. Mogę również myśleć o Microsoft Office Excel jako wybieranie dobrych odcieni / odcieni dla linii wydruku (czerwony, potem niebieski, a następnie fioletowy / pomarańczowy).

Oto przykład tego, o czym mówię - muszę wygenerować kolory dla 12 linii na czarnym tle. Kolory tutaj zakodowałem ręcznie, używając bezpiecznych dla sieci kodów kolorów RGB. Problem pojawia się, gdy te linie nakładają się - trudno jest stwierdzić, czy ktoś patrzy na fioletowy, nieco ciemniejszy fioletowy lub fioletowy. Szukam lepszego algorytmu do tworzenia kolorów dla takich linii fabularnych.

Oto przykład użycia biblioteki kreślenia Flota dla jQuery, ma ładną kolejność kolorów dla wykresów:

Zalecam stosowanie przestrzeni kolorów HSV lub HSL, a nie przestrzeni kolorów RGB, ponieważ HSV i HSL mają lepszą strukturę do generowania kolorów, które wyglądają inaczej niż u ludzi. Będziesz miał więcej pracy w RGB (choć konwersje tam i z powrotem istnieją, jeśli ich potrzebujesz).

Tak wygląda HSV / HSL:

Korzystając z przestrzeni barw HSV lub HSL, możesz (z grubsza) założyć, że różnica między składowymi H (odcienia) dwóch kolorów jest dobrym przybliżeniem odległości percepcyjnej między kolorami - tj. Im większa zmiana odcienia, tym więcej inaczej kolory będą wyglądać dla ludzi. Możesz spróbować grać z S (nasycenie) i L / V (jasność / wartość), aby wyodrębnić jeszcze kilka bardzo różnych kolorów, ale nie będą one wyglądać tak różnie dla tej samej zmiany wartości jak zmiana odcienia.

W zależności od liczby różnych kolorów, których potrzebujesz, możesz podzielić przestrzeń barw na tę liczbę różnych kolorów. Jeśli na przykład masz zakres odcieni 256 wartości i potrzebujesz 16 różnych kolorów, to twoim pierwszym kolorem może być (0, 128, 128), drugi (16, 128, 128) i tak dalej. Nieco arbitralnie wybrałem wartości S / L na środku, ponieważ zwykle będą one wystarczająco jasne i nasycone, aby wyraźnie zobaczyć różnice kolorów. Ten system jest prosty i zakłada, że ​​nie musisz nic wiedzieć o przyleganiu kolorów na wykresie / mapie.

Jeśli nie wiesz z góry, ile różnych kolorów potrzebujesz, ale znasz górną granicę, a podział zakresu odcieni na kolory z myślą o tym górnym limicie, jak powyżej, nadal daje dobre różne pod względem percepcyjnym kolory, możesz użyć tego samego systemu z górna granica.

Jeśli potrzebujesz (i) bardzo wielu różnych kolorów, nadal możesz uniknąć bardzo podobnych lub nawet takich samych kolorów, o ile nie pojawią się one w pobliżu innych elementów wykresu o podobnym kolorze. Wymaga to znajomości sytuacji sąsiedztwa na renderowanym wykresie i może nie zawsze być proste, a nawet wtedy może nie być dobrym pomysłem, jak zauważa Dukeling w komentarzach: może być mylące dla widzów, że używany jest ten sam kolor dwa razy na wykresie dla dwóch różnych pojęć.

Wreszcie w najbardziej złożonej sytuacji wykres jest na tyle złożony, że nie masz wystarczającej przestrzeni kolorów, aby upewnić się, że nie skończysz z wyraźnymi elementami o kolorach, które są zbyt podobne przy użyciu powyższego systemu. W takim przypadku musisz zbudować wykres sąsiedztwa elementów wykresu wizualizacji. Adjacency jest tutaj rozmytym pojęciem - będziesz musiał go poprawnie zdefiniować dla swojej aktualnej sytuacji. Na przykład w drugim przykładzie dane z 12 lipca mają dławik, w którym każdy kolor sąsiaduje z każdym innym. Jednym z podejść, które może ci pomóc, jeśli możesz zbudować wykres sąsiedztwa, jest problem kolorowania wykresów - istnieją biblioteki, które mogą ci pomóc - na przykład boost :: graph w C ++ .

W przypadku, gdy nie wiesz z góry, ile różnych kolorów będziesz potrzebować innego interesującego algorytmu, jest algorytm złotego podziału .

Po prostu zacznij od swojego ulubionego koloru, a następnie okrążaj koło kolorów krokami złotego kąta (137,5 °). Dzięki temu kątowi upewnisz się, że po każdym splocie wokół koła kolorów nowe kolory mieszczą się między kolorami, które już utworzyłeś.

(Zdjęcie z wikipedii )

Trochę eksperymentowałem i odkryłem, że nawet z HSL / HSV nie jest łatwo uzyskać porządny algorytm dla ładnych, niepokojących, uspokajających (wszystkie dość subiektywne, ale ...), ale kontrastowych kolorów. Niektóre części widma są podobne wizualnie - szczególnie. sekcja zielono-niebieska. Musiałem więc dodać nieco lekkości.

Oto, z czym skończyłem:

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