How can I generate as many colors as I want using d3?

Question

I\'m building a pie chart using d3.js, and visualizing a big data set. There are more than 137 items to visualize on the chart. I have just 10 color

Answer 1

You can try a infinite color generator as in this code. The simplest variant would translate to:

function color_inf (n, base, saturation, lightness) {
    // base: natural number from 2 to something small (like 5)
    // saturation and lightness - numbers from 0 to 1
    var tmp = i.toString(base).split("").reverse().join("");
    var hue = 360 * parseInt(tmp, base) / Math.pow(base, tmp.length);
    return d3.hsl(hue, saturation, lightness);
}

More advanced would use changes in saturation and lightness - either some continuous decay/saturation, periodic, or in a similar way as with hue.

Nut be warned - when you use more than 20 colors, no matter how good is your scale (and infinite scale are not optimized for all number of colors), people will have problems distinguishing them (unless side by side).

Answer 2

We can use custom colors, for example you can create your own range of colors: .range(["#fff","#000","#333"]);. Here is a similar StackOverflow thread: https://stackoverflow.com/a/13013162/1848540