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 values for each item in the hierarchy (using my sum_by_level node), you can show the relative size of each division (relative sales, relative headcount, etc.). 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.
• 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.
• Labels. A list of labels for each item. This list is OPTIONAL. If no labels are provided, none will be drawn. The list of labels will be sized to match the number of items in the hierarchy; if too many labels are input, the excess will be ignored, if too few, missing labels will be shown as question marks.
• Values. A list of numbers used to size each subdivision. The numbers at each level of the hierarchy define the relative proportions of each cell (the width of each column or height of each row). This list is OPTIONAL. If no values are provided, the map will size each subdivision at each level 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 a light gray. The list of colors will be sized to match the number of items in the hierarchy; if too many colors are input, the excess will be ignored, if too few, missing values will be replaced with a light gray.
• Font Name. The font to be used for the labels (if labels are provided).
• Horizontal 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 takes a flat list of values and tries to divide a rectangle into proportiallly sized cells that are as close to square as possible. Treemap is not hierarchal, though you can created hierarchical tree maps with it by taking the output of a top-level treemap and using each cell as a boundary for a sub-treemap using child values that you compute yourself.

Hier_map renders an entire hierarchy in one fell swoop, up to a maximum depth (currently 12 levels). Because proportions are established independently at each level, parent values do not need to be the sum of their children; even a list of random numbers will produce a pleasing map. But if you are using real values, the map will be more accurate if the parent totals do match their children; you can easily calculate these values using my sum_by_level node: http://support.nodebox.net/discussions/show-your-work/973-sum-by-le...

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 (though this will not always be the case). So I provide the labels by doing a simple lookup. The values are created by my sum_by_level node based a value table of random numbers. Sum_by_level produces a two-column table; to retrieve the values I do a lookup of that second column (in this case sales). 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 labels, values, or colors
• 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

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, 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 either a colored rectangle path (if no labels are provided), or a geometry consisting of that rectangle 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.

Although hier_map is designed for data analysis, it can also be used to produce interesting mosaic patterns.

Enjoy!