{"id":20905558,"url":"https://github.com/subrat611/leetcode-tree-visualizer","last_synced_at":"2025-10-15T08:51:36.448Z","repository":{"id":220230990,"uuid":"750475592","full_name":"subrat611/leetcode-tree-visualizer","owner":"subrat611","description":"It enables you to view the tree that corresponds to the array of test cases.","archived":false,"fork":false,"pushed_at":"2024-02-01T00:08:16.000Z","size":46,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-11T06:13:48.208Z","etag":null,"topics":["binary-tree-visualization","data-structures","javascript","typescript","vitejs"],"latest_commit_sha":null,"homepage":"https://leetcode-tree-visualizer.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/subrat611.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-30T18:02:59.000Z","updated_at":"2024-09-08T01:16:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"872217da-7f4d-4ba6-ad91-3f9d14790077","html_url":"https://github.com/subrat611/leetcode-tree-visualizer","commit_stats":null,"previous_names":["subrat611/leetcode-tree-visualizer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subrat611%2Fleetcode-tree-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subrat611%2Fleetcode-tree-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subrat611%2Fleetcode-tree-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subrat611%2Fleetcode-tree-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/subrat611","download_url":"https://codeload.github.com/subrat611/leetcode-tree-visualizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248351393,"owners_count":21089270,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["binary-tree-visualization","data-structures","javascript","typescript","vitejs"],"created_at":"2024-11-18T13:25:33.105Z","updated_at":"2025-10-15T08:51:31.396Z","avatar_url":"https://github.com/subrat611.png","language":"TypeScript","readme":"## Leetcode Tree Visualizer\n\nDon't just run your test cases through your mind, visualize them instead! 😉\n\n### Decoding characteristics of tree\n\n- Drawing 2D tree graphics using HTML `canvas`.\n\n### Representing/rendering node logic\n\n- A node in canvas represents these properties `width`, `height`, `point (x,y)`, `radius`, and the node `value`.\n\n  \u003c!-- ![node-propertites](https://github.com/subrat611/leetcode-tree-visualizer/assets/77252075/985e203a-572f-4049-b947-4f06194ff1cf) --\u003e\n\n  ![image](https://github.com/subrat611/leetcode-tree-visualizer/assets/77252075/555648b9-17e1-47d1-ae83-6666001b7eb3)\n\n### Understanding canvas height and width for tree\n\n- Height of the canvas\n\n  ![canvas-height](https://github.com/subrat611/leetcode-tree-visualizer/assets/77252075/701338b6-3f4e-4942-97ec-2cdc8e2041e0)\n\n- Widht of the canvas\n\n  ![canvas-width](https://github.com/subrat611/leetcode-tree-visualizer/assets/77252075/50f839c2-ce94-4913-b7be-b8831358d9f7)\n\n### Calculate the coordinates for placing the tree on the screen\n\n![coordinates](https://github.com/subrat611/leetcode-tree-visualizer/assets/77252075/b8185588-79f5-4c16-a1cb-8bf7904e397d)\n\n### Draw tree recursively\n\n#### Algorithm\n\n- Find the root node coordinates from `xStart` to `xEnd`.\n- Draw the root node on the coordinates found at `step 1`.\n- Recursively draw left \u0026 right nodes.\n- Connect edges of each nodes.\n\n### 🔨 Technologies\n\n- `Vitejs` + `TypeScript`\n- `Tailwind css`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubrat611%2Fleetcode-tree-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubrat611%2Fleetcode-tree-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubrat611%2Fleetcode-tree-visualizer/lists"}