TSP Solver & Visualizer 2.0

An interactive web application for solving and visualizing the Traveling Salesman Problem (TSP) using multiple optimization algorithms.

Live Demo: https://www.demogng.de/tsp2/

About

This application was generated using Claude Code, Anthropic's AI-powered development assistant. The entire codebase, from initial concept to Version 2.0, was created through natural language prompts describing desired features and improvements.

What is the Traveling Salesman Problem?

The Traveling Salesman Problem is a classic optimization challenge: Given a list of cities and the distances between them, find the shortest possible route that visits each city exactly once and returns to the starting city.

Despite its simple description, TSP is NP-hard, meaning there's no known algorithm that can solve all instances efficiently as the number of cities grows. This makes it a perfect testbed for comparing optimization algorithms.

Features

Problem Setup

• Interactive Canvas: Click to add cities manually
• Random Generation: Generate random city configurations
• Geometric Patterns: Circle, Grid, Clustered, and Spiral patterns
• Classical Benchmarks: 6 famous TSPLIB instances
  • Burma14 (14 cities in Myanmar)
  • Ulysses16/22 (locations from Homer's Odyssey)
  • Eil51 (51-city Eilon instance)
  • Berlin52 (52 locations in Berlin)
  • St70 (70-city Steinberg instance)

Algorithms

Four different optimization approaches:

1. Nearest Neighbor: Greedy construction algorithm - fast but often suboptimal
2. Self-Organizing Map (SOM): Neural network with 1D ring topology that adapts to city positions
3. 2-Opt Local Search: Iteratively improves solutions by swapping edge pairs
4. Simulated Annealing: Probabilistic method that accepts worse solutions early to escape local optima

Visualization

• Real-time Animation: Watch algorithms solve step-by-step
• Adjustable Speed: Control animation delay to see details or speed up
• Solution History Graph: Track distance improvements over time
• Algorithm Annotations: Educational explanations of what's happening
• SOM Neuron Visualization: See the neural network ring adapt to cities

Comparison Mode

• Run All Algorithms: Execute all four algorithms on the same problem
• Interactive Results Table: Click any row to view that solution
• Performance Metrics: Compare distance, steps, time, and quality
• Visual Comparison: Easily switch between solutions

Mobile Support

• Responsive design works on all screen sizes
• Touch support for adding cities on mobile devices
• Proper coordinate handling for accurate placement

Technical Details

Architecture

• Single-page application using vanilla JavaScript
• Object-oriented design with modular algorithm classes
• HTML5 Canvas for rendering
• No external dependencies - pure HTML/CSS/JavaScript

Algorithm Interface

Each algorithm implements a unified step-based interface:

• constructor(cities, parameters...) - Initialize with problem instance
• step() - Execute one iteration, return {currentTour, done}

This allows for consistent animation and easy addition of new algorithms.

File Structure

• index.html - Application structure and UI elements
• styles.css - Responsive styling and layout
• app.js - Main application logic and algorithm implementations
  • TSPApp class (lines 2-957)
  • NearestNeighborAlgorithm (lines 959-1019)
  • SOMAlgorithm (lines 1021-1152)
  • TwoOptAlgorithm (lines 1154-1245)
  • SimulatedAnnealingAlgorithm (lines 1247-1327)

Usage

1. Choose or Create a Problem:

   • Select a predefined problem from the dropdown
   • Click on the canvas to add cities manually
   • Generate random cities with the "Generate" button

2. Select an Algorithm:

   • Choose from Nearest Neighbor, SOM, 2-Opt, or Simulated Annealing
   • Adjust algorithm-specific parameters

3. Solve and Watch:

   • Click "Solve" to run the algorithm
   • Use the Animation Delay slider to control visualization speed
   • Pause/Resume as needed

4. Compare Algorithms (Optional):

   • Enable "Comparison Mode"
   • Click "Solve" to run all algorithms
   • Click result rows to compare solutions visually

Development Timeline

MVP (Phase 1):

• Basic canvas interaction and city management
• Nearest Neighbor algorithm implementation
• Simple visualization

Phase 2:

• Added SOM, 2-Opt, and Simulated Annealing algorithms
• Dynamic parameter controls
• Solution history graph
• Compact layout design

Phase 3:

• Predefined problem library
• Comparison mode
• Educational annotations
• Enhanced statistics

Version 2.0:

• Classical TSPLIB benchmarks
• Help system and tooltips
• Improved UX (instant loading, smart clear/reload)
• Interactive comparison results
• Mobile touch support
• Burma14 auto-loads on startup

Credits

Built entirely with Claude Code by Anthropic through iterative prompting and refinement.

License

Feel free to use, modify, and distribute this educational project.