|
| 1 | +Learning algorithms from text and static images is quite boring. |
| 2 | + |
| 3 | +For that, there have been many great websites that view animations of various algorithms. |
| 4 | + |
| 5 | +However, for us being coders, nothing can be more comprehensible than visualizing the actual working code. |
| 6 | + |
| 7 | +So here we introduce Algorithm Visualizer. |
| 8 | + |
| 9 | +Algorithm Visualizer is an interactive online platform that visualizes algorithms from code. |
| 10 | + |
| 11 | +It offers visualization tools in various languages including JavaScript, Java, and C++. |
| 12 | + |
| 13 | +The UI of Algorithm Visualizer consists of 4 sections: toolbar, sidebar, viewer, and editor. |
| 14 | + |
| 15 | +The toolbar contains a user's profile and buttons for controlling visualization. |
| 16 | + |
| 17 | +A user can also save algorithms to GitHub Gist or share them on Facebook here. |
| 18 | + |
| 19 | +The sidebar shows a set of public algorithms, which others have contributed, in addition to a user's scratch papers. |
| 20 | + |
| 21 | +The viewer is where the actual visualization happens. |
| 22 | + |
| 23 | +It also views descriptions of algorithms. |
| 24 | + |
| 25 | +Lastly, the editor lets a user write down their own algorithms to be visualized. |
| 26 | + |
| 27 | +Algorithm Visualizer is an open source project on GitHub. |
| 28 | + |
| 29 | +The project is composed of 3 repositories named algorithms, tracers, and algorithm-visualizer. |
| 30 | + |
| 31 | +"algorithms" repository contains public algorithms shown on the sidebar. |
| 32 | + |
| 33 | +"tracers" repository contains visualization libraries written in each supported language. |
| 34 | + |
| 35 | +"algorithm-visualizer" repository contains the front-end written in React.js and the back-end written in Node.js. |
| 36 | + |
| 37 | +When the back-end compiles and runs code, the visualization library emits a change log. |
| 38 | + |
| 39 | +The back-end then passes the change log on to the front-end, and the front-end interprets and renders it step by step |
| 40 | + |
| 41 | +Visit algorithm-visualizer.org and be a part of our community. |
0 commit comments