# Interactive Graph Algorithm Learning Platform

> Imagine a platform where complex graph algorithms come to life. This interactive educational tool, built with Python and Angular, offers real-time visualization of the Floyd-Warshall algorithm and the Travelling Salesman Problem (TSP). It features dynamic graph manipulation, intuitive user interface, and API integration, making learning graph algorithms engaging and accessible. Dive into algorithmic visualization with an easy-to-use interface and explore the full capabilities of this educational platform.

- **Author:** Keshav Lingala (Senior Software Engineer) — https://keshav.codes
- **Published:** November 2023
- **Project page:** https://keshav.codes/floyd-visualizer/ (screenshots and diagrams are on that page)
- **Tech:** Python, HTML, CSS, Javascript, Typescript, Angular, Jira
- **Live demo:** https://floydvisualizer.web.app/
- **Source:** https://github.com/keshavlingala/FloydSimulation/
- **Topics:** python, angular, graphs, network-visualizer, cytoscape, Angular Material, Educational Tool, Learning Tool

---

## Introduction

An interactive learning tool for complex graph algorithms. The goal went beyond an academic requirement: I wanted to blend theory with practice and build something that teaches graph algorithms more effectively than static diagrams ever could.

## The Inspiration

The project came from wanting to see theoretical concepts come to life. I led a team with diverse skills and backgrounds — not everyone was familiar with all the technologies involved — which made it a strong opportunity to combine technical leadership with hands-on development.

## Challenges and Triumphs

The main challenges were handling large datasets, optimizing application performance, and integrating external services. The most satisfying win was designing a genuinely intuitive interface for an inherently complex application — each obstacle pushed me to apply familiar concepts in new ways.

## Core Features

- Interactive graph visualization and manipulation with Cytoscape.js
- Floyd-Warshall algorithm for shortest-path finding
- Solving and visualizing the Travelling Salesman Problem (TSP)
- Dynamic graph editing (adding and removing nodes and edges)
- Integration with external APIs for real data
- Importing and exporting graph data as JSON
- An intuitive interface for interacting with complex algorithms

## Screenshots

### Floyd-Warshall Screens

*Figure: Floyd-Warshall screen 1*

<br/>

*Figure: Floyd-Warshall screen 2*

<br/>

*Figure: Floyd-Warshall screen 3*
<br/>

### Travelling Salesman Problem Screens

*Figure: TSP screen 1*

<br/>

*Figure: TSP screen 2*
<br/>

*Figure: TSP screen 3*

## Video Demo

### Floyd-Warshall Application

<iframe width="560" height="315" src="https://www.youtube.com/embed/xnEv2_aoAqU?si=g3hTxW2J0JSp-Qx_"
        title="YouTube video player" frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen></iframe>

### Travelling Salesman Problem Application

<iframe width="560" height="315" src="https://www.youtube.com/embed/TQGZJXiWaKc?si=3cCgVkADCIIp4j-i"
        title="YouTube video player" frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen></iframe>

---

From the project archive of Keshav Lingala — https://keshav.codes. Machine-readable index: https://keshav.codes/llms.txt