Sunburst
A radial space filling tree visualization.
Inspired by
Sunburst http://www.cc.gatech.edu/gvu/ii/sunburst/.
Note
This visualization was built and engineered from scratch, taking only the paper as inspiration, and only shares some features with the visualization described in the paper.
Implements
All Loader methods
Constructor Options
Inherits options from
Additionally, there are other parameters and some default values changed
| interpolation | (string) Default’s linear. Describes the way nodes are interpolated. Possible values are ‘linear’ and ‘polar’. |
| levelDistance | (number) Default’s 100. The distance between levels of the tree. |
| Node.type | Described in Options.Node. Default’s to multipie. |
| Node.height | Described in Options.Node. Default’s 0. |
| Edge.type | Described in Options.Edge. Default’s none. |
| Label.textAlign | Described in Options.Label. Default’s start. |
| Label.textBaseline | Described in Options.Label. Default’s middle. |
Instance Properties
Summary
| Functions | |
| refresh | Computes positions and plots the tree. |
| rotate | Rotates the graph so that the selected node is horizontal on the right. |
| rotateAngle | Rotates the graph of an angle theta. |
| plot | Plots the Sunburst. |
refresh
Computes positions and plots the tree.
rotate
| rotate: function( | node, | | method, | | opt | ) |
|
Rotates the graph so that the selected node is horizontal on the right.
Parameters
| node | (object) A Graph.Node. |
| method | (string) Whether to perform an animation or just replot the graph. Possible values are “replot” or “animate”. |
| opt | (object) Configuration options merged with this visualization configuration options. |
See also
Sunburst.rotateAngle
rotateAngle
| rotateAngle: function( | theta, | | method, | | opt | ) |
|
Rotates the graph of an angle theta.
Parameters
| node | (object) A Graph.Node. |
| method | (string) Whether to perform an animation or just replot the graph. Possible values are “replot” or “animate”. |
| opt | (object) Configuration options merged with this visualization configuration options. |
See also
Sunburst.rotate
plot
Plots the Sunburst. This is a shortcut to fx.plot.
Sunburst.Plot.NodeTypes
This class contains a list of Graph.Node built-in types. Node types implemented are ‘none’, ‘pie’, ‘multipie’, ‘gradient-pie’ and ‘gradient-multipie’.
You can add your custom node types, customizing your visualization to the extreme.
Example
Sunburst.Plot.NodeTypes.implement({
'mySpecialType': {
'render': function(node, canvas) {
//print your custom node to canvas
},
//optional
'contains': function(node, pos) {
//return true if pos is inside the node or false otherwise
}
}
});
Sunburst.Plot.EdgeTypes
This class contains a list of Graph.Adjacence built-in types. Edge types implemented are ‘none’, ‘line’ and ‘arrow’.
You can add your custom edge types, customizing your visualization to the extreme.
Example
Sunburst.Plot.EdgeTypes.implement({
'mySpecialType': {
'render': function(adj, canvas) {
//print your custom edge to canvas
},
//optional
'contains': function(adj, pos) {
//return true if pos is inside the arc or false otherwise
}
}
});
