score:1

Accepted answer

You can use d3.scaleThreshold, docs here: https://github.com/d3/d3-scale#threshold-scales.

I used a pie chart example bl.ock from here, to get this codepen: https://codepen.io/anon/pen/Yjwryz?editors=0011, and here's the code you would be interested in:

var threshold = 0.00000000000001;
var groupDomain = [
  50 + threshold,   // Red group        x: (x <= 50)
  70 + threshold,   // Yellow group     x: (50 < x <= 70)
  90 + threshold,   // Green group      x: (70 < x <= 90)
  100               // Blue group       x: (x > 90)
];
var color = d3.scaleThreshold()
              .domain(groupDomain)
              .range(['red', 'yellow', 'green', 'blue']);
                          ...
                          ...
  .style("fill", function(d) {return color(d.data); });

Note, I added a small error threshold to the group domains you wanted since I think .scaleThreshold is set up to work up until a value in the domain, i.e. < 50 not <= 50. I'm not sure though I didn't check the docs.

Edit: Sorting the data array with '.sort' will take care of the problem you're having with unordered data:

var data = [
  100, 20, 30, 40, 50, // Red group
  55, 10, 65, 70,     // Yellow group
  75, 80, 90,         // Green group
  95, 100             // Blue group
].sort(function (a, b) { 
  return a - b
});

Updated codepen: https://codepen.io/anon/pen/Yjwryz?editors=0011

Second edit: I attempted what I believe you were referring to in your comment by grouping all of the data between the specified ranges and then basing the arc segment on the amount of data points which fall in each specified range. Here's a codepen: https://codepen.io/anon/pen/wxMNgg?editors=0010

The relevant code for this change:

var color = d3.scaleThreshold()
              .domain(groupDomain)
              .range(['red', 'yellow', 'green', 'blue']);

var groupedData = [];
data.forEach(function (e) {
  var group = color.invertExtent(color(e))[1];
      group = (group == 100) ? group : group - threshold;
  var groupIndex = groupedData.findIndex(d => d.group == group)

  if (groupIndex != -1) {
    groupedData[groupIndex].count += 1;
  } else {
    groupedData.push({
      group : group,
      count : 1
    });
  }
});

score:0

You need to group your data before creating the Pie chart

var dataByGroup = d3.nest()
  .key(function(d) { if (d<=50) return "50"; if (d<=80) return "80"; return "100"; })
  .rollup(function(v) { return v.length; })
  .entries(data);

Related Query

More Query from same tag