← ~/visualizations

trees

Shows a rooted tree (connected and acyclic) with a distinguished root A. The animation cycles through non-root nodes x, highlights the unique edge from parent(x) to x, and marks leaves (no children) and the root to clarify parent-child direction.

canvasclick to interact
t=0s

practical uses

  • 01.Representing hierarchies (file systems, org charts)
  • 02.Parsing and syntax trees in compilers/interpreters
  • 03.Search structures (decision trees, game trees)

technical notes

Uses a fixed small rooted tree layout with grid-snapped, orthogonal polylines for a blocky aesthetic. Time-based cycling selects a node x every ~900ms; easing/pulsing highlights the unique parent(x) edge. Responsive scaling via scale = min(w,h)/baseSize and a faint grid background.