D3 circle pack layout algorithm

Question

I have a visualization based on the zoomable circle pack layout example bound to a hierarchical data set.

I'm seeing an issue with the areas of circles of a given depth not being directly comparable i.e. values with a ratio of 2 don't appear to visually have areas of the same ratio.

I expect there to be some error in the packing algorithm but as the following log snippet shows it's pretty significant:

area = 708821.8424661972, value = 45888, area / d.value = 15.446780039796836, depth = 0 hiersortfilter.html:657
area = 26507.55404641439, value = 4654, area / d.value = 5.695649773617187, depth = 1 hiersortfilter.html:657
area = 26507.55404641439, value = 4654, area / d.value = 5.695649773617187, depth = 2 hiersortfilter.html:657
area = 113.6437117690809, value = 63, area / d.value = 1.8038684407790617, depth = 3 hiersortfilter.html:657
area = 113.6437117690809, value = 63, area / d.value = 1.8038684407790617, depth = 4 hiersortfilter.html:657
area = 113.6437117690809, value = 63, area / d.value = 1.8038684407790617, depth = 5 hiersortfilter.html:657
area = 0.9339196960560362, value = 1, area / d.value = 0.9339196960560362, depth = 6 hiersortfilter.html:657
area = 17.74447422506469, value = 19, area / d.value = 0.9339196960560363, depth = 6 hiersortfilter.html:657
area = 10.273116656616397, value = 11, area / d.value = 0.9339196960560361, depth = 6 hiersortfilter.html:657
area = 29.88543027379316, value = 32, area / d.value = 0.9339196960560362, depth = 6 hiersortfilter.html:657
area = 110.13198200238504, value = 58, area / d.value = 1.8988272759031903, depth = 3 hiersortfilter.html:657
area = 110.13198200238504, value = 58, area / d.value = 1.8988272759031903, depth = 4 hiersortfilter.html:657
area = 110.13198200238504, value = 58, area / d.value = 1.8988272759031903, depth = 5 hiersortfilter.html:657
area = 8.405277264504326, value = 9, area / d.value = 0.9339196960560362, depth = 6 hiersortfilter.html:657
area = 15.876634832952611, value = 17, area / d.value = 0.933919696056036, depth = 6 hiersortfilter.html:657
area = 7.47135756844829, value = 8, area / d.value = 0.9339196960560362, depth = 6 hiersortfilter.html:657
area = 11.207036352672434, value = 12, area / d.value = 0.9339196960560362, depth = 6 hiersortfilter.html:657
area = 11.207036352672434, value = 12, area / d.value = 0.9339196960560362, depth = 6 hiersortfilter.html:657
area = 2155.192321114232, value = 669, area / d.value = 3.221513185522021, depth = 3 hiersortfilter.html:657
area = 2155.192321114232, value = 669, area / d.value = 3.221513185522021, depth = 4 hiersortfilter.html:657
area = 567.0544456457064, value = 349, area / d.value = 1.6247978385263795, depth = 5 

I'm happy to dig further and try and debug but before doing so wanted to check that my understanding of the algorithm is correct i.e. the ratio of area per unit value should be ideally constant across all levels and if not at least for a given depth?

Answer 1

From the documentation:

Enclosure diagrams use containment (nesting) to represent the hierarchy. The size of each leaf node's circle reveals a quantitative dimension of each data point. The enclosing circles show the approximate cumulative size of each subtree, but note that because of wasted space there is some distortion between levels; only the leaf nodes can be compared accurately.

So your assumption does not hold.