Circle Packing
Enclosure diagrams are also space-filling, using containment rather than adjacency to represent the hierarchy. As with adjacency diagrams, the size of any node in the tree is quickly revealed. Although circle packing does not use space as efficiently as a treemap, the “wasted” space effectively reveals the hierarchy. At the same time, node sizes can be rapidly compared using area judgments.
By flattening the hierarchy, the pack layout can also be used to create bubble charts.
Next: Node-Link Tree
Source
<html>
<head>
<title>Circle Packing</title>
<link type="text/css" rel="stylesheet" href="ex.css?3.2"/>
<script type="text/javascript" src="../protovis-r3.2.js"></script>
<script type="text/javascript" src="flare.js"></script>
<style type="text/css">
#fig {
width: 800px;
height: 800px;
}
</style>
</head>
<body><div id="center"><div id="fig">
<script type="text/javascript+protovis">
/* For pretty number formatting. */
var format = pv.Format.number();
var vis = new pv.Panel()
.width(796)
.height(796)
.margin(2);
var pack = vis.add(pv.Layout.Pack)
.nodes(pv.dom(flare).root("flare").nodes())
.size(function(d) d.nodeValue);
pack.node.add(pv.Dot)
.fillStyle(function(d) d.firstChild ? "rgba(31, 119, 180, .25)" : "#ff7f0e")
.title(function(d) d.nodeName + (d.firstChild ? "" : ": " + format(d.nodeValue)))
.lineWidth(1);
pack.label.add(pv.Label)
.visible(function(d) !d.firstChild)
.text(function(d) d.nodeName.substring(0, Math.sqrt(d.nodeValue) / 20));
vis.render();
</script>
</div></div></body>
</html>
Data
var flare = {
analytics: {
cluster: {
AgglomerativeCluster: 3938,
CommunityStructure: 3812,
HierarchicalCluster: 6714,
MergeEdge: 743
},
graph: {
BetweennessCentrality: 3534,
LinkDistance: 5731,
MaxFlowMinCut: 7840,
ShortestPaths: 5914,
SpanningTree: 3416
},
optimization: {
AspectRatioBanker: 7074
}
},
animate: {
Easing: 17010,
FunctionSequence: 5842,
interpolate: {
ArrayInterpolator: 1983,
ColorInterpolator: 2047,
DateInterpolator: 1375,
Interpolator: 8746,
MatrixInterpolator: 2202,
NumberInterpolator: 1382,
ObjectInterpolator: 1629,
PointInterpolator: 1675,
RectangleInterpolator: 2042
},
ISchedulable: 1041,
Parallel: 5176,
Pause: 449,
Scheduler: 5593,
Sequence: 5534,
Transition: 9201,
Transitioner: 19975,
TransitionEvent: 1116,
Tween: 6006
},
data: {
converters: {
Converters: 721,
DelimitedTextConverter: 4294,
GraphMLConverter: 9800,
IDataConverter: 1314,
JSONConverter: 2220
},
DataField: 1759,
DataSchema: 2165,
DataSet: 586,
DataSource: 3331,
DataTable: 772,
DataUtil: 3322
},
display: {
DirtySprite: 8833,
LineSprite: 1732,
RectSprite: 3623,
TextSprite: 10066
},
flex: {
FlareVis: 4116
},
physics: {
DragForce: 1082,
GravityForce: 1336,
IForce: 319,
NBodyForce: 10498,
Particle: 2822,
Simulation: 9983,
Spring: 2213,
SpringForce: 1681
},
query: {
AggregateExpression: 1616,
And: 1027,
Arithmetic: 3891,
Average: 891,
BinaryExpression: 2893,
Comparison: 5103,
CompositeExpression: 3677,
Count: 781,
DateUtil: 4141,
Distinct: 933,
Expression: 5130,
ExpressionIterator: 3617,
Fn: 3240,
If: 2732,
IsA: 2039,
Literal: 1214,
Match: 3748,
Maximum: 843,
methods: {
add: 593,
and: 330,
average: 287,
count: 277,
distinct: 292,
div: 595,
eq: 594,
fn: 460,
gt: 603,
gte: 625,
iff: 748,
isa: 461,
lt: 597,
lte: 619,
max: 283,
min: 283,
mod: 591,
mul: 603,
neq: 599,
not: 386,
or: 323,
orderby: 307,
range: 772,
select: 296,
stddev: 363,
sub: 600,
sum: 280,
update: 307,
variance: 335,
where: 299,
xor: 354,
_: 264
},
Minimum: 843,
Not: 1554,
Or: 970,
Query: 13896,
Range: 1594,
StringUtil: 4130,
Sum: 791,
Variable: 1124,
Variance: 1876,
Xor: 1101
},
scale: {
IScaleMap: 2105,
LinearScale: 1316,
LogScale: 3151,
OrdinalScale: 3770,
QuantileScale: 2435,
QuantitativeScale: 4839,
RootScale: 1756,
Scale: 4268,
ScaleType: 1821,
TimeScale: 5833
},
util: {
Arrays: 8258,
Colors: 10001,
Dates: 8217,
Displays: 12555,
Filter: 2324,
Geometry: 10993,
heap: {
FibonacciHeap: 9354,
HeapNode: 1233
},
IEvaluable: 335,
IPredicate: 383,
IValueProxy: 874,
math: {
DenseMatrix: 3165,
IMatrix: 2815,
SparseMatrix: 3366
},
Maths: 17705,
Orientation: 1486,
palette: {
ColorPalette: 6367,
Palette: 1229,
ShapePalette: 2059,
SizePalette: 2291
},
Property: 5559,
Shapes: 19118,
Sort: 6887,
Stats: 6557,
Strings: 22026
},
vis: {
axis: {
Axes: 1302,
Axis: 24593,
AxisGridLine: 652,
AxisLabel: 636,
CartesianAxes: 6703
},
controls: {
AnchorControl: 2138,
ClickControl: 3824,
Control: 1353,
ControlList: 4665,
DragControl: 2649,
ExpandControl: 2832,
HoverControl: 4896,
IControl: 763,
PanZoomControl: 5222,
SelectionControl: 7862,
TooltipControl: 8435
},
data: {
Data: 20544,
DataList: 19788,
DataSprite: 10349,
EdgeSprite: 3301,
NodeSprite: 19382,
render: {
ArrowType: 698,
EdgeRenderer: 5569,
IRenderer: 353,
ShapeRenderer: 2247
},
ScaleBinding: 11275,
Tree: 7147,
TreeBuilder: 9930
},
events: {
DataEvent: 2313,
SelectionEvent: 1880,
TooltipEvent: 1701,
VisualizationEvent: 1117
},
legend: {
Legend: 20859,
LegendItem: 4614,
LegendRange: 10530
},
operator: {
distortion: {
BifocalDistortion: 4461,
Distortion: 6314,
FisheyeDistortion: 3444
},
encoder: {
ColorEncoder: 3179,
Encoder: 4060,
PropertyEncoder: 4138,
ShapeEncoder: 1690,
SizeEncoder: 1830
},
filter: {
FisheyeTreeFilter: 5219,
GraphDistanceFilter: 3165,
VisibilityFilter: 3509
},
IOperator: 1286,
label: {
Labeler: 9956,
RadialLabeler: 3899,
StackedAreaLabeler: 3202
},
layout: {
AxisLayout: 6725,
BundledEdgeRouter: 3727,
CircleLayout: 9317,
CirclePackingLayout: 12003,
DendrogramLayout: 4853,
ForceDirectedLayout: 8411,
IcicleTreeLayout: 4864,
IndentedTreeLayout: 3174,
Layout: 7881,
NodeLinkTreeLayout: 12870,
PieLayout: 2728,
RadialTreeLayout: 12348,
RandomLayout: 870,
StackedAreaLayout: 9121,
TreeMapLayout: 9191
},
Operator: 2490,
OperatorList: 5248,
OperatorSequence: 4190,
OperatorSwitch: 2581,
SortOperator: 2023
},
Visualization: 16540
}
};