Changing color range in a d3 reusable donut chart depending on the number of data points

Question

Using this reusable chart as a base: http://bl.ocks.org/nnattawat/9368297

I am trying to find a way to change the color range set based on the number of arcs (size), without having to rewrite the main donut().

For example, one donuts getData size would be 2 (having the colors green and gray), and another donuts getData size would be 3 (now remove gray and change colors to green, red, and yellow).

I cannot remove the colors from donut() it seems, so I tried to find a way to maybe associate colors with specific data points, but I cannot figure that out with this template.

Edit: Specifying code changes already done.

I have 6 different getData functions, roughly as follows:

var getFirstDonutData = function () {
    var size = 2;
    var data = [firstData1, firstData2];
    var text = "";
    d3.select("#data");
    return data;
};

var getSecondDonutData = function () {
    var size = 3;
    var data = [secondData1, secondData2, secondData3];
    var text = "";
    d3.select("#data");
    return data;
};

var getThirdDonutData = function () {
    var size = 2;
    var data = [thirdData1, thirdData2];
    var text = "";
    d3.select("#data");
    return data;
};

Then 6 different of the following:

var twoPointDonut = donut()
              .$el(d3.select("#twoPointDonut "))
              .data(getFirstDonutData ())
              .render();

var threePointDonut = donut()
              .$el(d3.select("#threePointDonut "))
              .data(getSecondDonutData ())
              .render();

var otherTwoPointDonut = donut()
              .$el(d3.select("#otherTwoPointDonut "))
              .data(getThirdDonutData ())
              .render();

Answer 1

The fill of the arc is determined by the color() function on this line:

.style("fill", function(d) { return color(d.data.key); });

Instead of using a function, we can pick from an array of colors based on the index. Modify the above line to read:

.style("fill", function(d, i) { return color[i]; });

Now we need to change the list of available colors based on the number of data points (number of keys in the data object). Above the color() function, add:

var dataSize = Object.keys(getData()).length
var color = d3.scale.category20(); // This line was already here

Finally, we need to change the color variable from a function to an array. The array will vary based on the dataSize , so a switch statement works great here. Replace the color definition:

var color;

switch (dataSize) {
  case 2:
    color = ['green' , 'gray'];
    break;
  case 3:
    color = ['green', 'red', 'yellow'];
    break;
}

This will give you green and gray when there are only two datapoints; and green, red, and yellow when there are 3 data points. You can add more case s for more amounts of data points.

Everything in one JSFiddle.

With two data points:

With three data points:

---

Edit: Since you are using more than one chart and set of data on the same page, you will need to move this whole block to inside the Object.render() function:

var dataSize = Object.keys(getData()).length;
var color;

switch (dataSize) {
  case 2:
    color = ['green' , 'gray'];
    break;
  case 3:
    color = ['green', 'red', 'yellow'];
    break;
}

and then change the dataSize variable to get the length of the passed in data object's keys:

var dataSize = Object.keys(data).length;

New complete JSFiddle.