CODEWITHSUNDEEP
d3.js
user3487655
user3487655

Reputation: 11

How to size circles in pack layout correctly

I'm building a 'cluster visualization' leveraging pack layout recently to help explore some of our data. Please see the screenshot. (Looks like I can not attach a image, so I posted a dropbox link)

https://www.dropbox.com/s/pfcq6ytetv19bng/Screenshot%202015-05-27%2013.42.14.png?dl=0

This is how I did it: first, I rendered the clusters' circles using one pack layout(the light blue ones), and then I grabbed the positions of all the clusters and created all the G elements. Finally, within each G element, I rendered the children elements using a different pack layout(the colorful circles).

The reason I did it this way is: I want to separate clusters far away from each other and keep children elements of one cluster close to each other.

But, it seems the sizes of children circles in different clusters are not consistent. (all the red circles should actually have the same size, cause their values are the same). Right now, I simply sum up all the children' values to get the clusters' values.

My question is, how can I get the sizes of circles within different clusters correctly? Thank you in advance :)

Best,

Upvotes: 1

Views: 179

Answers (1)

Victor Powell
Victor Powell

Reputation: 1848

I would recommend using the layout to calculate all the circles sizes, so they're all the size. Then you can offset all of the children of the root's children to be relative to the root's children. For each root child, you can then add a <g> and scale it however you like. Here's a live demo of what I mean: http://bl.ocks.org/vicapow/3d24f96c240eeb8d14e3

enter image description here

Upvotes: 1

Related Questions