Sunbursts
A sunburst is an adjacency diagram: a space-filling variant of the node-link diagram. Rather than drawing a link between parent and child in the hierarchy, nodes are drawn as solid areas (either wedges or bars), and their placement relative to adjacent nodes reveals their position in the hierarchy. Because the nodes are now space-filling, we can use an angle encoding for the size of software classes and packages. This reveals an additional dimension that would be difficult to show in a node-link diagram.
Next: Icicles
Source
<html>
<head>
<title>Sunburst</title>
<link rel="stylesheet" type="text/css" href="ex.css"/>
<script type="text/javascript" src="../protovis-r3.2.js"></script>
<script type="text/javascript" src="flare.js"></script>
<style type="text/css">
#fig {
width: 900px;
margin-top: 5px;
height: 840px;
text-align: center;
}
</style>
</head>
<body><div id="center"><div id="fig">
<script type="text/javascript+protovis">
var vis = new pv.Panel()
.width(900)
.height(900)
.bottom(-80);
var partition = vis.add(pv.Layout.Partition.Fill)
.nodes(pv.dom(flare).root("flare").nodes())
.size(function(d) d.nodeValue)
.order("descending")
.orient("radial");
partition.node.add(pv.Wedge)
.fillStyle(pv.Colors.category19().by(function(d) d.parentNode && d.parentNode.nodeName))
.strokeStyle("#fff")
.lineWidth(.5);
partition.label.add(pv.Label)
.visible(function(d) d.angle * d.outerRadius >= 6);
vis.render();
/* Update the layout's size method and re-render. */
function update(method) {
switch (method) {
case "byte": partition.size(function(d) d.nodeValue); break;
case "file": partition.size(function(d) d.firstChild ? 0 : 1); break;
}
vis.render();
}
</script>
<br><b>Size:</b> <select id="menu" onchange="update(this.value)">
<option value="byte" selected>bytes</option>
<option value="file">files</option>
</select>
</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
}
};