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

d3.js, javascript, svg

Solution

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.

Problem

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?

Original source

Related problems