I have always wanted to build a pathfinding visualizer that animates algorithms (I made a sorting visualizer some time ago). Recently, I have just started my Data structure & Algorithm class as a computer science student. So today, after watching this YouTube video on Dijkstra's algorithm, I decided to wait no longer and just start building a simple version of the pathfinding visualization.
In the process I was able to revisit the following concepts:
- CSS & HTML
- CSS flexbox (for centering stuff)
- CSS grid (to create the 10x10 grid)
- querySelector & querySelectorAll (for selecting DOM elements)
- setTimeout (to create animation effect)
- createElement, getAttribute, setAttribute, appendChild (for modifying the DOM)
- I wrote the code based on the video explanation of Dijkstra's algorithm, I am not 100% sure it is doing the right thing.
After some polishing to make it look better (in fact it took me quite some time 😂 to add in relevant CSS for this to be mobile friendly), you can see it in action on Codepen. Feel free to check out the codebase in my Github Repo.
There are many things to be done for this. Just to name a few:
- Allow users to pick start/end points.
- Better visuals to convey the weight/difficulty between two nodes.
- Add in more algorithms (DFS, BFS, etc). I might do a part two for this when I am done with some of the above.
If you like reading this, please give it a like so that more people can see it.😄