HTML Canvas Generic Tree Visualizer

This project is a simple, interactive generic tree visualizer built with HTML, CSS, and JavaScript using the HTML5 Canvas API. It allows you to pan and zoom around a dynamically generated tree structure.

Features

• Interactive Panning: Click and drag to move the canvas view.
• Zooming: Use the mouse wheel to zoom in and out, centered on the mouse position.
• Dynamic Tree Rendering: The tree structure is rendered and updated in real time.

Getting Started

1. Clone the repository:

   git clone https://github.com/mohanad-80/html-canvas-tree-visualizer.git
   cd html-canvas-tree-visualizer

2. Open index.html in your browser.

No build steps or dependencies are required.

File Structure

• index.html – Main HTML file.
• style.css – Basic styling for the canvas.
• script.js – All logic for rendering and interacting with the tree.

Customization

You can modify the tree structure by editing the test data in the Tree class constructor in script.js.

License

This project is licensed under the MIT License. See LICENSE for details.

---

Feel free to contribute or use this code in your own projects!