Euler Path Visualizer

Interactive visualization tool for finding and displaying Eulerian paths and circuits in graphs. Implements Fleury's algorithm with step-by-step animation.

Demo

https://phuctruong-ctrl.github.io/euler-path-visualizer/

Features

• Interactive graph creation with drag-and-drop nodes
• Add and remove edges between nodes
• Step-by-step Fleury's algorithm visualization
• Support for both Eulerian paths and circuits
• Visual highlighting of traversed edges
• Algorithm explanation panel

Algorithm

This tool implements Fleury's algorithm for finding Eulerian paths:

1. Check if an Eulerian path/circuit exists (vertices must have appropriate degrees)
2. Start from a vertex with odd degree (for path) or any vertex (for circuit)
3. Follow edges, avoiding bridges unless no other option exists
4. Remove traversed edges from the graph
5. Continue until all edges are covered

Tech Stack

• JavaScript (ES6+)
• jQuery for DOM manipulation
• p5.js for graph rendering and animation
• Bootstrap 5 for UI components

Installation

Clone and open in browser:

git clone https://github.com/PhucTruong-ctrl/euler-path-visualizer.git
cd euler-path-visualizer

Open index.html in a browser, or run with a local server:

python -m http.server 8000

Access at http://localhost:8000

Project Structure

index.html      - Main entry point
Scripts/        - JavaScript files
  main.js       - Core logic
  graph.js      - Graph data structure
  algorithm.js  - Fleury's algorithm implementation
Styles/         - CSS stylesheets
Documents/      - Related documentation
Flowcharts/     - Algorithm flowcharts

Contributing

Contributions are welcome, especially for:

• Additional graph algorithms
• UI improvements
• Performance optimizations

License

MIT License