|
1 | | -# Algo Viz 🔍📊 |
| 1 | +# Algo Viz 🌟 |
2 | 2 |
|
3 | | -**Algo Viz** is an interactive Algorithm Visualizer built with **React.js** to help you understand and explore core algorithmic concepts in **pathfinding**, **searching**, and **sorting**. Perfect for students, educators, and curious developers who want to see algorithms in action! |
| 3 | + |
4 | 4 |
|
5 | | -## 🚀 Live Demo |
| 5 | +Algo Viz is a web-based visualizer designed to illustrate pathfinding, searching, and sorting algorithms. Built using React.js, it provides users with an interactive experience to understand how these algorithms work through real-time animations and a clean, intuitive user interface. |
6 | 6 |
|
7 | | -👉 [Try it here](https://algo-viz-rohit.vercel.app/) |
| 7 | +## Table of Contents |
8 | 8 |
|
9 | | ---- |
| 9 | +- [Features](#features) |
| 10 | +- [Getting Started](#getting-started) |
| 11 | +- [Usage](#usage) |
| 12 | +- [Supported Algorithms](#supported-algorithms) |
| 13 | +- [Technologies Used](#technologies-used) |
| 14 | +- [Contributing](#contributing) |
| 15 | +- [License](#license) |
| 16 | +- [Contact](#contact) |
10 | 17 |
|
11 | | -## 🧠 Features |
| 18 | +## Features |
12 | 19 |
|
13 | | -### 🔷 Pathfinding Visualizer |
14 | | -Visualize classic graph traversal algorithms: |
15 | | -- ✅ Dijkstra's Algorithm |
16 | | -- ✅ Breadth-First Search (BFS) |
17 | | -- ✅ Depth-First Search (DFS) |
18 | | -- ✅ A* Search |
| 20 | +- **Interactive UI**: Users can interact with the visualizer to better understand algorithm behavior. |
| 21 | +- **Real-time Animations**: Watch algorithms in action as they process data. |
| 22 | +- **Multiple Algorithms**: Supports various pathfinding, searching, and sorting algorithms. |
| 23 | +- **User-friendly Design**: A clean interface makes navigation easy for everyone. |
| 24 | +- **Web-based**: No installation required; run it directly in your browser. |
19 | 25 |
|
20 | | -Customize: |
21 | | -- Start and End Nodes |
22 | | -- Drag & Drop Walls (Obstacles) |
23 | | -- Real-time grid updates |
| 26 | +## Getting Started |
24 | 27 |
|
25 | | -### 🔍 Searching Visualizer |
26 | | -Understand how search works in arrays: |
27 | | -- ✅ Binary Search |
28 | | -- ✅ Linear Search |
| 28 | +To get started with Algo Viz, download the latest release from the [Releases section](https://github.com/threngthan/algo-viz/releases). After downloading, extract the files and open the `index.html` file in your web browser. |
29 | 29 |
|
30 | | -Interactive: |
31 | | -- Enter a **target value** |
32 | | -- Visual feedback on array traversal |
33 | | -- Generate new random arrays |
| 30 | +### Prerequisites |
34 | 31 |
|
35 | | -### 🔢 Sorting Visualizer |
36 | | -Sorting algorithms coming soon! |
37 | | -- ✅ UI Ready |
38 | | -- 🚧 Algorithm animations in progress |
39 | | -- Random array generation button included |
| 32 | +- A modern web browser (Chrome, Firefox, Safari, etc.) |
| 33 | +- Basic understanding of algorithms (optional but helpful) |
40 | 34 |
|
41 | | ---- |
| 35 | +## Usage |
42 | 36 |
|
43 | | -## 🖼️ Screenshots |
| 37 | +Once you have the application open, you can choose from various algorithms. Each algorithm has a brief description, and you can initiate the visualization by clicking the corresponding button. |
44 | 38 |
|
45 | | -### PathFinder |
46 | | - |
| 39 | +### Steps to Use |
47 | 40 |
|
48 | | -### Searching |
49 | | - |
| 41 | +1. **Select an Algorithm**: Choose from pathfinding, searching, or sorting algorithms. |
| 42 | +2. **Input Data**: If required, input your data into the provided fields. |
| 43 | +3. **Start Visualization**: Click the "Visualize" button to see the algorithm in action. |
| 44 | +4. **Pause/Resume**: You can pause or resume the visualization at any time. |
| 45 | +5. **Reset**: Click the reset button to start over. |
50 | 46 |
|
51 | | -### Sorting |
52 | | - |
| 47 | +## Supported Algorithms |
53 | 48 |
|
54 | | ---- |
| 49 | +Algo Viz currently supports the following algorithms: |
55 | 50 |
|
56 | | -## 🛠️ Tech Stack |
| 51 | +### Pathfinding Algorithms |
57 | 52 |
|
58 | | -- ⚛️ React.js |
59 | | -- 💅 Tailwind CSS |
60 | | -- 📦 JavaScript (ES6+) |
61 | | -- 🌐 Hosted on Vercel |
| 53 | +- **A* Search**: A popular algorithm for finding the shortest path. |
| 54 | +- **Dijkstra's Algorithm**: An efficient method for finding the shortest paths in a graph. |
| 55 | +- **Breadth-First Search (BFS)**: Explores all neighbors at the present depth prior to moving on to nodes at the next depth level. |
| 56 | +- **Depth-First Search (DFS)**: Explores as far as possible along each branch before backtracking. |
62 | 57 |
|
63 | | ---- |
| 58 | +### Searching Algorithms |
64 | 59 |
|
65 | | -## 📁 Getting Started |
| 60 | +- **Linear Search**: A simple search algorithm that checks every element. |
| 61 | +- **Binary Search**: Efficiently finds an item in a sorted array. |
66 | 62 |
|
67 | | -### Prerequisites |
| 63 | +### Sorting Algorithms |
| 64 | + |
| 65 | +- **Bubble Sort**: A simple sorting algorithm that repeatedly steps through the list. |
| 66 | +- **Quick Sort**: An efficient sorting algorithm that uses divide-and-conquer. |
| 67 | +- **Merge Sort**: A stable sorting algorithm that divides the array into halves. |
| 68 | + |
| 69 | +## Technologies Used |
| 70 | + |
| 71 | +- **React.js**: A JavaScript library for building user interfaces. |
| 72 | +- **HTML/CSS**: For structuring and styling the application. |
| 73 | +- **JavaScript**: For implementing the algorithms and interactivity. |
| 74 | +- **D3.js**: For creating dynamic, interactive data visualizations. |
| 75 | + |
| 76 | +## Contributing |
| 77 | + |
| 78 | +We welcome contributions to Algo Viz! If you have suggestions or improvements, please fork the repository and submit a pull request. Here’s how to contribute: |
| 79 | + |
| 80 | +1. **Fork the Repository**: Click on the "Fork" button at the top right corner. |
| 81 | +2. **Clone Your Fork**: Use `git clone <your-fork-url>` to clone your fork to your local machine. |
| 82 | +3. **Create a New Branch**: Use `git checkout -b feature-branch` to create a new branch for your feature. |
| 83 | +4. **Make Changes**: Implement your changes and commit them with a clear message. |
| 84 | +5. **Push Changes**: Push your changes to your fork using `git push origin feature-branch`. |
| 85 | +6. **Submit a Pull Request**: Go to the original repository and click on "New Pull Request." |
| 86 | + |
| 87 | +## License |
| 88 | + |
| 89 | +This project is licensed under the MIT License. Feel free to use, modify, and distribute it as you see fit. |
| 90 | + |
| 91 | +## Contact |
| 92 | + |
| 93 | +For any inquiries or feedback, please reach out to the maintainer: |
| 94 | + |
| 95 | +- **Name**: Your Name |
| 96 | +- **Email**: your.email@example.com |
| 97 | +- **GitHub**: [your-github-profile](https://github.com/your-github-profile) |
| 98 | + |
| 99 | +For the latest releases, visit the [Releases section](https://github.com/threngthan/algo-viz/releases) to download the latest version. |
| 100 | + |
| 101 | +## Acknowledgments |
| 102 | + |
| 103 | +- Thanks to the open-source community for their contributions and support. |
| 104 | +- Special thanks to the developers of the libraries used in this project. |
68 | 105 |
|
69 | | -- Node.js (v14 or higher) |
70 | | -- npm or yarn |
| 106 | +## Conclusion |
71 | 107 |
|
72 | | -### Installation |
| 108 | +Algo Viz aims to make learning algorithms engaging and accessible. By providing a visual representation, users can grasp complex concepts more easily. We hope you enjoy using Algo Viz and find it helpful in your learning journey. |
73 | 109 |
|
74 | | -```bash |
75 | | -git clone https://github.com/am-i-groot/algo-viz.git |
76 | | -cd algo-viz |
77 | | -npm install |
78 | | -npm start |
| 110 | +For the latest updates and releases, check the [Releases section](https://github.com/threngthan/algo-viz/releases). |
0 commit comments