Web Dijkstra's Canvas is a web app that allows users to draw a visual undirected weighted graph with the mouse, where weights are automatically assigned to the the edges based on their length. After drawing the graph, Dijkstra's algorithm can be applied to the graph, giving the shortest path between two given vertices.
git clone https://github.com/kyletimmermans/WebDijkstrasCanvas.git && cd WebDijkstrasCanvascd srcpython3 -m http.server- Visit localhost:8000 in your web browser (Chrome works best)
- Use right-click to place vertices, and use left-click to draw edges between them
Note: If the Shortest path that gets printed is too long and cuts off to the right of the screen, hover over the text and you'll be able to scroll to the right and see the rest of the printed path and distance
v1.0: Initial-Release
v1.1:
-Better error handling for getting shortest paths to non-existant nodes
-Added dynamic font size for larger screens
-Reset button now also removes pervious shortest path results and error messages
v1.2:
-Fixed bug where long "Shortest Paths" result would be wrap to lines below and potentially be hidden by the "Console" section
-Fixed an issue where going fullscreen or exiting fullscreen would not resize the height of elements
-Added feature where hitting 'Enter' while in the input box for specifying the shortest path acts just like clicking the "Get Shortest Path" button
-Renamed main.html to index.html
- canvas.js is a bit messy, it deals with all of the drawing to screen. However, graph.js is much cleaner and intended to be the main code which is meant to help teach and give a good example of Dijkstra's shortest path algorithm
- Using d3.js v5.9.2 and not a recent version because it has
d3.mouse(), which is not present in later versions - Also check out the original Dijkstra's Canvas which was made in Python3 and Tkinter!