Welcome to TreeTrav.bin! This project is an interactive, web-based tool designed to help visualize how binary trees are constructed and traversed. It provides a clear, hands-on way to understand fundamental tree traversal algorithms: Pre-order, In-order, and Post-order.
I built this project to turn an abstract and often complex data structure into something tangible and intuitive. The goal was to create an educational tool that is not only functional but also enjoyable to use. By allowing users to generate trees and see the traversal paths in real-time, I hope to make these core computer science concepts more accessible and easier to grasp.
Here are some of the cool things this project can do:
- Interactive Canvas: The binary tree is rendered on an HTML5 canvas that you can pan and zoom, allowing you to inspect trees of different sizes with ease.
- Custom Tree Generation: Generate a perfect binary tree by specifying the number of levels (from 1 to 5).
- Randomized Trees: Instantly create a random binary tree with random node values for varied traversal examples.
- Live Traversal Results: See the Pre-order, In-order, and Post-order traversal sequences updated in real-time as you generate new trees.
- Dynamic Light/Dark Theme: A sleek theme toggle that adapts to your system preference and saves your choice for future sessions.
- Responsive Design: A clean and modern interface that works beautifully across all devices.
Getting this project up and running is as simple as it gets. No complex builds or dependencies needed!
-
Clone the repository
git clone [https://github.com/cikeyz/treetrav-bin.git](https://github.com/cikeyz/treetrav-bin.git) cd treetrav-bin -
Open in your browser
- Simply open the
index.htmlfile in any modern web browser.
- Simply open the
And that's it! You're ready to start visualizing.
Using the visualizer is simple and interactive:
- To Generate a Tree: Enter the desired number of levels (1-5) into the input box and click the "Generate Tree" button.
- To Generate a Random Tree: Click the "Random Tree" button to create a new tree with a random number of levels and random node values.
- To Navigate the Canvas:
- Pan: Click and drag on the canvas to move the tree around.
- Zoom: Use your mouse wheel to zoom in and out.
- To Change the Theme: Use the theme toggle button to switch between light and dark modes.
This project was built with a focus on fundamentals and a clean, vanilla implementation.
- Frontend: HTML5, CSS3, and modern JavaScript (ES6+)
- Core Logic: A
BinaryTreeVisualizerclass that handles tree creation, canvas rendering, user interactions (pan/zoom), and traversal algorithms. - Rendering: HTML5 Canvas API for drawing the tree nodes and connections.
- Styling: Custom CSS variables for dynamic theming.
- Storage: Browser LocalStorage for persisting the user's theme preference.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Found a bug? Don't worry, we all create them. Just open an issue and I'll take a look!
This project is distributed under the MIT License. See the LICENSE file for more information. It's pretty permissive, so you can do almost anything you want with it.
Carl Kristian (CK) Ortiz
- GitHub: @cikeyz
- LinkedIn: ck-ortiz
- Email: [email protected]