{"id":13991796,"url":"https://github.com/Walker-TW/Algorithm-Visualizer","last_synced_at":"2025-07-22T14:32:15.472Z","repository":{"id":41646818,"uuid":"261815030","full_name":"Walker-TW/Algorithm-Visualizer","owner":"Walker-TW","description":"View Algorithms in the Browser! - Built with ReactJs","archived":false,"fork":false,"pushed_at":"2023-05-10T16:57:45.000Z","size":12260,"stargazers_count":183,"open_issues_count":23,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-10T14:07:05.612Z","etag":null,"topics":["algorithm","bootstrap","javascript","react","visualization"],"latest_commit_sha":null,"homepage":"https://the-algorithm-visualizer.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Walker-TW.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-05-06T16:20:04.000Z","updated_at":"2024-01-14T00:01:15.000Z","dependencies_parsed_at":"2024-01-18T03:48:38.475Z","dependency_job_id":null,"html_url":"https://github.com/Walker-TW/Algorithm-Visualizer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Walker-TW%2FAlgorithm-Visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Walker-TW%2FAlgorithm-Visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Walker-TW%2FAlgorithm-Visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Walker-TW%2FAlgorithm-Visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Walker-TW","download_url":"https://codeload.github.com/Walker-TW/Algorithm-Visualizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227123994,"owners_count":17734237,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algorithm","bootstrap","javascript","react","visualization"],"created_at":"2024-08-09T14:01:35.948Z","updated_at":"2024-11-29T12:30:47.303Z","avatar_url":"https://github.com/Walker-TW.png","language":"JavaScript","readme":"\u003ch2 align=\"center\"\u003e The Algo-Visualiser\u003c/h2\u003e\n\n\u003cdiv align=\"center\"\u003e \n\n[![JavaScript commits][javascriptcommits]](https://sourcerer.io/walker-tw)\n[![Jest][jest]](https://sourcerer.io/basselalsayed)\n[![CSS commits][csscommits]](https://sourcerer.io/walker-tw)\n[![Bootstrap commits][bootstrapcommits]](https://sourcerer.io/basselalsayed)\n[![reactJS commits][reactjscommits]](https://sourcerer.io/basselalsayed)\n[![MIT License][license-shield]][license-url]\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Walker-TW/Algorithm-Visualizer\"\u003e\n      \u003cimg src='public/readMeImage.jpeg' width=\"200\" height=\"200\" alt=\"icon\"\u003e\n  \u003c/a\u003e\n\n  \u003cp align=\"center\"\u003e\n    An interactive visualiser which demonstrates the pro's and con's of various graph solving algorithms.\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003cdiv align= \"center\"\u003e\n\n[_About The Project_](#About-The-Project) | [_Features_](#Features) | [_Getting Started_](#Getting-Started) | [_How To Use_](#How-To-Use) | [_The Algorithms_](#The-Algorithms) | [_Contact The Team_](#Contact-The-Team) | [_License_](#license)\n\nIt is deployed via Netlify [here:](https://the-algorithm-visualizer.netlify.app/)\n\n\u003c/div\u003e\n\n## About The Project\n\nThe Algo-Visualiser is a web app built in ReactJS that shows how various graph traversal algorithm work. It was built by [Bassel Al-Sayed](https://github.com/basselalsayed) and [Tom Walker](https://github.com/Walker-TW) out of a mutual wish to understand ReactJS and GPS systems and these algorithms together.\n\n## Features\n\n- Users can select a maze size (which will scale with their screen/phone size).\n- Users can select a start and end point for the maze.\n- Then add fences (obstructions for the algorithm).\n- Then one of the 5 available algorithms is chosen.\n- The algorithm is then run with the nodes searched coloured in.\n- And then shortest path (found by the selected algorithm) drawn in a new colour.\n- The grid can then be reset (keeping the fences and start/end nodes) to allow comparison of algorithms.\n- Users can view benchmarking statistics for each run of an algorithm to compare against other algorithms using the same grid.\n\n## Getting Started:\n\n1. Clone the repo by running\n\n   `git clone https://github.com/Walker-TW/Algorithm-Visualizer.git`\n\n2. Change into the cloned directory\n\n   `cd Algorithm-Visualizer`\n\n3. Install dependencies\n\n   `yarn`\n\n4. Booting the server:\n   1. For hot reload during development (or quick start):\n   - Boot the server with `yarn start`\n   - Navigate to [http://localhost:3000](http://localhost:3000) in your browser.\n     - The rendered page will update as you make changes\n     - You will also see any lint errors in the console.\n   2. To view the optimised build\n   - run `yarn build`, then\n   - Boot with `serve -s build`.\n     1. You can install serve globally with `yarn global add serve` or `npm i -g serve`, it's handy to have around.\n\n### Testing\n\n`yarn test`\n\nLaunches the test runner ([react-scripts jest](https://create-react-app.dev/docs/running-tests/) with [enzyme](https://enzymejs.github.io/enzyme/)) in the interactive watch mode.\n\nAt time of writing, jest can be buggy with coverage in watch mode so for accurate coverage run `yarn test:coverage`\n\n## The Algorithms\n\nThe algorithms demonstrated within the project are all graph traversal algorithms.\n\n### Dijkstra\n\nAn algorithm that is weighted and will always find the shortest path. Works by spreading out and determining the shortest 'distance' to the final node by adding up the traversed weights.\n\n### A\\*\n\nAn upgraded version of Dijkstra that takes the distance value of each node and combines it with a heuristic value to determine not just the distance to the finish node but the direction that it should take. Two types of heuristics are used in our project the Manhattan distance \u0026 the Euclidean distance. It will always find the shortest path when using the correct heuristic.\n\n\u003ch4\u003e\u003cins\u003e Euclidean \u003c/ins\u003e\u003c/h4\u003e\n\nAKA 'as the crow flies' is a heuristic used in most straight line mazes. It uses the Pythagorean theorem on a triangle created from the two points that you wish to get to Point A (start point) \u0026 Point B (destination).\n\n`sqrt((x2-x1)^2 + (y2-y1)^2)`\n\nHowever because our grid is only traversable on horizontal or vertical vertices using this heurtistic will NOT always give the shortest path, though it will be much faster than other heuristics.\n\n\u003ch4\u003e\u003cins\u003e Manhattan \u003c/ins\u003e\u003c/h4\u003e\n\nAKA the taxi-cab distance will only work on a grid system unlike the euclidean, this heuristic is calculated by taking the absolute values of subtracting the x \u0026 y values of two points on our triangle and then adding the result together. This allows a better relative distance.\n\n`|(x2-x1)| + |(y2-y1)|`\n\nBecause Manhattan moves only in horizontal or vertical verticies it will always find the shortest path. However it will be much slower than Euclidean so if speed is an issue (especially in huge graphs) while accurancy is not choose Euclidean.\n\n### Breadth First Search\n\nIs a graph traversal algorithm which will search all neighbour nodes (in this projects case north/east/west/south) of the main node before moving onto the next level. This will cause a spreading out effect and means that along a maze BRS will explore all diversions that it comes across. It will find the shortest path.\n\n### Depth First Search\n\nThe brother of Breadth First Search it will not explore all neighbour nodes instead exploring all along a branch before backtracking to other non-visited nodes. Depth first search is the only algorithm listed which will NOT find the shortest path.\n\n## Contact The Team\n\n\u003ch4\u003e \u003cins\u003eTom Walker \u003c/ins\u003e \u003c/h4\u003e\n\n[![LinkedIn][linkedin-shield]][linkedin-urltw]\n\u003ca href=\"https://github.com/Walker-TW\"\u003e\u003cimg src=\"https://github.com/Walker-TW/CV/blob/master/images/GitHub-120px.png\"  height=\"20\" width=\"20\"\u003e\n\u003c/a\u003e\n\n\u003ch4\u003e \u003cins\u003eBassel Al-Sayed \u003c/ins\u003e \u003c/h4\u003e\n\n[![LinkedIn][linkedin-shield]][linkedin-urlbas]\n\u003ca href=\"https://github.com/basselalsayed\"\u003e\u003cimg src=\"https://github.com/Walker-TW/CV/blob/master/images/GitHub-120px.png\"  height=\"20\" width=\"20\"\u003e\n\u003c/a\u003e\n\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n## Acknowledgements\n\nThis project was inspired by a video from Clément Mihailescu please visit his youtube channel [here](https://www.youtube.com/channel/UCaO6VoaYJv4kS-TQO_M-N_g)\n\n[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=flat-square\n[license-url]: https://github.com/Walker-TW/Algorithm-Visualizer/blob/master/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square\u0026logo=linkedin\u0026colorB=555\n[linkedin-urltw]: https://linkedin.com/in/thomas-w-walker\n[linkedin-urlbas]: https://linkedin.com/in/bsas\n[javascriptcommits]: https://img.shields.io/badge/JavaScript-yellow.svg\n[jest]: https://img.shields.io/badge/Jest-red.svg\n[csscommits]: https://img.shields.io/badge/CSS-green.svg\n[bootstrapcommits]: https://img.shields.io/badge/Bootstrap-blueviolet.svg\n[reactjscommits]: https://img.shields.io/badge/ReactJS-informational.svg\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWalker-TW%2FAlgorithm-Visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWalker-TW%2FAlgorithm-Visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWalker-TW%2FAlgorithm-Visualizer/lists"}