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.

Источник