D3 Bubble Example: What does bubble.nodes() do?

Question

Example: http://mbostock.github.com/d3/ex/bubble.html

I'm having a hard time understanding what goes on with line 16:

.data(bubble.nodes(classes(json))

And why, or where within the classes() function, the variable classes[] gets x,y,r values defined for each of its objects. Also, bubble.nodes() doesn't appear to be an actual function?

If I add a

console.log(classes)

between lines 44 and 45 - every object inside seems to be populated with x,y,r already -- but it is not apparent why this happens.

Wiltshire

Did you look at the API reference for pack.nodes? – Afro

Yes - I did. It doesn't explain why classes inside the function has extra properties that are assigned before being based into bubble.nodes. Documentation also doesn't explain the r attribute. – Wiltshire

The r property is the node radius computed by the layout. – Afro

When - in the execution of the classes() function, are the attributes added to each of the elements in the classes[] array? – Wiltshire

Answer 1

The call to bubble.nodes() boils down to a call to d3.layout.pack().nodes() since bubble=d3.layout.pack(). The trick is that pack.nodes() is hardcoded to use the value key of the input's children (in this case all the packages) to size the nodes (add r) and determine position (add x and y).

In essence,

 var root = {"children": [
              {"packageName":"cluster","className":"AgglomerativeCluster","value":3938},
              {"packageName":"cluster","className":"CommunityStructure","value":3812},
              {"packageName":"cluster","className":"HierarchicalCluster","value":6714},
              {"packageName":"cluster","className":"MergeEdge","value":743}
         ]}; // This is an excerpt of the real data.

 var bubble = d3.layout.pack(); 

 // pack.nodes() assigns each element of "children" a r, x, and y based on value
 bubble.nodes(root); 

This tripped me up at first as well, you can see that classes() doesn't add r, x, and y since classes(root) doesn't have those attributes. krasnaya's answer touched on most of this but I felt that it needed a bit more explaining (at least it did for me).

Amidst

Answer 2

The classes() function doesn't add the attributes.. it just flattens the tree. The attributes are added inside bubble.nodes() (which is d3.layout.pack().nodes())

JSON.stringify(classes[0])
"{"packageName":"cluster","className":"AgglomerativeCluster","value":3938}"

Gard