An interactive web application that visualizes AVL tree operations with step-by-step animations, showing every rebalancing step (LL, LR, RL, RR) with smooth animations, height/balance factors, and side-by-side code tracing.
- Interactive Tree Operations: Insert, delete, and search operations with real-time visualization
- Step-by-Step Animation: Watch every step of AVL tree operations with smooth 60fps animations
- Rotation Visualization: Clear visualization of all four rotation types (LL, LR, RL, RR)
- Balance Factor Display: Real-time display of height and balance factors for each node
- Code Tracing: Side-by-side pseudocode with synchronized highlighting
- Batch Operations: Insert or delete multiple values at once
- Predefined Scenarios: 20+ built-in test scenarios demonstrating different rotation cases
- Undo/Redo: Full operation history with undo/redo functionality
- Import/Export: Save and load tree states as JSON
- Dark/Light Theme: Toggle between themes with smooth transitions
- Keyboard Shortcuts: Efficient navigation with keyboard controls
- Algorithm Complexity: Real-time complexity analysis and performance metrics
- Tree Statistics: Node count, height, balance status, and operation history
- Color Legend: Visual guide for different node states and operations
- Rotation Guide: Interactive diagrams explaining each rotation type
- Node.js 18+
- npm or yarn
# Clone the repository
git clone <repository-url>
cd avl-tree-visualizer
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:5173 in your browser.
# Build the application
npm run build
# Preview the build
npm run preview- Insert: Enter a number and click "Insert" or press
Ifor quick insert - Delete: Enter a number and click "Delete" or press
Dfor quick delete - Search: Enter a number and click "Search" or press
Sfor quick search
- Play/Pause: Space bar or play button
- Step Forward/Backward: Arrow keys or step buttons
- Speed Control: Adjust animation speed from 0.25x to 2x
- Frame Scrubber: Jump to any frame in the animation
Switch to the "Batch Operations" tab to:
- Insert multiple values:
10, 20, 30, 40 - Delete multiple values from existing tree
- Test complex scenarios quickly
Switch to the "Scenarios" tab to try:
- Rotation Demos: LL, LR, RL, RR rotation examples
- Pattern Tests: Sorted input, Fibonacci sequence, zigzag patterns
- Stress Tests: Large datasets and complex operations
src/
├── avl/ # AVL tree core logic
│ ├── avl.types.ts # TypeScript type definitions
│ ├── avl.core.ts # Pure AVL tree algorithms
│ ├── avl.generator.ts # Animation frame generation
│ ├── avl.layout.ts # Tree layout and positioning
│ ├── scenarios.ts # Predefined test scenarios
│ └── __tests__/ # Unit tests
├── store/
│ └── useAvlStore.ts # Zustand state management
├── components/
│ ├── Canvas.tsx # SVG tree renderer
│ ├── Controls.tsx # Operation controls
│ ├── CodeTrace.tsx # Algorithm pseudocode panel
│ ├── Metrics.tsx # Tree statistics
│ └── Legend.tsx # Color and rotation legend
└── App.tsx # Main application component
- Frontend: React 18 + TypeScript
- State Management: Zustand
- Visualization: D3.js + SVG
- Styling: Tailwind CSS
- Build Tool: Vite
- Testing: Vitest + jsdom
The implementation follows standard AVL tree algorithms with these key features:
function updateHeight(node: AvlNode): void {
node.height = 1 + Math.max(getHeight(node.left), getHeight(node.right));
}function getBalanceFactor(node: AvlNode | null): number {
if (!node) return 0;
return getHeight(node.left) - getHeight(node.right);
}- LL (Left-Left): Right rotation when left subtree is left-heavy
- RR (Right-Right): Left rotation when right subtree is right-heavy
- LR (Left-Right): Left rotation on left child, then right rotation on node
- RL (Right-Left): Right rotation on right child, then left rotation on node
The animation system generates frames for each step:
- Traversal Frames: Show path during search
- Insertion/Deletion Frames: Highlight affected nodes
- Rebalancing Frames: Show height updates and balance factor changes
- Rotation Frames: Step-by-step rotation visualization
- Completion Frames: Final tree state
Run the comprehensive test suite:
# Run tests
npm test
# Run tests with UI
npm run test:ui
# Run tests once
npm run test:runThe test suite includes:
- ✅ 26 unit tests covering all AVL operations
- ✅ Rotation correctness verification
- ✅ Balance property maintenance
- ✅ Edge case handling
- ✅ Complex scenario testing
| Key | Action |
|---|---|
Space |
Play/Pause animation |
← |
Step backward |
→ |
Step forward |
I |
Quick insert |
D |
Quick delete |
S |
Quick search |
The application supports custom themes through Tailwind CSS variables:
:root {
--color-primary: #3b82f6;
--color-accent: #d946ef;
--color-success: #10b981;
--color-error: #ef4444;
}Adjust tree layout parameters:
const layoutConfig: LayoutConfig = {
nodeRadius: 25,
horizontalSpacing: 60,
verticalSpacing: 80,
minNodeDistance: 50,
};The application is optimized for smooth 60fps animations:
- Efficient Rendering: SVG-based rendering with D3.js optimizations
- Memory Management: Proper cleanup of animation frames and event listeners
- Tree Layout: Optimized tidy tree algorithm for large datasets
- State Management: Zustand for minimal re-renders
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- AVL tree algorithm based on Adelson-Velsky and Landis' original paper
- Tree layout algorithm inspired by the Reingold-Tilford algorithm
- Educational content structure influenced by visualgo.net
- Color scheme and design patterns from Tailwind CSS
Built with ❤️ for computer science education