Setting pie chart colors using d3.js

Question

I'm having issues setting pie slice colors using a d3.pieChart. Documentation and examples I've seen use the colors method in combination with an array of hex colors. However, setting this results in my pie chart being colored white (invisible) and every item in the legend becoming black.

I've tried using .colors with an array of five and an array of six colors but the issue persists. Could this be due to some issue with the slicesCap?

Code snippet below, but category10 burns my eyes so any advice on implementing a custom color set would be appreciated!

pie
    .slicesCap(5)
    .legend(dc.legend().gap(3))
    .colors(d3.scale.category10())

Latter

Answer 1

Just passing an array of colour values doesn't work because the .colors() function is expecting a color scale like the one created by d3.scale.category10(). Scales are functions which take input data and return a value; in this case, the returned value is one of 10 colours.

For starters, you could try one of the other d3 built-in colour scales, which don't have as extreme contrast: https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-category20

If none of those suit, you can make your own scale function with

var colorScale = d3.scale.ordinal().range([/*array of hex values */]);

pie.colors(colorScale);

You can create the array yourself or use one of the colorBrewer functions.

If you want to specify particular colours for particular values (instead of just assigning the colours to values in the order they appear) you'll need to (a) specify the domain of the scale as an array of values that matches the order of the range array, and (b) create a helper function that passes in the correct property from your data:

var colorScale = d3.scale.ordinal().domain(["banana", "cherry", "blueberry"])
                                   .range(["#eeff00", "#ff0022", "#2200ff"]);

pie.colors(function(d){ return colorScale(d.fruitType); });

Standardize

P.S. I should clarify that the colorBrewer functions aren't built-in to d3: they have to be included as a separate javascript file. For a static example, it would be easiest to use her website to figure out the hex values, and then just write them into your code as an array. – Standardize

pie.colors(function(fruitType){ return colorScale(fruitType); }); — I had better luck with that. – Emileeemili

@Emileeemili If your data consists solely of the same values used in the domain, you don't need the helper function at all. Just use pie.colors(colorScale). – Standardize

Answer 2

You can assign colors to particular values like this.

var colorScale = d3.scale.ordinal()
   .domain(["banana", "cherry", "blueberry"])
   .range(["#eeff00", "#ff0022", "#2200ff"]);

pie.colors(colorScale.range())
   .colorAccessor(function(d){ return colorScale.domain().indexOf(d.fruitType); });

This solution is a little bit hacky, but I couldn't get it to work using only chart.colorDomain, and calling a function in chart.colors seems to be throwing errors now.

Stansbury

what sort of errors are you getting? I'm trying to draw a dc.rowChart() and I get the error A negative value is not valid. ("-2") – Ngo

Answer 3

Riffing off Tayden's answer, there is slightly different syntax for newer versions of d3 (i.e. "scaleOrdinal")

var colorScale = d3.scaleOrdinal()
   .domain(["banana", "cherry", "blueberry"])
   .range(["#eeff00", "#ff0022", "#2200ff"]);

Pelagia