Graph Traversal Visualizer (DFS/BFS) – Python Desktop App

 

Graph Traversal Visualizer (DFS/BFS) – Python Desktop App

Project Type: Desktop Application
Language Used: Python
Topic Covered: Graph Traversal (DFS & BFS)
Libraries Used: Tkinter (for GUI)
Suitable For: BCA, MCA, Engineering, and Data Structures students

📘 Introduction

In this project, we’ll build a Graph Traversal Visualizer that helps you understand how DFS (Depth-First Search) and BFS (Breadth-First Search) algorithms work step by step.

This Python desktop app lets users create nodes and edges visually, then observe traversal animations on the canvas.
It’s a perfect project for students learning Discrete Structures, Graph Theory, and Algorithms.

🧩 Project Features

✅ Add and name graph nodes interactively
✅ Connect edges between nodes by clicking
✅ Choose to visualize DFS or BFS
✅ Animated traversal — watch how each node is visited
✅ Option to reset and rebuild a new graph
✅ Clean and minimal user interface built with Tkinter

⚙️ Requirements

Before running this project, make sure you have:

🖥 Software:

  • Python 3.8 or later

  • Any code editor (VS Code, PyCharm, or IDLE)

📦 Python Libraries:

This project only requires the Tkinter library, which comes pre-installed with Python.
If not available, you can install it using:

pip install tk

💻 How to Set Up the Project

Step 1: Create a new Python file

Save a new file as:

graph_traversal_visualizer.py

Step 2: Copy the code below

Paste the following full code into your file 👇

import tkinter as tk
from tkinter import messagebox
import time

class GraphTraversalApp:
    def __init__(self, root):
        self.root = root
        self.root.title("Graph Traversal Visualizer (DFS & BFS)")
        self.root.geometry("900x600")
        self.root.configure(bg="#f7f7f7")

        self.canvas = tk.Canvas(self.root, width=700, height=550, bg="white")
        self.canvas.pack(side=tk.LEFT, padx=10, pady=10)

        frame = tk.Frame(self.root, bg="#f7f7f7")
        frame.pack(side=tk.RIGHT, fill=tk.Y, padx=10, pady=10)

        # Data
        self.nodes = []
        self.edges = {}
        self.selected_node = None

        # Buttons
        tk.Label(frame, text="Graph Controls", bg="#f7f7f7", font=("Arial", 14, "bold")).pack(pady=10)
        tk.Button(frame, text="Add Node", command=self.add_node_mode, width=20).pack(pady=5)
        tk.Button(frame, text="Add Edge", command=self.add_edge_mode, width=20).pack(pady=5)
        tk.Button(frame, text="Run DFS", command=self.run_dfs, width=20).pack(pady=5)
        tk.Button(frame, text="Run BFS", command=self.run_bfs, width=20).pack(pady=5)
        tk.Button(frame, text="Reset", command=self.reset, width=20).pack(pady=5)

        self.mode = None
        self.canvas.bind("<Button-1>", self.on_canvas_click)

        self.info_label = tk.Label(frame, text="", bg="#f7f7f7", fg="blue", font=("Arial", 10))
        self.info_label.pack(pady=20)

    def add_node_mode(self):
        self.mode = "node"
        self.info_label.config(text="Click on canvas to add a node")

    def add_edge_mode(self):
        self.mode = "edge"
        self.info_label.config(text="Click two nodes to connect an edge")

    def on_canvas_click(self, event):
        if self.mode == "node":
            node_id = len(self.nodes)
            self.nodes.append((event.x, event.y))
            self.edges[node_id] = []
            self.canvas.create_oval(event.x - 20, event.y - 20, event.x + 20, event.y + 20, fill="#a8dadc")
            self.canvas.create_text(event.x, event.y, text=str(node_id), font=("Arial", 12, "bold"))
        elif self.mode == "edge":
            clicked = self.get_clicked_node(event.x, event.y)
            if clicked is not None:
                if self.selected_node is None:
                    self.selected_node = clicked
                    self.highlight_node(clicked, "yellow")
                else:
                    n1, n2 = self.selected_node, clicked
                    if n1 != n2 and n2 not in self.edges[n1]:
                        self.edges[n1].append(n2)
                        self.edges[n2].append(n1)
                        self.draw_edge(n1, n2)
                    self.highlight_node(self.selected_node, "#a8dadc")
                    self.selected_node = None

    def draw_edge(self, n1, n2):
        x1, y1 = self.nodes[n1]
        x2, y2 = self.nodes[n2]
        self.canvas.create_line(x1, y1, x2, y2, fill="black", width=2)

    def highlight_node(self, node, color):
        x, y = self.nodes[node]
        self.canvas.create_oval(x - 20, y - 20, x + 20, y + 20, fill=color)
        self.canvas.create_text(x, y, text=str(node), font=("Arial", 12, "bold"))

    def get_clicked_node(self, x, y):
        for i, (nx, ny) in enumerate(self.nodes):
            if (nx - x) ** 2 + (ny - y) ** 2 <= 400:  # within radius 20
                return i
        return None

    def reset(self):
        self.canvas.delete("all")
        self.nodes.clear()
        self.edges.clear()
        self.selected_node = None
        self.mode = None
        self.info_label.config(text="Graph cleared")

    def run_dfs(self):
        if not self.nodes:
            messagebox.showwarning("Warning", "Add some nodes first!")
            return
        start = 0
        visited = set()
        self.info_label.config(text="Running DFS...")
        self.dfs_visual(start, visited)
        self.info_label.config(text="DFS Complete!")

    def dfs_visual(self, node, visited):
        visited.add(node)
        self.highlight_node(node, "#ffb703")
        self.root.update()
        time.sleep(0.5)
        for neighbor in self.edges[node]:
            if neighbor not in visited:
                self.dfs_visual(neighbor, visited)
        self.highlight_node(node, "#219ebc")
        self.root.update()

    def run_bfs(self):
        if not self.nodes:
            messagebox.showwarning("Warning", "Add some nodes first!")
            return
        start = 0
        visited = {start}
        queue = [start]
        self.info_label.config(text="Running BFS...")
        while queue:
            current = queue.pop(0)
            self.highlight_node(current, "#ffafcc")
            self.root.update()
            time.sleep(0.5)
            for neighbor in self.edges[current]:
                if neighbor not in visited:
                    visited.add(neighbor)
                    queue.append(neighbor)
        self.info_label.config(text="BFS Complete!")

