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

说明与用途

PathTree 是一个交互式树形可视化工具，展示印度教育路径，帮助用户在不受冗长文本干扰的情况下探索学位、考试和职业路径。

问题

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.

结果

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.

工作流

• 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

证据

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

来源

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

来源

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().

来源

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.

来源