{"id":15055601,"url":"https://github.com/shoyeb45/avltreevisualizer","last_synced_at":"2026-02-27T13:08:58.640Z","repository":{"id":253611390,"uuid":"844017576","full_name":"Shoyeb45/AVLTreeVisualizer","owner":"Shoyeb45","description":"This is data structure project. In this project I've built AVL tree visualisation application using javafx library of java. This project have solidified my understanding of AVL tree data structure and learnt a lot from this project","archived":false,"fork":false,"pushed_at":"2024-08-30T09:43:50.000Z","size":2408,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T14:15:51.851Z","etag":null,"topics":["data-structures","data-visualization","java","javafx","javafx-application","visualization"],"latest_commit_sha":null,"homepage":"","language":"Java","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/Shoyeb45.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-08-18T05:54:18.000Z","updated_at":"2024-09-27T21:56:46.000Z","dependencies_parsed_at":"2024-08-29T19:03:02.083Z","dependency_job_id":"94073721-c61a-43c8-9fee-214d8d663ed7","html_url":"https://github.com/Shoyeb45/AVLTreeVisualizer","commit_stats":null,"previous_names":["shoyeb45/bstvisualizer","shoyeb45/avltreevisualizer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shoyeb45%2FAVLTreeVisualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shoyeb45%2FAVLTreeVisualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shoyeb45%2FAVLTreeVisualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shoyeb45%2FAVLTreeVisualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Shoyeb45","download_url":"https://codeload.github.com/Shoyeb45/AVLTreeVisualizer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247014521,"owners_count":20869376,"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":["data-structures","data-visualization","java","javafx","javafx-application","visualization"],"created_at":"2024-09-24T21:44:49.649Z","updated_at":"2026-02-27T13:08:58.574Z","avatar_url":"https://github.com/Shoyeb45.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cp align=center\u003e\u003cb\u003eAVL Tree Visualization in JavaFX\u003c/b\u003e\u003c/p\u003e\n\n\u003cp align=center\u003e\n  \u003cimg src=\"./public/image/logo.png\" width=\"200px\" height=\"200px\"\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\nThis JavaFX application demonstrates the visualization of an \u003cb\u003eAVL Tree\u003c/b\u003e (Adelson-Velsky and Landis Tree), a type of self-balancing binary search tree. The application provides functionalities to insert, search, delete, and perform different tree traversals with visual animations. \n\u003cbr\u003e\n\u003cbr\u003e\n\n![Dashboard of Visualizer](./public/image/image1.png)\n\u003cp align=center\u003e\u003ci\u003eDashboard of AVL Tree Visualizer\u003c/i\u003e\u003c/p\u003e\n\nThe AVL Tree maintains a balance factor at each node to ensure the height remains logarithmic, providing efficient operations.\nSince the AVL tree is a self-balancing binary tree, so whenever the tree will get unbalanced the balancing algorithm will balance the tree.\n\nThe balancing of the tree is taken care by \u003cb\u003edifferent rotations of AVL Tree\u003c/b\u003e. There are two types of rotations of an AVL tree, these are:\n\n1. \u003cb\u003eLeft Rotation\u003c/b\u003e\n\n    Consider the situation of an tree nodes:\n\n    ![LeftRotation](./public/image/lr.png)\n\n    To balance this we perform following operations:\n    \u003cbr\u003e\n    - `45` becomes the new root.\n    - `13` takes ownership of `45`'s left child as its right child, or in this case, null.\n    - `45` takes ownership of `13` as its left child. \n\n    Now tree will look like:\n\n    ![LRBalanced](./public/image/lrBalanced.png)\n\n    \u003cbr\u003e\n2. \u003cb\u003eRight Rotation\u003c/b\u003e\n\n    Consider the situation of an tree nodes:\n\n    ![RightRotation](./public/image/rr.png)\n\n    To balance this we perform following operations:\n    \u003cbr\u003e\n    - `20` becomes the new root.\n    - `30` takes ownership of `20`'s right child, as its left child. In this case, that value is null.\n    - `20` takes ownership of `30`, as it's right child. \n\n    Now tree will look like:\n\n    ![RRBalanced](./public/image/rrBalanced.png)\n\n\n\u003cbr\u003e\nThese two rotaions will take care the following four unbalancing cases of AVL Tree.:\n\n1. Left-Left Unbalancing Case \n\n    This case looks like:\n\n    ![LeftLeft](./public/image/ll.png)\n\n    To balance this we'll perform single time right-rotation on `10`.\n\n2. Left-Right Unbalancing Case \n\n    This case looks like:\n\n    ![LeftRight](./public/image/lrun.png)\n\n    To balance this, we'll perform:\n\n    - First, left-rotation on `10`(`left-child of current node`).\n    - Then, right-rotation on `20`. \n3. Right-Right Unbalancing Case \n\n    This case looks like:\n\n    ![RightRotation](./public/image/rr.png)\n\n    To balance this we'll perform single time left-rotation on `30`.\n4. Right-Left Unbalancing Case \n\n    This case looks like:\n\n    ![RightLeft](./public/image/rlun.png)\n\n    To balance this, we'll perform:\n\n    - First, right-rotation on `30`(`right-child of current node`).\n    - Then, left-rotation on `10`. \n\n\n\u003cbr\u003e\nSo just by performing these rotations we can balance our binary search tree.\n\n## \u003cb\u003eHow to Use\u003c/b\u003e\n\n1. \u003cb\u003eInsert Nodes\u003c/b\u003e: Click the insert button to add nodes to the tree. The tree will automatically balance itself.\n2. \u003cb\u003eSearch Nodes\u003c/b\u003e: Use the search function to locate a specific value in the tree.\n3. \u003cb\u003eDelete Nodes\u003c/b\u003e: Click the delete button to remove a node and see the balancing in action.\n4. \u003cb\u003ePerform Traversals\u003c/b\u003e: Choose from different traversal options to see the order of nodes visually.\n5. \u003cb\u003eClear Tree\u003c/b\u003e: Reset the tree using the clear function.\n\n## \u003cb\u003eFeatures\u003c/b\u003e\n\n### \u003cb\u003eText Box\u003c/b\u003e\n  The node of tree can contain integer value. The integer value can be entered in the given text box, if the value entered will not be valid then it will not accept it. \n\n  So the user should input the value ranging from `-2,147,483,648` to `2,147,483,647`.\n\n  But for better visualisation try to insert lower integer values.\n  \u003cp align=center\u003e\n    \u003cimg src=\"./public/image/textBox.png\"\u003e\n  \u003c/p\u003e\n  \u003cp align=center\u003e\u003ci\u003eText Box for giving values\u003c/i\u003e\u003c/p\u003e\n\n## 1. Operations\n- \u003cb\u003eInsertion\u003c/b\u003e:\n\n   Add nodes to the AVL Tree, ensuring it remains balanced. Visualize the balancing process with animations.\n\n   Node value can inserted by using `insert` button on left side below the text-box. \n    \n    \u003cp align=\"center\"\u003e\n      \u003cimg src=\"./public/image/insertBtn.png\" width=350\u003e \n    \u003c/p\u003e\n    \u003cp align=center\u003e\u003ci\u003eButton for inserting the value\u003c/i\u003e\u003c/p\u003e\n\n    \u003cp align=\"center\"\u003e\n      \u003cimg src=\"./public/image/insertDemon.png\"\u003e \n    \u003c/p\u003e\n    \u003cp align=center\u003e\u003ci\u003eDemonstration of using insert button\u003c/i\u003e\u003c/p\u003e\n\n\n- \u003cb\u003eSearch\u003c/b\u003e: \n\n  Find a node in the tree with visual feedback indicating whether the node exists.\n\n  We can use `search` button to search the value in AVL Tree. The searching will happen by comparing the value to be searched to the value of current node, and according to the value, the search will go to the left or right subtree of an AVL tree.\n\n\n    \u003cp align=\"center\"\u003e\n      \u003cimg src=\"./public/image/searchBtn.png\" width=350\u003e \n    \u003c/p\u003e\n    \u003cp align=center\u003e\u003ci\u003eButton for inserting the value\u003c/i\u003e\u003c/p\u003e\n\n    \u003cp align=\"center\"\u003e\n      \u003cimg src=\"./public/image/searchDemon.gif\"\u003e \n    \u003c/p\u003e\n    \u003cp align=center\u003e\u003ci\u003eDemonstration of searching value 80 in AVL Tree\u003c/i\u003e\u003c/p\u003e\n- \u003cb\u003eDeletion\u003c/b\u003e: \n\n  Remove nodes while maintaining the balance of the tree.\n\n  We can use `delete` button to delete the value in AVL Tree. \n\n  \u003cp align=\"center\"\u003e\n      \u003cimg src=\"./public/image/deleteBtn.png\" width=350\u003e \n  \u003c/p\u003e\n    \u003cp align=center\u003e\u003ci\u003eButton for deleting the value\u003c/i\u003e\u003c/p\u003e\n\n  There are four cases of deleting a node:\n\n  1. Node to be deleted is \u003cb\u003eleaf node\u003c/b\u003e\n\n      \u003cp align=\"center\"\u003e\n          \u003cimg src=\"./public/image/deleteLeaf.gif\" width=350\u003e \n      \u003c/p\u003e\n      \u003cp align=center\u003e\n        \u003ci\u003eNode to be deleted - 80: which is leaf node\u003c/i\u003e\n      \u003c/p\u003e\n    \n  2. Node to be deleted has one child node - only at left\n      \u003cp align=\"center\"\u003e\n          \u003cimg src=\"./public/image/deleteLeft.gif\" width=350\u003e \n      \u003c/p\u003e\n      \u003cp align=center\u003e\n        \u003ci\u003eNode to be deleted - 120: which has only left node\u003c/i\u003e\n      \u003c/p\u003e\n\n  3. Node to be deleted has one child node - only at right\n\n      \u003cp align=\"center\"\u003e\n          \u003cimg src=\"./public/image/deleteRight.gif\" width=350\u003e \n      \u003c/p\u003e\n      \u003cp align=center\u003e\n        \u003ci\u003eNode to be deleted - 23: which has only right node\u003c/i\u003e\n      \u003c/p\u003e\n  \n\n  4. Node to be deleted has both of children\n\n      \u003cp align=\"center\"\u003e\n          \u003cimg src=\"./public/image/deleteBoth.gif\"\u003e \n      \u003c/p\u003e\n      \u003cp align=center\u003e\n        \u003ci\u003eNode to be deleted - 30: which has both the child\u003c/i\u003e\n      \u003c/p\u003e\n\n  \n## 2. \u003cb\u003eTraversals\u003c/b\u003e\n\n  - \u003cb\u003eInorder\u003c/b\u003e: \n  \n    Traverse the tree in an ascending order.\n\n    \u003cp align=center\u003e\n      \u003cimg src=\"./public/image/inorder.gif\" width=550\u003e\n    \u003c/p\u003e\n\n  - \u003cb\u003ePreorder\u003c/b\u003e: \n  \n    Traverse the tree in a root-left-right order.\n\n    \u003cp align=center\u003e\n      \u003cimg src=\"./public/image/preorder.gif\" width=550\u003e\n    \u003c/p\u003e\n\n  - \u003cb\u003ePostorder\u003c/b\u003e: \n  \n    Traverse the tree in a left-right-root order.\n\n    \u003cp align=center\u003e\n      \u003cimg src=\"./public/image/postorder.gif\" width=550\u003e\n    \u003c/p\u003e\n\n\n  - \u003cb\u003eLevel Order\u003c/b\u003e: \n  \n    Traverse the tree level by level.\n\n    \u003cp align=center\u003e\n      \u003cimg src=\"./public/image/levelOrder.gif\" width=550\u003e\n    \u003c/p\u003e\n\n  - \u003cb\u003eDFS\u003c/b\u003e: \n  \n    Perform a depth-first traversal.\n\n    \u003cp align=center\u003e\n      \u003cimg src=\"./public/image/dfs.gif\" width=550\u003e\n    \u003c/p\u003e\n\n  - \u003cb\u003eVisual Feedback\u003c/b\u003e: Animations for insertion, deletion, and traversal steps to provide an engaging learning experience.\n\n- \u003cb\u003eClear\u003c/b\u003e\n\n  Reset the AVL Tree to an empty state.\n\n  Clear the screen by pressing on `clear Tree` button.\n  \u003cp align=center\u003e\n    \u003cimg src=\"./public/image/clearBtn.png\"\u003e\n    \u003cp align=center\u003e\u003ci\u003eClear button\u003c/i\u003e\u003c/p\u003e\n  \u003c/p\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\n  \u003cp align=center\u003e\n    \u003cimg src=\"./public/image/clear.gif\" width=550\u003e\n    \u003cp align=center\u003eClearing tree\u003c/p\u003e\n  \u003c/p\u003e\n\n## Code Structure \n\n- [\u003cb\u003eMain.java\u003c/b\u003e](./src/application/Main.java) \n\n  It's the main file of application, it loads FXML file and set the scene and then show the stage. Entire application runs from this file.\n\n- [\u003cb\u003eAVLTree.java\u003c/b\u003e](./src/application/AVLTree.java) \n\n   Contains all the methods and animation related code to AVL tree. All the drawing and animations are executing from this file.\n\n- [\u003cb\u003eAVLNode.java\u003c/b\u003e](./src/application/AVLNode.java) \n\n   This file contains a node structure of an AVL tree. It consists of a methods to set the positions of circle and line. \n\n- [\u003cb\u003eMain.fxml\u003c/b\u003e](./src/application/Main.fxml) \n\n   It is used for basic UI element using scene-builder. AnchorPane, Label, TextBox,..etc elements are used from scene builder.\n\n- [\u003cb\u003eController.java\u003c/b\u003e](./src/application/Controller.java) \n\n   This file contains implementation of all on-action methods required for basic operation. Like insert, search, delete...\n\n\u003e \u003cb\u003eSee each file for more detailed documentation, and in-depth explanations of how each class functions\u003c/b\u003e\n\n\u003c!-- \n## \u003cb\u003eClass Details\u003c/b\u003e\n\n### \u003cb\u003eAVLTree Class\u003c/b\u003e\n\nThe `AVLTree` class handles the logic and animation of the AVL tree. Below is a breakdown of the key components and methods:\n\n### \u003cb\u003eAttributes\u003c/b\u003e\n\n- \u003cb\u003eSTART_Y\u003c/b\u003e: Initial Y-coordinate of the AVL tree nodes.\n- \u003cb\u003eDELTA_X\u003c/b\u003e: Horizontal spacing between nodes.\n- \u003cb\u003eDELTA_Y\u003c/b\u003e: Vertical spacing between levels.\n- \u003cb\u003eK\u003c/b\u003e: Distance from the center used for calculating the start of edges.\n- \u003cb\u003eDIST\u003c/b\u003e: Distance from the edge point starting to the perpendicular bisector.\n\n### \u003cb\u003eConstructor\u003c/b\u003e\n\n- \u003cb\u003eAVLTree(Pane newPane)\u003c/b\u003e: Initializes the AVL Tree with an empty root and sets up the pane for displaying the nodes.\n\n### \u003cb\u003eCore Methods\u003c/b\u003e\n\n\n\n\n\n### \u003cb\u003eUtility Methods\u003c/b\u003e\n\n- \u003cb\u003econtains(AVLNode root, int val)\u003c/b\u003e: Checks if a node is present in the tree.\n\n- \u003cb\u003einsertUtil(AVLNode root, int val, double centerX, double centerY, boolean isLeft)\u003c/b\u003e: A helper function that recursively inserts a node into the correct position in the tree.\n\n- \u003cb\u003eupdateNode(AVLNode node)\u003c/b\u003e: Updates the height and balance factor of a node.\n\n- \u003cb\u003ebalanceTree(AVLNode node)\u003c/b\u003e: Balances the AVL tree using rotations.\n\n- \u003cb\u003eleftLeftCase(AVLNode node)\u003c/b\u003e: Handles left-left imbalance by performing a right rotation.\n\n- \u003cb\u003eleftRightCase(AVLNode node)\u003c/b\u003e: Handles left-right imbalance with a left rotation followed by a right rotation.\n\n- \u003cb\u003erightRightCase(AVLNode node)\u003c/b\u003e: Handles right-right imbalance by performing a left rotation.\n\n- \u003cb\u003erightLeftCase(AVLNode node)\u003c/b\u003e: Handles right-left imbalance with a right rotation followed by a left rotation.\n\n- \u003cb\u003erightRotate(AVLNode node)\u003c/b\u003e: Performs a right rotation on the subtree.\n\n- \u003cb\u003eleftRotate(AVLNode node)\u003c/b\u003e: Performs a left rotation on the subtree.\n\n- \u003cb\u003enodeAppearance(AVLNode newNode)\u003c/b\u003e: Animates the appearance of a newly inserted node.\n\n- \u003cb\u003elineGrowing(Line line, double endX, double endY)\u003c/b\u003e: Animates the growth of a line between nodes.\n\n- \u003cb\u003eresizeTree()\u003c/b\u003e: Re-adjusts the positions of nodes visually after insertion or deletion to ensure the tree looks balanced.\n\n- \u003cb\u003esetNewPositions(AVLNode node, double xPosition, double yPosition, byte side, double lineStartX, double lineStartY, Line line)\u003c/b\u003e: Updates the positions of nodes recursively to maintain the visual structure.\n\n- \u003cb\u003eresizeWidths(AVLNode node)\u003c/b\u003e: Calculates and updates the left and right widths of nodes for proper positioning. --\u003e\n## Built With\n\n- Programming Langauge: `Java 17.0.0`\n- Library Used: `JavaFX 22.0.2`\n\n## \u003cb\u003eRequirements\u003c/b\u003e\n\n- \u003cb\u003eJava Development Kit (JDK) 11 or higher\u003c/b\u003e\n- \u003cb\u003eJavaFX SDK\u003c/b\u003e (included in most modern Java IDEs)\n\n## \u003cb\u003eHow to Run\u003c/b\u003e\n\n1. Clone the repository.\n2. Import the project into your Java IDE (like IntelliJ IDEA, Eclipse with e(fx)clipse).\n3. Ensure JavaFX is properly configured in your IDE.\n4. Run the main class, which initializes the JavaFX application and displays the AVL Tree visualization.\n\n\n\n## Credits\n\n1. [Our Mentor - Deeapak Sir](https://github.com/Enigma277)\n2. [AVL Tree Visualisation - Motivation](https://www.cs.usfca.edu/~galles/visualization/AVLtree.html)\n3. [Youtube tutorial for javafx](https://youtu.be/9XJicRt_FaI?si=7QaHAzPgneGxgFu1)\n4. [StackOverflow](https://stackoverflow.com/)\n5. [ChatGPT](https://chatgpt.com/)\n6. [Javafx docs](https://openjfx.io/openjfx-docs/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshoyeb45%2Favltreevisualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshoyeb45%2Favltreevisualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshoyeb45%2Favltreevisualizer/lists"}