Re: [Help]: d3 color scales for 50 different values

[Seemant Kulleen]

Please consider d3-scale-chromatic: https://github.com/d3/d3-scale-chromatic

--

Oakland Finish Up Weekend
Be Amazed.  Be Amazing.
Get Mentored | Get Inspired | Finish Up

http://oaklandfinishup.com

On Tue, Apr 4, 2017 at 4:36 PM, datavisu <krishna...@gmail.com> wrote:

I want to have 50 different color values. How to extend the d3 library for this particular feature ?

In d3.js library, for category10, it was coded with these values,

 var d3_category10 = [ 2062260, 16744206, 2924588, 14034728, 9725885, 9197131, 14907330, 8355711, 12369186, 1556175 ]
                    .map(d3_rgbString);        

 d3.rgb = d3_rgb;

function d3_rgb(r, g, b) {
    return this instanceof d3_rgb ? void (this.r = ~~r, this.g = ~~g, this.b = ~~b) : arguments.length < 2 ? r instanceof d3_rgb ? new d3_rgb(r.r, r.g, r.b) : d3_rgb_parse("" + r, d3_rgb, d3_hsl_rgb) : new d3_rgb(r, g, b);
}
function d3_rgbNumber(value) {
    return new d3_rgb(value >> 16, value >> 8 & 255, value & 255);
}
function d3_rgbString(value) {
    return d3_rgbNumber(value) + "";
}

i tried writing custom function with d3_category50 that generates 50 different colors by having 50 different color values as d3_categor10 have. But was not successful.

Any hints ?

Thank you,

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Curran]

Greetings,

The main issue is that it's probably impossible to come up with 50 different colors that are distinguishable from one another. I've heard it said that around 20 is the maximum number of different colors you can have before they become indistinguishable.

Also, you can set the range of a color scale by passing an array of color strings, so there's no need to "extend D3" to add a category50 scheme.

      var colorScale = d3.scaleOrdinal()

        .domain(["setosa", "versicolor", "virginica"])

        .range(["#eb8e37", "#1ac6cf", "#e35dd4"]); // Just add 50 perceptually unique colors here.

An interesting read related to color: Finding the Right Color Palettes for Data Visualizations.

Best regards,

Curran

On Wednesday, April 5, 2017 at 5:23:45 AM UTC+5:30, seemantk wrote:

Please consider d3-scale-chromatic: https://github.com/d3/d3-scale-chromatic

--

Oakland Finish Up Weekend
Be Amazed.  Be Amazing.
Get Mentored | Get Inspired | Finish Up

http://oaklandfinishup.com