https://github.com/subrat611/leetcode-tree-visualizer

It enables you to view the tree that corresponds to the array of test cases.
https://github.com/subrat611/leetcode-tree-visualizer

binary-tree-visualization data-structures javascript typescript vitejs

Last synced: 26 days ago
JSON representation

It enables you to view the tree that corresponds to the array of test cases.

• Host: GitHub
• URL: https://github.com/subrat611/leetcode-tree-visualizer
• Owner: subrat611
• Created: 2024-01-30T18:02:59.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-02-01T00:08:16.000Z (over 1 year ago)
• Last Synced: 2025-04-11T06:13:48.208Z (26 days ago)
• Topics: binary-tree-visualization, data-structures, javascript, typescript, vitejs
• Language: TypeScript
• Homepage: https://leetcode-tree-visualizer.vercel.app
• Size: 44.9 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Leetcode Tree Visualizer

Don't just run your test cases through your mind, visualize them instead! 😉

### Decoding characteristics of tree

- Drawing 2D tree graphics using HTML `canvas`.

### Representing/rendering node logic

- A node in canvas represents these properties `width`, `height`, `point (x,y)`, `radius`, and the node `value`.

  

  ![image](https://github.com/subrat611/leetcode-tree-visualizer/assets/77252075/555648b9-17e1-47d1-ae83-6666001b7eb3)

### Understanding canvas height and width for tree

- Height of the canvas

  ![canvas-height](https://github.com/subrat611/leetcode-tree-visualizer/assets/77252075/701338b6-3f4e-4942-97ec-2cdc8e2041e0)

- Widht of the canvas

  ![canvas-width](https://github.com/subrat611/leetcode-tree-visualizer/assets/77252075/50f839c2-ce94-4913-b7be-b8831358d9f7)

### Calculate the coordinates for placing the tree on the screen

![coordinates](https://github.com/subrat611/leetcode-tree-visualizer/assets/77252075/b8185588-79f5-4c16-a1cb-8bf7904e397d)

### Draw tree recursively

#### Algorithm

- Find the root node coordinates from `xStart` to `xEnd`.

- Draw the root node on the coordinates found at `step 1`.

- Recursively draw left & right nodes.

- Connect edges of each nodes.

### 🔨 Technologies

- `Vitejs` + `TypeScript`

- `Tailwind css`