Hier_Map Node
NOTE: This node has been updated. I removed the original post and replaced it with this one....
The next in my series of hierarchy nodes...
Hier_map turns a hierarchy into a rectangular map. It does this by dividing a rectangle vertically into columns, one for each top level item, then each of those columns into rows, each of those rows into columns, etc. You can also divide horizontally first if you want.
The result is a rectangular visualization of the subdivisions within a hierarchy. The very same hierarchy used to create an org chart with my hier_chart node, can feed this node. By providing numerical values for each leaf node in the hierarchy you can show the relative size of each division (relative sales, relative headcount, etc.), subtotals for higher levels will be calculated automatically. You can color each leaf in the hierarchy to provide another dimension of information.
Hier_map take seven parameters:
- Hierarchy. A data table of the hierarchical structure supplied by my hierarchy node. The hierarchy item column must contain labels (strings) identifying each node in the hierarchy.
- Colorized Boundary. A colorized rectangle. The rectangle provides the size and dimensions of the map. Its strokeColor and strokeWidth determine the color and thickness of the lines around each subdivision.
- Value Table. A two-column table containing the labels of the leaves in the hierarchy and, for each one, a positive numerical value (e.g. sales). These values will be used to proportionally size the cells; subtotals for parent cells will be calculated automatically. The value table is OPTIONAL. If not provided the cells at each level will be sized equally. The list of values will be sized to match the number of items in the hierarchy; if too many values are input, the excess will be ignored, if too few, missing values will be replaced with 1s.
- Colors. A list of colors for each item. Colors should be provided for every item in standard depth-first order, for parents as well as leaves (even though parent colors will not be visible in the final map). This list is OPTIONAL. If no colors are provided, all cells will be colored black. The list of colors will be sized to match the number of items in the hierarchy.
- Maximum Level. The maximum level of detail to be shown, from 0 to 12. Any value equal or greater than the total number of levels in the hierarchy will show the full tree with all the leaves. Lessor values will show only subtotals at that level.
- Font Name. The font to be used for the labels (if labels are provided).
- Rows First. If checked, the boundary rectangle will divided horizontally into rows for the first level of the hierarchy, then columns, then rows, etc. If left unchecked, the boundary rectangle will first be divided vertically into columns.
The output of hier_map is similar to my tree_map node. The difference is that treemap is not hierarchical; it takes a flat list of values and tries to divide a rectangle into proportionally sized cells that are as close to square as possible. Hier_map renders an entire hierarchy in one fell swoop, up to a maximum depth (currently 12 levels), and shows proportionally sized cells at any desired level of detail.
The demo shows a hierarchical map that corresponds to the org chart featured in my hier_chart demo.
That hierarchy already contains labels for each item. I create the value table by combining the label lookups from a leaves node with random numbers for the values. The colors are a random shuffle taken from my werner_color node; I provide the entire list and hier_map takes only as many as it needs.
You can see countless variations by plying with the demo settings:
- Change the width and height of the boundary rectangle to resize the map
- Change the rectangle's colorize node to change the color and thickness of the subdivision lines.
- Remove the value table or colors inputs
- Change the seed in the random_numbers node on the top left to create different values, thus resizing all the cells
- Change the seed in the shuffle1 node to try different color combinations
- Change the font for the labels
- Check the Horizontal first checkbox to see how the layout changes
- Lower the maximum level from 4 (all the leaves) to see proportions based on subtotals for each level
If you want to do further manipulations to the output of hier_map, be aware that a path or geometry is created for every item in the hierarchy at the indicated maximum level, both parents and leaves. Parent items will produce transparent rectangle paths with the same stroke color and thickness as the colorized boundary. Each leaf in the hierarchy will produce geometry containing a colored rectangle path plus the textpath of its label. Labels are colored to contrast with their cell color; dark cells will have light cream-colored labels; light cells will have dark gray labels. If you wish to remove or change the default labels, you can do this by ungrouping and modifying each geometry.
Note: a margin node, hidden inside the hier_map node, can add extra padding around each cell. I did not find this terribly useful, so did not surface this feature. However, it might be useful in animations and could be published if needed.
Although hier_map is designed for data analysis, it can also be used to produce interesting mosaic patterns.
Enjoy!
-
hier_map_screenshot.png
503 KB
- hier_map_demo.ndbx.zip 85.7 KB
Keyboard shortcuts
Generic
| ? | Show this help |
|---|---|
| ESC | Blurs the current field |
Comment Form
| r | Focus the comment reply box |
|---|---|
| ^ + ↩ | Submit the comment |
You can use Command ⌘ instead of Control ^ on Mac