GitHunt
FA

farrukh-ali-khan/route-optimization-visualizer

An interactive educational tool for visualizing **Graph Algorithms** (Dijkstra & A*) on real-world maps using **Leaflet.js**. Perfect for students, developers, and computer science enthusiasts.

๐Ÿ—บ๏ธ Data Structures Route Optimizer

An interactive educational tool for visualizing Graph Algorithms (Dijkstra & A*) on real-world maps using Leaflet.js. Perfect for students, developers, and computer science enthusiasts.

Route Optimization Screenshot

โœจ Features

๐Ÿ—บ๏ธ Interactive Map Interface

  • Add nodes by clicking on the map
  • Drag & drop markers to adjust positions
  • Connect nodes to build custom graphs
  • Real-time distance calculations using Haversine formula

โšก Algorithms Visualization

  • Dijkstra's Algorithm - Classic shortest path algorithm
  • A* Search Algorithm - Heuristic-based optimization
  • Step-by-step execution with detailed logs
  • Visual path highlighting with different colors

๐Ÿ“Š Learning Tools

  • Structured logging system (summary + detailed modes)
  • Edge distance display in real-time
  • Node adjacency list visualization
  • Auto-connect nearest neighbors feature

๐ŸŽฎ User Controls

  • Start/Goal node selection
  • Step-by-step execution mode
  • Adjustable animation speed
  • Toggle between detailed/summary logs

๐Ÿ› ๏ธ Technologies Used

  • Frontend: HTML5, CSS3, JavaScript (ES6+)
  • Mapping: Leaflet.js + OpenStreetMap
  • Algorithms: Dijkstra, A* with Priority Queue
  • Styling: CSS Grid/Flexbox, Custom CSS
  • Math: Haversine formula for distance calculation

๐Ÿ“ฆ Usage

Option 1: Run Locally

# Clone the repository
git clone https://github.com/farrukh-ali-khan/route-optimization-visualizer.git

# Navigate to project directory
cd data-structures-route-optimizer

# Open index.html in browser
open index.html