PixelOkay/Hierarchy VisualizerSTUDIO
Ready
Tools
INTERACTIVE EXPLORER

Product portfolio

Click a segment to inspect it. Double-click to drill into a group.
Select a node to inspect it.0 itemsDouble-click to drill · Esc to go up
TOTAL VALUE0
ALL NODES0
LEAF NODES0
MAX DEPTH0
TREEMAP & HIERARCHY VISUALIZER

Understand nested data in three complementary views

Upload hierarchical JSON or a simple CSV with path,value columns. Explore areas in a treemap, compare nested proportions in a sunburst, or expand a structured tree. Click an item to edit its label, value, color and parent. Export your chart as SVG or PNG and your data as JSON or CSV, all without uploading your files.

What is a treemap?

A treemap shows quantities using nested rectangles whose areas are proportional to positive values. A sunburst uses radial segments for the same hierarchy, while an expandable tree reveals the complete organization, including empty and zero-value branches. Visualizations are exploratory, not statistically inferential.

Data format and limitations

CSV accepts either path,value with slash-separated paths (e.g. Sales/Online) or a lossless flat table with id,parent_id,name,value,color. Flat CSV supports names containing slashes and preserves zero-value groups. Group totals are calculated from leaf values. Datasets are limited to 5,000 nodes and 32 levels to protect browser performance; high-density labels may be hidden visually but remain available through paged tree navigation, search and inspector. Projects are saved locally where browser storage is available—download a JSON backup before leaving the page.

Using Treemap & Hierarchy Visualizer

Import nested JSON or flat path data, explore treemap, sunburst, and tree views, reorganize nodes, and export charts or hierarchy data.

Workflow

  1. Import a supported nested JSON or flat CSV file, then confirm the hierarchy and numeric values.
  2. Search and drill into the treemap, sunburst, or tree view; reorder siblings or reparent nodes when the hierarchy needs editing.
  3. Choose an export that matches your purpose: chart image/SVG, leaf-path CSV, hierarchy-preserving flat CSV, or editable JSON.

Worked example

Import a small category hierarchy with numeric leaf values, drill into one branch in the sunburst, and move a child to a different parent. Export a leaf-path CSV for leaf rows and JSON when you need the editable hierarchy.

Limits and data handling

Group totals are derived from leaf values; unsafe aggregate totals are rejected. Imports are limited to 5,000 nodes and 32 levels, with an 8 MB input cap. The tree view paginates at 350 rows, sunburst displays at most eight levels, and PNG output is limited to 24 million pixels and 8,192 pixels per side. IndexedDB may fail or be cleared; keep JSON backups. Path CSV is leaf-only, while flat CSV preserves hierarchy and IDs.

Frequently asked questions

Do parent totals come from values entered on the parent rows?

Group areas total their leaf values. Review the hierarchy and leaf data when interpreting parent totals.

Which CSV keeps the full hierarchy?

The flat CSV preserves hierarchy and IDs. The path CSV includes leaf rows only.

Related tools