if __name__ == "__main__":
    root = tk.Tk()
    app = GraphTraversalApp(root)
    root.mainloop()

▶️ How to Run

Once you’ve saved the file, open your terminal or command prompt and type:

python graph_traversal_visualizer.py

This will open a new desktop window.

🕹️ How to Use

  1. Click "Add Node" → then click on the canvas to create nodes (0, 1, 2...).

  2. Click "Add Edge" → click two nodes to connect them.

  3. Click "Run DFS" → watch the Depth-First traversal animation.

  4. Click "Run BFS" → watch the Breadth-First traversal animation.

  5. Click "Reset" → clears the entire canvas and starts fresh.

Each traversal step changes node color, helping you visualize how DFS explores depth-wise and BFS explores level-wise.

🧠 What You’ll Learn

  • Practical understanding of DFS and BFS

  • Adjacency list representation of graphs

  • How to use recursion (DFS) and queue (BFS)

  • How to create interactive GUI applications using Tkinter

  • How to combine algorithm visualization with GUI programming

🚀 Future Improvements

Here are a few ideas to expand this project:

  • Add a text box to choose starting node

  • Add weighted edges and implement Dijkstra’s algorithm

  • Display visited order in a side panel

  • Add speed control (fast/slow animation)

  • Allow users to save and load graphs

🏁 Conclusion

This Graph Traversal Visualizer is a powerful educational project for anyone learning Discrete Structures and Algorithms.
It brings life to abstract graph traversal concepts by showing them in motion.

You can use it for:

  • College practical submissions

  • Portfolio demonstration

  • Teaching aid for graph algorithms

  • Learning tool for beginners

💬 If you like this project:

  • Share this article on your social media

  • Comment below with suggestions for new features

  • Stay tuned for the next upgrade — Dijkstra’s Shortest Path Visualizer

  • https://github.com/gagandeep44489/DiscreteStrucutreAndAlgoApp/blob/main/graph_traversal_visualizer.py

Comments

Post a Comment

Popular posts from this blog

NAND / NOR Logic Simulator: A Python Desktop App for Understanding Universal Logic Gates

  NAND / NOR Logic Simulator: A Python Desktop App for Understanding Universal Logic Gates Introduction Digital electronics and computer science are built on a small set of fundamental logic gates. Among them, NAND and NOR gates hold a special place because they are known as universal gates —any digital circuit can be constructed using only NAND or only NOR gates. Despite their importance, many learners struggle to understand how these gates work beyond memorizing truth tables. To make this concept clearer and more interactive, I built a NAND / NOR Logic Simulator , a Python-based desktop application that allows users to simulate gate behavior visually and instantly. This app focuses on learning by interaction , not rote memorization. Why NAND and NOR Gates Matter In digital systems such as: CPUs Memory units Logic controllers Embedded systems all complex operations eventually reduce to simple boolean logic. NAND and NOR gates are special because: They a...
Read more

Subset Sum Problem Visualizer Using Python (Dynamic Programming GUI Tool)

  Subset Sum Problem Visualizer Using Python (Dynamic Programming GUI Tool) Understanding dynamic programming algorithms can be difficult because they involve complex tables and intermediate calculations. One such classic problem is the Subset Sum Problem , which is widely used in computer science education and algorithm design. To make this concept easier to understand, I developed a Subset Sum Problem Visualizer using Python. This desktop application visually demonstrates how the dynamic programming solution builds the DP table step by step and determines whether a subset exists that matches a target sum. In this article, I will explain how the tool works and how it helps visualize the algorithm. What is the Subset Sum Problem? The Subset Sum Problem is a classic problem in computer science. Problem Definition Given a set of non-negative integers and a target value, determine whether there exists a subset of numbers whose sum equals the target. Example Set: 3, 34, 4,...
Read more

String Matching Algorithm Trainer (KMP & Rabin-Karp) – Python Desktop App

  String Matching Algorithm Trainer (KMP & Rabin-Karp) – Python Desktop App String matching is a fundamental concept in computer science and algorithm design . It is used in search engines, compilers, DNA sequence analysis, cybersecurity tools, and text editors. However, understanding how string matching algorithms work internally can be difficult for students because most tutorials only show final results, not the step-by-step process . To make learning easier and more interactive, I developed a Python Desktop Application called the String Matching Algorithm Trainer . This application allows users to explore and compare two powerful string matching algorithms: KMP (Knuth-Morris-Pratt) and Rabin-Karp . The tool provides a visual learning experience where users can enter text and a pattern, run the algorithms, and observe the internal operations in detail. What is the String Matching Algorithm Trainer? The String Matching Algorithm Trainer is an educational desktop appli...
Read more