GROUP - "Dynaminds"

Shortest Path Finder with

Dijkstra’s Algorithm
This project showcases a visual implementation of Dijkstra’s Algorithm.
It helps users find the shortest path between two nodes in a graph.
The interface is interactive, allowing real-time selection and visualization.

TEAM MEMBERS :
AKASH AINAPUR - 1MJ23CS009
AKSHAY H- 1MJ23CS011
BASAVARAJ - 1MJ23CS028
DEBADITYA DAS - 1MJ23CS044

pre e ncode d. png

Presentation Contents

1 Abstract

2 Introduction

3
Literature Survey
4
Proposed System
5

6 Advantages & Disadvantages

7 Applications

Conclusion
pre e ncode d. png
Abstract
This project presents an interactive web-based visualization of Dijkstra’s Algorithm, designed to compute the shortest path between
two nodes in a weighted graph.

Users can manually select the start and end nodes through a user-friendly interface.
The system then highlights the optimal path and displays the total distance.
It uses HTML, CSS, and JavaScript to render a dynamic and scalable graph.
The project aims to enhance conceptual understanding through visual learning..

pre e ncode d. png

Introduction to Shortest Paths
Graphs are used in many real-world problems like maps, networks, and logistics. One important task is finding the shortest path
between two points, shortest path algorithms are crucial in graph theory for efficient navigation. Dijkstra's algorithm is a popular,
greedy solution. It’s a well-known method that finds the shortest path in a graph with positive weights.

In our project, we built an interactive tool where users can choose start and end points on a graph, and the system shows the shortest
path. This makes it easier to understand how the algorithm works. It's simple, visual, and helpful for learning and exploring graph
concepts.

pre e ncode d. png

Literature Survey
Dijkstra’s Algorithm and Finding the Most Efficient
Path in a Graph
Link: https://medium.com/@domarp/dijkstras-algorithm-and-finding- Graph visualization: A guide to what it is and why it
the-most-efficient-path-in-a-graph-5c4e267375a2
matters
Link: https://linkurious.com/blog/why-graph-visualization-matters/
The article "Dijkstra’s Algorithm and Finding the Most Efficient Path in
a Graph" by Pramod Jacob provides an accessible introduction to The article "Graph visualization: A guide to what it is and why it
graph theory and the practical applications of Dijkstra’s Algorithm. It matters" from Linkurious emphasizes how graph visualization
explains how the algorithm efficiently determines the shortest path transforms data analysis by making complex relationships between
between nodes in a graph with non-negative edge weights, making it data points intuitive and accessible. By representing data as nodes
ideal for scenarios like navigation and network routing. The author and edges, it allows users to uncover patterns and insights that might
also touches upon the limitations of Dijkstra’s Algorithm, such as its remain hidden in traditional data representations. This visual approach
inability to handle negative edge weights, and briefly compares it to facilitates quicker comprehension, informed decision-making, and the
the A* algorithm, which is more efficient for certain specific discovery of new opportunities across various domains.
pathfinding tasks. Overall, the article serves as a beginner-friendly
guide to understanding the fundamentals of graph traversal and
shortest path algorithms.

pre e ncode d. png

Limitations of Existing Systems
No Shortest Path Not User-Friendly
BFS/DFS don't guarantee shortest paths in weighted graphs. Command-line tools are not user-friendly. Many existing shortest path algorithms are
Both BFS and DFS are basic traversal algorithms that do not implemented through command-line tools, which require users to input commands
account for edge weights. BFS works well for unweighted manually. This can be intimidating, especially for those without a technical background.
graphs, exploring nodes level by level, but it can miss the Command-line interfaces (CLIs) often lack intuitive visual representations or interactive
shortest path in weighted graphs. DFS, on the other hand, features, making it difficult for users to understand the process or results of the
explores paths deeply without considering edge weights, algorithm. In contrast, a graphical user interface (GUI) with interactive elements can
leading to inefficient and potentially longer paths. To find greatly enhance the user experience, allowing users to visually manipulate nodes,
the shortest path in weighted graphs, algorithms like edges, and paths, making the tool more accessible and engaging for a wider audience.
Dijkstra’s or Bellman-Ford are preferred, as they prioritize
minimizing travel cost by considering edge weights.

pre e ncode d. png

Our Proposed System
We implemented Dijkstra’s algorithm using JavaScript. The interactive canvas allows node manipulation and edge weighting. Users input start and end nodes to trigger
path calculation.

1 Frontend: HTML, CSS, JS 2 Interactive Graph 3 Data: Adjacency List

