javascript - 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 colors using this function.

d3.scale.category10().range()

by exploring other options : https://github.com/mbostock/d3/wiki/Ordinal-Scales

d3.scale.category20().range()

var chart = nv.models.pieChart()
    .x(function(d) {
        return d.key
    })
    .y(function(d) {
        return d.y
    })
    .color(d3.scale.category10().range())
    .width(width)
    .height(height);

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

Answer 1

Update: d3v5 now includes continuous color scales, such as d3.interpolateSpectral. That's probably the simplest option.

---

I had the same problem, so I wrote a little tool to generate LOTS of perceptually-different colors: category color generator.

This tool produces a list of colors. You can then use that list like:

color = d3.scale.ordinal()
    .domain(YOUR_DATA_CATEGORIES)
    .range(["#30c514", "#9321ff", ...]);

There is also a generalised version if two lightnesses is not enough.

Here are some pre-generated example colour sets.