มีขั้นตอนวิธีใดบ้างในการเลือกสีสำหรับเส้นที่พล็อตบนกราฟ

ฉันสนใจในอัลกอริทึมหรือกฎระเบียบที่ฉันสามารถนำไปใช้ในทางโปรแกรมเพื่อสร้างสี RGB หรือ HSV สำหรับโครงร่างเพื่อให้พวกเขาแตกต่างทางสายตาจากเพื่อนบ้าน

ฉันรู้ว่าในการทำแผนที่มืออาชีพมีอัลกอริทึมหรือกฎระเบียบที่ทำให้แน่ใจว่าไม่มีสองประเทศติดกันบนแผนที่มีสีเดียวกัน ฉันยังสามารถนึกถึง Microsoft office Excel ในการเลือกโทนสี / เฉดสีที่ดีสำหรับลายเส้น (แดง, น้ำเงิน, ม่วง, ส้ม)

นี่คือตัวอย่างของสิ่งที่ฉันกำลังพูดถึง - ฉันต้องสร้างสีสำหรับ 12 บรรทัดบนพื้นหลังสีดำ สีที่นี่ฉันฮาร์ดโค้ดด้วยมือโดยใช้รหัสสี RGB ที่ปลอดภัยสำหรับเว็บ ปัญหาเกิดขึ้นเมื่อเส้นเหล่านี้ทับกัน - ยากที่จะบอกได้ว่ามีใครดูที่สีม่วงสีม่วงเข้มหรือสีม่วงเล็กน้อย ฉันกำลังมองหาอัลกอริทึมที่ดีกว่าในการสร้างสีสำหรับพล็อตไลน์เช่นนี้

นี่คือตัวอย่างการใช้ Flot plotting library สำหรับ jQuery มันมีความต่อเนื่องของสีสำหรับกราฟ:

ฉันขอแนะนำให้ใช้ช่องว่างสี HSV หรือ HSL ไม่ใช่พื้นที่สี RGB เพราะ HSV และ HSL มีโครงสร้างที่ดีกว่าสำหรับการสร้างสีที่ดูแตกต่างจากมนุษย์ คุณจะมีงานในรูปแบบ RGB มากขึ้น (ถึงแม้ว่าจะมีการแปลงไปมาอยู่บ้างหากคุณต้องการ)

นี่คือลักษณะของ HSV / HSL:

เมื่อใช้พื้นที่สี HSV หรือ HSL คุณสามารถสมมติ (โดยคร่าว ๆ ) ว่าความแตกต่างระหว่างองค์ประกอบ H (ฮิว) ของสองสีเป็นการประมาณระยะห่างที่ดีระหว่างสี - นั่นคือการเปลี่ยนแปลงของสียิ่งมาก สีที่ต่างกันจะมีลักษณะกับมนุษย์ คุณสามารถลองเล่นกับ S (saturation) และ L / V (lightness / value) รวมถึง eke out อีกสองสามสีที่แตกต่างกันมาก แต่พวกมันจะไม่ต่างไปจากการเปลี่ยนค่าเดียวกันกับสีสันที่ต่างกัน

ขึ้นอยู่กับจำนวนของสีที่แตกต่างที่คุณต้องการคุณสามารถแบ่งพื้นที่สีเป็นจำนวนสีที่แตกต่างกัน ตัวอย่างเช่นหากคุณมีค่าเฉดสีเท่ากับ 256 และคุณต้องการ 16 สีที่แตกต่างกันสีแรกของคุณอาจเป็น (0, 128, 128), สีที่สองของคุณ (16, 128, 128) และอื่น ๆ ฉันค่อนข้างเลือกค่า S / L อย่างสุ่มที่ตรงกลางตรงนี้เพราะมันจะเบาและอิ่มตัวพอที่จะเห็นความแตกต่างของสีได้อย่างชัดเจน ระบบนี้ใช้งานง่ายและคุณไม่จำเป็นต้องรู้อะไรเลยเกี่ยวกับการใช้สีในกราฟ / แผนที่

หากคุณไม่ทราบล่วงหน้าว่าต้องการสีที่แตกต่างกันจำนวนเท่าใด แต่คุณรู้ว่าขีด จำกัด สูงสุดและการแบ่งช่วงสีเป็นสีโดยคำนึงถึงขีด จำกัด สูงสุดดังกล่าวข้างต้นยังคงให้สีที่แตกต่างกันตามการรับรู้คุณสามารถใช้ระบบเดียวกัน ขีด จำกัด บน

หากคุณต้องการสีที่ต่างกันคุณสามารถหลีกเลี่ยงการใช้สีที่คล้ายกันหรือสีเดียวกันตราบใดที่สีเหล่านั้นไม่ปรากฏใกล้องค์ประกอบอื่น ๆ ของกราฟที่มีสีใกล้เคียงกัน สิ่งนี้จำเป็นต้องรู้สถานการณ์ adjacency ของคุณในกราฟที่คุณกำลังเรนเดอร์และอาจไม่ตรงไปตรงมาและถึงแม้ว่ามันอาจไม่ใช่ความคิดที่ดีเพราะ Dukeling ชี้ให้เห็นในความคิดเห็น: มันอาจทำให้ผู้ชมสับสนว่ามีการใช้สีเดียวกัน สองครั้งในกราฟสำหรับแนวคิดที่แตกต่างกันสองแบบ

ในที่สุดสถานการณ์ที่ซับซ้อนที่สุดกราฟของคุณก็ซับซ้อนพอที่คุณจะมีพื้นที่สีไม่เพียงพอเพื่อให้แน่ใจว่าคุณจะไม่จบลงด้วยองค์ประกอบที่แตกต่างกับสีที่คล้ายกันมากเกินไปโดยใช้ระบบข้างต้น ในกรณีนี้คุณต้องสร้างกราฟ adjacency ขององค์ประกอบของกราฟการสร้างภาพของคุณ การประจบที่นี่เป็นแนวคิดที่คลุมเครือ - คุณจะต้องกำหนดอย่างถูกต้องสำหรับสถานการณ์จริงของคุณ ตัวอย่างเช่นในตัวอย่างที่สองของคุณข้อมูลในวันที่ 12 กรกฎาคมมีจุดทำให้หายใจไม่ออกซึ่งทุกสีติดกัน วิธีการหนึ่งที่สามารถช่วยให้คุณถ้าคุณสามารถสร้างกราฟถ้อยคำเป็นกราฟสีปัญหา - มีห้องสมุดที่อาจช่วยให้คุณ - ตัวอย่างเช่นเพิ่ม :: กราฟใน C

สำหรับกรณีที่คุณไม่ทราบล่วงหน้าว่าหลายสีที่แตกต่างกันคุณจะต้องอัลกอริทึมที่น่าสนใจอีกเป็นขั้นตอนวิธีอัตราส่วนทองคำ

เพียงแค่เริ่มต้นด้วยสีที่คุณชื่นชอบแล้วหมุนวงล้อสีไปตามมุมทอง (137.5 °) ด้วยมุมนี้คุณจะมั่นใจได้ว่าหลังจากการหมุนวนรอบวงล้อสีของคุณสีใหม่ของคุณจะอยู่ระหว่างสีที่คุณสร้างขึ้นแล้ว

(ภาพจากวิกิพีเดีย )

ฉันได้ทดลองเล็กน้อยและพบว่าแม้กับ 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();
    })
});