If you grew up in India (or navigated any high-stakes school system), you know this nightmare:

You finish 10th or 12th grade. Everyone tells you there are only three paths: Engineering, Medical, or Commerce .

When you search online for alternative routes, diploma options, or entrance exams, you get hit with:

5,000-word SEO blogs written solely for ad revenue.

Pushy coaching institute lead-generation forms.

Zero clarity on prerequisites, durations, or lateral entry routes.

I wanted to fix this with a single visual premise: Education and careers are trees, not essays.

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

Here is the tech breakdown, the design decisions, and the hardest D3 layout bugs I had to solve.

The Tech Stack

I deliberately avoided heavy frameworks (React/Next.js) for this project:

Engine: Custom Vanilla JavaScript (ES6+)

Graph & Hierarchy Layout: D3.js ( d3-org-chart +…