CODEWITHSUNDEEP
javascriptd3.js
Dinosaurius
Dinosaurius

Reputation: 8628

How to define the color of strokes

In this fiddle how can I change the color of strokes?

I tried this code, but it does not change the color:

var colors = ["#F0E5FF","#E1CCFF","#C499FF","#AC79F2","#8D4CE5","#6100E5","#C94D8C"];

var colorScaleDomain = [100, 300, 1000, 10000, 50000, 600000];

var colorScale = d3.scale.threshold()
  .domain(colorScaleDomain)
  .range(colors);

link.style("stroke", function(d){
    return colorScale(d[0].size)
});

What is wrong in my code?

Upvotes: 0

Views: 56

Answers (1)

mkaran
mkaran

Reputation: 2718

So, the problem lies in how the colorScaleDomain is chosen regarding your data "size" attribute. The way it is now, many values fall into one category, so one color is chosen. I'll try to provide a general solution, not a hardcoded scale: https://jsfiddle.net/mkaran/3adu1u2n/ , where the colorScaleDomain is calculated by creating as many equal bins as the length of your colors

var colors = ["#F0E5FF","#E1CCFF","#C499FF","#AC79F2","#8D4CE5","#6100E5","#C94D8C"];
var maxSize = d3.max(classes, function(d) { return +d.size;} );
var colorScaleDomain = [];
var bin = Math.round(maxSize/colors.length);
for(let i=0; i < colors.length; i++){
  colorScaleDomain.push(bin*i)
}
console.log(colorScaleDomain)
var colorScale = d3.scale.threshold()
  .domain(colorScaleDomain)
  .range(colors);

example of scale: [0, 3513, 7026, 10539, 14052, 17565, 21078]

If you want to group the colors differently, you could try using a different variable than size. E.g. d.imports.length which will group them differently (https://jsfiddle.net/mkaran/snec9kgf/) and so on.

Upvotes: 3

Related Questions