MCTS Visualizer - Tic-Tac-Toe

An interactive web-based visualization of the Monte Carlo Tree Search (MCTS) algorithm applied to Tic-Tac-Toe.

Features

• Play against AI: Human plays as X, AI plays as O using MCTS
• Interactive Tree Visualization: See the MCTS search tree in real-time
• Step-by-step Execution: Step through MCTS iterations one at a time
• Full Run Mode: Run complete MCTS search with configurable iteration count
• Node Details: Click on any node to see:
  • Visit count (N)
  • Win value (W)
  • Win rate percentage
  • Board state at that node
• Tree Controls: Expand/collapse nodes, zoom, and pan

How to Use

1. Open the application: Simply open index.html in a web browser (no server needed!)

2. Play the game:

   • You play as X (first move)
   • Click on any empty cell to make your move
   • After your move, the AI's turn begins

3. Visualize MCTS:

   • When it's the AI's turn, you can either:
     • Step through iterations: Click "Step (1 Iteration)" to run MCTS one iteration at a time
     • Run full search: Click "Run Full MCTS" to complete all iterations at once
   • The tree updates after each iteration showing:
     • Node size: Larger nodes = more visits
     • Node color: Green = good for AI, Red = bad for AI
     • Labels: Show move position, N (visits), W (value), and win rate

4. Explore the tree:

   • Click on any node to see detailed information
   • Use the tree controls to expand/collapse or reset zoom
   • Pan and zoom using mouse/trackpad

5. Configure MCTS:

   • Adjust "Iterations per move" to control how many iterations MCTS runs (default: 100)
   • More iterations = stronger AI but slower computation

Algorithm Details

MCTS Phases

1. Selection: Navigate tree using UCB1 formula to balance exploration vs exploitation
2. Expansion: Add a new child node to the tree
3. Simulation: Play out a random game from the new node
4. Backpropagation: Update visit counts and values back up the tree

Node Information

• N (Visits): Number of times this node was visited during MCTS
• W (Value): Cumulative value (wins - losses) from simulations
• Win Rate: (W/N normalized to 0-1) - probability of winning from this state

Technologies Used

• Vanilla JavaScript (ES6+)
• D3.js for tree visualization
• HTML5/CSS3

Files

• index.html - Main HTML structure
• styles.css - Application styling
• tic-tac-toe.js - Game logic and rules
• mcts.js - MCTS algorithm implementation
• tree-visualizer.js - D3.js tree visualization
• app.js - Main application controller

Browser Compatibility

Works in all modern browsers that support ES6 and SVG. Tested on:

• Chrome/Edge (recommended)
• Firefox
• Safari