Hierarchical Data Visualization (expandable tree-table)

Overview

A self-contained HTML build that renders hierarchical (nested) data as an expandable, multi-level accordion table, letting users drill down through parent/child rows with expand/collapse controls.

Why It Exists

Tree-structured datasets (categories within categories, org/line-item hierarchies) are awkward to present in a flat table. This build explored a lightweight, dependency-free way to display arbitrarily nested data with clear indentation and per-level toggling.

What We Built

A single build.html page with inline CSS and JS that builds an accordion-style table driven by data-level attributes, where non-root rows indent and expand-buttons toggle child visibility. A bundled test.json (~20KB) provides the sample nested dataset the page visualizes, alongside a small source archive.

Technologies & Approach

Pure HTML/CSS/JavaScript with no framework or build step, the fastest path to validate the interaction model. JSON drives the structure so the same renderer works for any compatible hierarchy.

Outcome / Impact

Confirmed a simple, portable pattern for visualizing nested data without pulling in a heavy table/tree library, a reusable building block for internal data tools.

Capabilities Demonstrated

• Rendering arbitrarily nested data as an expandable tree-table
• Accordion expand/collapse UX with level-based indentation
• Zero-dependency, single-file frontend building