Why I Built an Interactive Tree Visualizer for India's Entire Education System (Vanilla JS + D3)

Description and use

PathTree is an interactive tree visualizer that maps India’s education pathways, enabling users to explore degrees, exams, and vocational tracks without cluttered text.

Problem

Students in India face a confusing, text‑heavy information landscape when choosing post‑secondary paths, with long SEO blogs, pushy lead‑generation forms, and no clear mapping of prerequisites, durations, or lateral entry routes.

Outcome

PathTree delivers a smooth, sub‑second first contentful paint and 60fps panning across hundreds of nodes, solving the violent jump problem on branch expansion and reducing cognitive overload with sibling grouping and multi‑parent badges.

Workflow

• 1. User visits https://pathtree.in
• 2. The app renders a D3‑based tree of education paths
• 3. User clicks a node to expand children; anchor stabilization keeps the node fixed
• 4. User can right‑click to group sibling branches into a capsule
• 5. User sees badges indicating alternative parent paths for multi‑parent nodes

Evidence

I built PathTree — a free, lightweight, zoomable canvas that maps out degrees, competitive exams, vocational tracks, and backup branches interactively.

Source

The result? The entire tree violently jumped across the screen, throwing the user off their focal point.

Source

I implemented an anchor stabilization system that runs during the layout phase: Capture the exact screen viewport coordinates (x, y) of the clicked card right before expansion via getBoundingClientRect().

Source

To solve this, I built a Group Current Level feature: When looking at a specific branch, users can right‑click and group all other sibling branches into a compact [ 15 other paths ] summary capsule.

Source