User interface and interaction. The frontend is The graph is fully interactive, allowing users to The graph is stored using an Adjacency List, which is an efficient
built using standard web technologies: HTML select the start and end nodes directly on the way to represent graphs, especially sparse ones. Each node has a
for the structure, CSS for styling, and graph, or input these values manually. After list of its neighboring nodes, along with the edge weights. This
JavaScript for functionality. These selection, users can trigger the shortest path data structure ensures that the graph can be easily traversed and
technologies enable a responsive, interactive calculation using Dijkstra’s Algorithm, and the updated as users interact with it, making it ideal for dynamic graph
experience, ensuring the tool works system will highlight the shortest path. algorithms like Dijkstra’s.
seamlessly across various devices and Additionally, users can reset the graph to start
platforms. fresh, removing previous data and nodes, and
input new values or modify the graph as
desired.

4 Algorithm: Dijkstra's
The core of the system is Dijkstra’s Algorithm, a well-known algorithm for finding the shortest path between two nodes in a weighted graph. The algorithm
works by iteratively selecting the node with the smallest tentative distance, updating its neighbors, and repeating until the shortest path is found. This approach
ensures that the system always provides the optimal path.
pre e ncode d. png
Advantages & Disadvantages
Advantages
Disadvantages

• User-friendly interface: The system provides a clean and intuitive • Dijkstra only: Currently, the system is limited to Dijkstra’s Algorithm. It
graphical interface, making it easy for users of all backgrounds to does not support other algorithms like A*, Bellman-Ford, or
interact with the graph. Even users with no programming knowledge Floyd-Warshall, which may be better suited for different use cases or
can build and explore graphs by simply clicking and dragging elements. more complex scenarios.

• Real-time visual feedback: When the shortest path is calculated, it is • Not for large graphs: The performance may degrade when dealing with
visually highlighted, offering immediate feedback. This helps users very large graphs containing hundreds or thousands of nodes and
clearly understand how changes in the graph affect the resulting path. edges. The current implementation is optimized for small to medium-

• Educates on pathfinding: The tool is ideal for learning and teaching sized graphs intended for demonstration or educational purposes.
graph algorithms, especially Dijkstra’s Algorithm. By interacting with No graph saving: Users cannot currently save or export their graph
•
the graph and seeing the algorithm’s step-by-step effect, users gain a structures for later use. Adding graph saving and loading features
could improve usability.
deeper understanding of how pathfinding works in real-time.

• Interactive zoom/pan: Users can zoom in or out and pan across the
canvas to better view and work with large or complex graphs. This
enhances usability and makes it easier to navigate through densely
populated graph areas.

pre e ncode d. png

Real-World Applications
Dijkstra's algorithm has various real-world applications. From navigation systems to network routing. Also applicable to robotics and education.
Dijkstra’s Algorithm is widely used in real-world scenarios where finding the most efficient path or route is essential. Its ability to calculate the
shortest path in a weighted graph makes it applicable across multiple domains, from technology to education.

Navigation Systems Network Routing Robotics Education

Dijkstra’s Algorithm is at the core of many GPS In computer networks, Dijkstra’s Algorithm is In robotic navigation, especially in Dijkstra’s Algorithm is widely
and mapping applications. It helps calculate the used to find the optimal path for data packets. It autonomous robots or path- used as a teaching tool in
shortest or fastest route between two locations plays a key role in routing protocols such as OSPF planning systems, Dijkstra’s computer science and
by considering distances, traffic conditions, and (Open Shortest Path First), ensuring data travels Algorithm helps robots determine mathematics courses. Its logic is
road types. Apps like Google Maps and Waze use through the most efficient path with minimal the safest or most efficient path easy to understand and
variations of this algorithm to guide users latency across routers and networks. to their destination. This is crucial implement, making it ideal for
efficiently from point A to point B. for obstacle avoidance and route introducing students to concepts
planning in environments like like graphs, weighted edges, and
warehouses, homes, or disaster algorithmic problem-solving.
zones. Interactive tools like this project
enhance that learning experience.
pre e ncode d. png
Conclusion
This project bridges the gap between theoretical understanding and visual learning by offering an interactive way to explore Dijkstra’s
Algorithm. Instead of relying solely on code or textbook explanations, users can instantly see how the shortest path is calculated. This
hands-on approach makes the algorithm easier to understand and more engaging.

By simplifying the algorithm through visual feedback and user interaction, the project enhances learning. It serves as an effective
educational tool, encouraging experimentation and making complex concepts more accessible—especially for students and beginners
in computer science.

pre e ncode d. png

THANK YOU

TEAM MEMBERS :
AKASH AINAPUR - 1MJ23CS009 AKSHAY H -
1MJ23CS011 BASAVARAJ - 1MJ23CS028
DEBADITYA DAS - 1MJ23CS044

pre e ncode d. png