Circle packs as nodes of a D3 force layout

Question

Here is jsfiddle:

This is really good if you have, let's say, 2 political parties, and you want to present election results across several voting units, or similarly structured data.

However, I need to visually represents this: (5 political parties instead of 2) (please ignore all raws except "seats"; only "seats" are supposed to be visualized)

I would like to have a circle pack inside each force layout node.

For example, there should be a balloon called BC containing four smaller circles with areas proportional to 21, 12, 2, 1 (one political party didn't win any seat in BC - British Columbia), and so forth for all provinces in Canada.

Could you tell me if this is possible and/or outline code organization?

Answer 1

The strategy should be more or less: Format the data structure to reflect that hierarchy:

{
    name: 'Election Results',
    children: [
        {
            region: 'BC',
            children: [
                {party: 'Conservative', seats: 12},
                ...
            ]
        }
    ]
}

And compute the Pack Layout for this data, but don't draw any circles yet. This will give you the size for each region, in the nodes where depth === 1. Now you can compute the force layout. To avoid one region overlapping another one, you should set the charge to be proportional to the area of each region (proportional to Math.pow(d.r, 2).

Now, you can create one group for each node where depth === 1 (the regions), setting the position given by the force layout.

For each group, compute a new pack layout, setting the size of each one to twice the radius of the region. You can now create the circles in a subselection of the groups selection, giving each one the radius set by the second pack layouts. Finally, I would create a class for each party, so you can style each bubble differently. Perhaps the same should be done for the group circles.

That said, I would rather use just the bubble layout, or having a pack layout for the regions with multi-foci force layout for the party circles.