AVL Tree Visualizer

A lightweight, interactive web-based visualizer for AVL Trees, strictly referencing the design and architecture of the RBTreeVisualizer project. This tool demonstrates the self-balancing nature of AVL trees through step-by-step animations and real-time property validation.

Features

• Interactive AVL Operations: Support for Insertion, Deletion, and Searching of nodes.
• Detailed Step-by-Step Animation:
  • Captures every micro-step of the balancing process (rotations, height updates).
  • Animation controls: Play/Pause, Previous/Next Step, and Speed adjustment (0.1x to 2.0x).
• Rich Visualization:
  • Displays Balance Factor (BF) and Height for every node.
  • Visual highlighting: Unbalanced nodes ($|BF| > 1$) are highlighted with a red border during rebalancing.
  • Smooth transitions using Ease-In-Out Cubic interpolation.
• Independent Property Validation:
  • Real-time tracking of 4 core properties: BST Property, $|BF| \le 1$, Height Definition, and $O(\log N)$ Complexity.
• Context-Aware Logging: Logs only the sequence of the current operation to keep the UI clean and focused.
• Multi-language Support: Seamlessly switch between English and Chinese.
• Modern UI: Minimalist design with a scrollable sidebar, frosted glass effects, and responsive layout.

Project Structure

AVLTreeVisualizer/
├── index.html          # Main entry point: defines UI structure and controls
├── style.css           # Styling: modern aesthetic, layout, and scrollbar customization
├── README.md           # English documentation
├── README_ZH.md        # Chinese documentation
└── js/
    ├── avltree.js      # Core Logic: implements AVL tree algorithms and snapshot mechanism
    ├── visualizer.js    # Visual Engine: handles Canvas rendering and coordinate animations
    ├── main.js         # Controller: bridges UI events, tree logic, and visual updates
    └── i18n.js         # Localization: dictionary and UI string management

File Descriptions

• js/avltree.js: Contains the AVLNode and AVLTree classes. It manages the recursive insertion/deletion logic and generates "snapshots" of the tree state at each critical step for the animation engine.
• js/visualizer.js: Uses the HTML5 Canvas API to draw the tree. It calculates optimal node positions and implements a linear interpolation (Lerp) engine with easing functions for smooth node movement during rotations.
• js/main.js: The central coordinator. It handles DOM events, manages the auto-play timer, updates the log panel, and validates AVL properties for the current state.
• js/i18n.js: Manages all text content in the application, supporting dynamic language switching without page reloads.

Core AVL Logic

The visualizer specifically demonstrates the four rotation cases used to maintain balance:

• LL (Left-Left): Single Right Rotation.
• RR (Right-Right): Single Left Rotation.
• LR (Left-Right): Left Rotation followed by Right Rotation.
• RL (Right-Left): Right Rotation followed by Left Rotation.

How to Run

1. Clone or download this repository.
2. Open index.html in any modern web browser (Chrome, Firefox, Safari, Edge).
3. No server or build process is required.

Credits

Strictly referencing the architecture and visual style of RBTreeVisualizer.

© 2026 AVLTreeVisualizer