Treemap Transform
The treemap transform recursively subdivides area into rectangles with areas proportional to each node’s associated value.
Internally, this transform processes a collection of special tree node objects generated by an upstream nest or stratify transform. The original input data object can be accessed under the data field of these tree node objects. This transform uses the d3-hierarchy library.
Example
Transform Parameters
| Property | Type | Description |
|---|---|---|
| field | Field | The data field corresponding to a numeric value for the node. The sum of values for a node and all its descendants is available on the node object as the value property. This field determines the size of a node. If unspecified, the layout will instead tally the counts of leaf nodes. |
| sort | Compare | A comparator for sorting sibling nodes. The inputs to the comparator are tree node objects, not input data objects. |
| method | String | The layout method to use. One of squarify (the default), resquarify, binary, dice, slice, or slicedice. The resquarify method will preserve relative node positions once an initial layout has been computed, even if node sizes change. |
| padding | Number | Sets both the paddingInner and paddingOuter parameters to the same value. |
| paddingInner | Number | The padding used to separate a node’s adjacent children (default 0). |
| paddingOuter | Number | The padding used to separate the edges of a parent node from its contained children (default 0). Sets the paddingTop, paddingRight, paddingBottom and paddingLeft parameters to the same value. |
| paddingTop | Number | The padding used to separate the top edge of a node from its children. |
| paddingRight | Number | The padding used to separate the right edge of a node from its children. |
| paddingBottom | Number | The padding used to separate the bottom edge of a node from its children. |
| paddingLeft | Number | The padding used to separate the left edge of a node from its children. |
| ratio | Number | The target aspect ratio for the squarify or resquarify methods. The default is the golden ratio, φ = (1 + sqrt(5)) / 2. |
| round | Boolean | Indicates if node layout values should be rounded (default false). |
| size | Number[ ] | The size of the layout, provided as a [width, height] array. |
| as | String[ ] | The output fields at which to write the layout results. The default is ["x0", "y0", "x1", "y1", "depth", "children"], where x0, y0, x1 and y1 are the starting and ending layout coordinates for each segment, depth is the tree depth, and children is the count of a node’s children in the tree. |
Usage
{
"type": "treemap",
"field": "value",
"method": "resquarify",
"ratio": 1,
"paddingInner": 0,
"paddingOuter": 2,
"size": [{"signal": "width"}, {"signal": "height"}]
}
Computes a treemap layout using a stable squarified method (resquarify), a square aspect ratio (1), and 2 pixels of outer padding between parent and child nodes. The layout is sized to use the full width and height of the view.