Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3 circle pack: setting circle colors

I try to use http://mbostock.github.com/d3/ex/bubble.html but with changed colors.

I would like to find out how the colors are set in d3.layout.pack.

like image 906
Joanne Avatar asked Jan 15 '23 22:01

Joanne


1 Answers

In the example you mentioned, the circle color is defined here:

.style("fill", function(d) { return fill(d.packageName); });

Here, d is the data, bound to the circle.
Instead of color, in this example the function passes an object (packageName attribute of d).
Each object gets own unique color assigned to it, according to selected color scale:

fill = d3.scale.category20c();

If you are happy with used criteria for coloring (packageName) and all you need is to change colors, you could change the palette (color scale):
https://github.com/mbostock/d3/wiki/Ordinal-Scales

if you want to change the coloring criteria, then you need to change the return part, replacing it with color value as a function of data d.

Here you can find D3 color constructors:
https://github.com/mbostock/d3/wiki/Colors

like image 165
alm Avatar answered Jan 21 '23 13:01

alm