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.

  

Understanding canvas height and width for tree

• Height of the canvas

  

• Widht of the canvas

  

Calculate the coordinates for placing the tree on the screen

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