1

I have a question about the strange behavior of d3.js coloring. I want to create gradient in a pie chart and I used 2 solutions:

var data = 
[1,1,1,1,1,1,1,1,1,1,       
 1,1,1,1,1,1,1,1,1,1,
 1,1,1,1,1,1,1,1,1,1,
 1,1,1,1,1,1,1,1,1,1,
 1,1,1,1,1,1,1,1,1,1,
 1,1,1,1,1,1,1,1,1,1,
 1,1,1,1,1,1,1,1,1,1,
 1,1,1,1,1,1,1,1,1,1,
 1,1,1,1,1,1,1,1,1,1,
 1,1,1,1,1,1,1,1,1,1];


    var length = 100;
    var color = d3.scale.linear().domain([1,length])
    .interpolate(d3.interpolateHcl)
    .range([d3.rgb("#5C97C1"), d3.rgb('#FFC357')]);

// var color = d3.scale.ordinal()
//   .domain(data)
//   .range(
// ["#5C97C1", "#6199BE", "#639ABC", "#689CB9", "#6C9EB6", "#6F9FB4", "#73A1B1", "#78A3AD", "#7BA5AA", "#81A7A6",
//  "#84A8A4", "#88AAA1", "#8BAC9F", "#8FAD9C", "#93AF99", "#97B196", "#9BB393", "#9FB491", "#A2B68E", "#A8B88A", 
//  "#ABBA88", "#AFBC85", "#B2BD82", "#B7BF7F", "#BAC07D", "#BFC379", "#C3C476", "#C7C674", "#CAC871", "#CEC96E", 
//  "#D3CB6B", "#D1CB6C", "#D7CD68", "#DBCF65", "#DDCE64", "#DECE64", "#DFCE63", "#E0CD63", "#E1CD62", "#E3CC62", 
//  "#E3CC61", "#E5CC61", "#E6CB60", "#E7CB60", "#E8CB5F", "#E9CA5F", "#EACA5F", "#EBCA5E", "#ECC95E", "#EEC95D", 
//  "#EFC85D", "#F0C85C", "#F1C85C", "#F2C75B", "#F3C75B", "#F4C75A", "#F5C65A", "#F6C65A", "#F8C559", "#F9C559", 
//  "#FAC558", "#FBC458", "#FCC457", "#FDC457", "#FEC356", "#FEC256", "#FDBF57", "#FBBC58", "#FAB959", "#F9B759", 
//  "#F8B45A", "#F6B05C", "#F5AD5C", "#F3AA5D", "#F2A85E", "#F0A55F", "#EFA260", "#ED9E61", "#EC9C61", "#EB9962", 
//  "#EA9763", "#E79264", "#E69065", "#E58D66", "#E48B66", "#E38867", "#E18568", "#DF8169", "#DE7E6A", "#DC7B6B", 
//  "#DD7C6B", "#DB796C", "#D9756D", "#D8736D", "#D7706E", "#D56D6F", "#D46B70", "#D36871", "#D06272", "#CF6173"]);

Or full version here http://codepen.io/Balzzac/pen/EZGwGy?editors=1000

And I get weird behavior in the first slice and the 50th of 100 in both cases. I want to understand why and how to fix it?

enter image description here enter image description here

Мария
  • 135
  • 12
  • Even stranger, this looks to be an issue only in chrome (at least on mac). Safari and Firefox render properly – Ryan Lee Simms Feb 13 '17 at 00:06
  • I can confirm that Chrome on Ubuntu has this rendering issue, whereas Firefox does not. Strange. Maybe worth filing a bug report on the relevant d3 github page. Although note that you are using v3, whereas d3 is now v4, with some significant changes. – Andrew Guy Feb 13 '17 at 00:13
  • Can also confirm that the same issue appears when using d3 4.0, but again only on Chrome. – Andrew Guy Feb 13 '17 at 00:29

1 Answers1

2

After a bit of digging, here's what I've found.

The issue is primarily to do with the fact that the call to pie(data) does not return data in order of ascending angle. This is not an issue when you want to have your bar chart ordered largest-smallest, but in your case this is causing problems.

You can see this for yourself when you call d3.layout.pie()(data) in the console - the values are almost sorted, but with a few exceptions.

In D3 v3.0, the solution is to call .sort(null) when setting up your pie chart:

var pie = d3.layout.pie().sort(null);

If you are using D3 v4.0 (which you should!), the solution is to call .sortValue(null):

var pie = d3.pie().sortValues(null);

As an aside, the relevant changes to convert to D3 4.0 are:

<script src="https://d3js.org/d3.v4.min.js"></script>

....

var color = d3.scaleLinear().domain([1,length])
    .interpolate(d3.interpolateHcl)
    .range([d3.rgb("#5C97C1"), d3.rgb('#FFC357')]);

var arc = d3.arc()
    .outerRadius(radius)
    .innerRadius(0);

var pie = d3.pie().sortValues(null);

....

In relation to the difference between browsers, I have a suspicion it is related to different sort implementations between browsers, but not 100% sure on this.

Community
  • 1
  • 1
Andrew Guy
  • 9,310
  • 3
  • 28
  • 40