Які алгоритми існують для вибору кольорів для сюжетних ліній на графіках?

Мене цікавить, які алгоритми чи правила я можу програмно реалізувати для генерування кольорів RGB або HSV для сюжетних ліній, щоб візуально відрізнятись від сусідів.

Я знаю, що в професійному картографуванні існують алгоритми або правила, які гарантують, що жодна дві сусідні країни на карті не мають однаковий колір. Я також можу вважати Microsoft Office Excel як підбір хороших відтінків / відтінків для сюжетних ліній (червоний, потім синій, потім фіолетовий / оранжевий).

Ось приклад того, про що я говорю - мені потрібно генерувати кольори для 12 рядків на чорному тлі. Кольори тут я жорстко кодую вручну, використовуючи безпечні для Інтернету кольори кольорів RGB. Проблема виникає, коли ці рядки перекриваються - важко сказати, чи дивишся ти на фіолетовий, трохи темніше фіолетовий або фіолетовий. Я шукаю кращий алгоритм для створення кольорів для таких сюжетних ліній.

Ось приклад використання бібліотеки графіків Флот для jQuery, у ній є приємна послідовність кольорів для графіків:

Я рекомендую використовувати кольорові простори HSV або HSL, а не кольоровий простір RGB, оскільки HSV та HSL краще структуровані для створення кольорів, які виглядають по-різному для людей. У вас буде більше роботи в RGB (хоча перетворення назад і назад існують, якщо вони вам потрібні).

Ось так виглядають HSV / HSL:

Використовуючи колірний простір HSV або HSL, ви можете припустити (дуже приблизно), що різниця між Н (відтінком) компонентами двох кольорів є хорошим наближенням сприйнятої відстані між кольорами - тобто чим більше зміна відтінку, тим більше різні кольори будуть виглядати на людей. Ви можете спробувати грати з S (насиченість) і L / V (легкість / значення), а також виділити ще кілька дуже різних кольорів, але вони не будуть виглядати настільки ж різними для тієї самої зміни значення, як і зміна відтінку.

Залежно від кількості різних кольорів, які вам потрібні, ви можете розділити простір відтінку на таку кількість різних кольорів. Якщо, наприклад, ви маєте діапазон відтінків у 256 значень і вам потрібні 16 різних кольорів, то ваш перший колір може бути (0, 128, 128), другий (16, 128, 128) тощо. Я дещо довільно вибрав значення S / L присмаку в середині, тому що зазвичай буде достатньо світлим і насиченим, щоб чітко побачити кольорові відмінності. Ця система проста, і передбачає, що вам потрібно нічого не знати про суміжність кольорів у вашому графіку / карті.

Якщо ви не знаєте заздалегідь, скільки різних кольорів вам потрібно, але ви знаєте верхню межу, і розділення діапазону відтінків на кольори з цією верхньою межею на увазі, як вище, як і раніше, дає хороші перцептивно різні кольори, тоді ви можете використовувати ту саму систему з верхня межа.

Якщо вам (могли) потрібні дуже багато різних кольорів, ви все одно можете піти від використання дуже схожих або навіть однакових кольорів, доки вони не з’являться біля інших елементів графіка, які мають подібний колір. Для цього потрібно знати вашу ситуацію примикання до графіку, який ви рендеруєте, і він не завжди може бути простим, і навіть тоді це може бути не дуже хорошою ідеєю, як в коментарях вказує Дюкелінг: це може заплутати глядачів, що використовується той самий колір двічі в графіку для двох різних понять.

Отже, нарешті, у найскладнішій ситуації ваш графік є досить складним, що у вас не вистачає кольорового простору, щоб у вас не виникли чіткі елементи з кольорами, занадто схожими за допомогою наведеної вище системи. У цьому випадку вам потрібно створити графік суміжності елементів вашого візуалізаційного графіка. Сусідність тут - нечітка концепція - вам доведеться правильно її визначити для вашої реальної ситуації. Наприклад, у вашому другому прикладі дані 12 липня мають задимлену точку, коли кожен колір сусідять з іншим. Один із підходів, який може вам допомогти, якщо ви зможете створити графік суміжності - це проблема забарвлення графіків - є бібліотеки, які можуть вам допомогти - наприклад, boost :: graph у C ++ .

Для випадку, коли ви не знаєте заздалегідь, скільки різних кольорів вам знадобиться ще один цікавий алгоритм, це алгоритм золотого відношення .

Просто почніть з улюбленого кольору, а потім об’їжджайте кольорове колесо по кроках із золотого кута (137,5 °). За допомогою цього кута ви гарантуєте, що після кожного згортання навколо кольорового колеса ваші нові кольори потраплять між кольорами, які ви вже створили.

(Зображення з wikipedia )

Я трохи експериментував і з’ясував, що навіть з HSL / HSV не зовсім просто отримати гідний алгоритм для приємних, непорушних, заспокійливих (все це досить суб’єктивно, але ...), але контрастних кольорів. Деякі частини привидів візуально схожі - esp. зелено-синій розділ. Тому мені довелося додати трохи варіації легкості.

Ось що я закінчив:

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