The treemap groups Texts 40 and Notes 20 under Docs, and Photos 30 and Icons 10 under Assets. The root total is 100. Focusing Docs changes the local denominator to 60: Texts becomes 66.7% of that branch while remaining 40% of the whole inventory.
Use the worked example
Choose Docs and compare the two share columns, then choose Assets to see Photos at 75% and Icons at 25% of that branch. Edit a leaf value and choose Recalculate to update the chart and table. Zero remains a listed value with no area; a negative or missing value needs correction before results return.
Trace the result step by step
Docs derives 40 + 20 = 60; Assets derives 30 + 10 = 40; Root derives 60 + 40 = 100. The four leaves sum to 100. Adding Root and both parent totals again would count that same inventory three times.
In the full view, the diagram assigns relative space to Docs and Assets using their 60 and 40 weights. The numeric table shows each leaf’s root share as well as its local share. Use those figures for an exact comparison rather than measuring colored interiors, which include presentation spacing.
Focus Assets, denominator 40: Photos is 75% of that branch and 30% of Root; Icons is 25% of the branch and 10% of Root. Neither focus operation changes a value or the root total.
Read the focus name and subtotal beside the chart before interpreting a percentage. “Texts 66.7%” means a share of Docs, not of Root. The page shows percentages rounded to one decimal place while calculating from the underlying values. Its focus controls switch between the whole inventory, Docs, and Assets.
The full view splits the two groups horizontally, then stacks each group’s children within its portion. Within Docs, Texts has twice Notes’ weight. Within Assets, Photos has three times Icons’ weight. Focusing one group displays its leaves directly, using that group’s subtotal for their local shares.
The root shares remain 40%, 20%, 30%, and 10% when you change focus. Focus is a change in what you are comparing, not a change in the source inventory. A reader should be able to follow that distinction from the focus label and the two share columns.
The chart allocates each outer rectangle by its share before placing padded labels and visual borders inside it. Those insets do not increase a small tile’s outer allocation. Compare exact values in the table; the visible colored interior has less area after the inset.
Keep the numeric table beside the chart when discussing a small tile. Each visible leaf has its complete path, such as Docs/Texts or Assets/Photos, alongside its value and shares. A tile that is hard to label still has a readable entry in the table.
The four paths and their parent groups are fixed in this example. You can change leaf values, but cannot import a hierarchy, rename paths, or add parents. The calculator validates finite nonnegative values and finite branch and root totals; it does not provide the path, parent, and cycle checks that an arbitrary hierarchy importer would require.
Zero-valued leaves remain in the table but receive zero area. Negative and missing values need correction before results return. An entirely zero-valued branch shows “All zero: no proportional area,” and its local shares are Undefined. The other branch can still contribute to a nonzero root total.
Try changing Texts from 40 to 20 while keeping Notes at 20, Photos at 30, and Icons at 10. After Recalculate, Root is 80 and Docs is 40. Texts is now 50% of Docs and 25% of Root. All four inputs remain editable while a branch is focused, so an edit can change both the focused subtotal and the root denominator.
Copy a prompt for this example
Build one HTML treemap reading tool for four fixed leaf paths measured in the same fictional units: Docs/Texts 40, Docs/Notes 20, Assets/Photos 30, Assets/Icons 10. Derive Docs as 60, Assets as 40, and Root as 100 by adding leaves once. Do not add parent totals as extra observations.
Use four editable value fields, Recalculate, All assets, Docs, Assets, and Reset. The full view groups Docs and Assets horizontally, with their children stacked inside each group. Use an original simple proportional layout and keep exact values and percentages in a readable table; padding is a presentation inset.
Focus Docs with denominator 60: Texts is 66.7% locally and 40.0% of Root, Notes 33.3% locally and 20.0% of Root. Focus Assets with denominator 40: Photos is 75.0% locally and 30.0% of Root, Icons 25.0% locally and 10.0% of Root. Show the focused branch and denominator beside the chart.
Require finite nonnegative values. Blank or negative input removes the stale chart and results until corrected. Zero stays in the table but receives no tile area; an all-zero branch has no defined proportional shares.
Changing a value clears stale results. Reset restores all four starting values and the full view. Keep tiny-leaf information available in the table and fit both chart and controls on a narrow screen. Return one self-contained HTML file.
Compare the edited Texts value with the original before presenting your own branch shares. NOS can preview the prepared HTML treemap for that discussion. Keep the focus label and numeric table visible so a change in denominator is not mistaken for new inventory.