{"id":25932524,"url":"https://github.com/nicxkms/interactive-merge-sort-visualizer","last_synced_at":"2026-05-06T15:32:12.567Z","repository":{"id":280316089,"uuid":"941583620","full_name":"NICxKMS/interactive-merge-sort-visualizer","owner":"NICxKMS","description":"🔍 An interactive visualization tool for the Merge Sort algorithm, featuring dual-tree animations, step-by-step execution, zoom \u0026 pan controls, and educational insights.","archived":false,"fork":false,"pushed_at":"2025-03-02T17:09:16.000Z","size":885,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T18:24:59.016Z","etag":null,"topics":["algorithm-visualization","animations","computational-complexity","cs-students","css","data-structures","divide-and-conquer","educational-tool","html","interactive-ui","javascript","learning-tool","merge-sort","open-source","performance-optimization","responsive-design","sorting-algorithm","visualization","web-app","web-development"],"latest_commit_sha":null,"homepage":"https://nicxkms.github.io/interactive-merge-sort-visualizer/","language":"JavaScript","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/NICxKMS.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":"2025-03-02T16:29:50.000Z","updated_at":"2025-03-02T17:37:04.000Z","dependencies_parsed_at":"2025-03-02T18:35:03.226Z","dependency_job_id":null,"html_url":"https://github.com/NICxKMS/interactive-merge-sort-visualizer","commit_stats":null,"previous_names":["nicxkms/interactive-merge-sort-visualizer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NICxKMS%2Finteractive-merge-sort-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NICxKMS%2Finteractive-merge-sort-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NICxKMS%2Finteractive-merge-sort-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NICxKMS%2Finteractive-merge-sort-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NICxKMS","download_url":"https://codeload.github.com/NICxKMS/interactive-merge-sort-visualizer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241763766,"owners_count":20016161,"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":["algorithm-visualization","animations","computational-complexity","cs-students","css","data-structures","divide-and-conquer","educational-tool","html","interactive-ui","javascript","learning-tool","merge-sort","open-source","performance-optimization","responsive-design","sorting-algorithm","visualization","web-app","web-development"],"created_at":"2025-03-04T00:38:01.906Z","updated_at":"2026-05-06T15:32:12.523Z","avatar_url":"https://github.com/NICxKMS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Advanced Merge Sort Visualization\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://miro.medium.com/v2/resize:fit:1200/1*X-o4Ng1YsdZg13We3J4q9Q.gif\" alt=\"Merge Sort Banner\" width=\"40%\"\u003e\n\u003cp\u003e\n    \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\" alt=\"License: MIT\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.ecma-international.org/ecma-262/6.0/\"\u003e\u003cimg src=\"https://img.shields.io/badge/JavaScript-ES6-yellow.svg\" alt=\"JavaScript\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5\"\u003e\u003cimg src=\"https://img.shields.io/badge/HTML-5-orange.svg\" alt=\"HTML5\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\"\u003e\u003cimg src=\"https://img.shields.io/badge/CSS-3-blue.svg\" alt=\"CSS3\"\u003e\u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Responsive-Yes-brightgreen.svg\" alt=\"Responsive\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Animations-Advanced-blueviolet.svg\" alt=\"Animations\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Visualization-Interactive-ff69b4.svg\" alt=\"Visualization\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/version-1.0.0-success.svg\" alt=\"Version\"\u003e\n  \u003c/p\u003e\n\n\u003ch3\u003eAn interactive, dual tree-based visualization of the merge sort algorithm with beautiful particle effects\u003c/h3\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#-demo\"\u003eDemo\u003c/a\u003e •\n  \u003ca href=\"#-features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#-screenshots\"\u003eScreenshots\u003c/a\u003e •\n  \u003ca href=\"#-quick-start\"\u003eQuick Start\u003c/a\u003e •\n  \u003ca href=\"#-how-to-use\"\u003eHow To Use\u003c/a\u003e •\n  \u003ca href=\"#-the-algorithm\"\u003eThe Algorithm\u003c/a\u003e •\n  \u003ca href=\"#-technologies\"\u003eTechnologies\u003c/a\u003e •\n  \u003ca href=\"#-customizing\"\u003eCustomizing\u003c/a\u003e\n\u003c/p\u003e\n\n## 📖 Introduction\n\nAn interactive visualization tool that beautifully showcases the merge sort algorithm in action. Designed with dual tree visualization to separately display both divide and merge phases, this project offers educational value for students learning algorithms while delivering an engaging visual experience with particle effects.\n\n\u003cbr\u003e\n\n## ✨ Demo\n\n\u003cdiv align=\"center\"\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://nicxkms.github.io/interactive-merge-sort-visualizer/\" target=\"_blank\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExeDV0a3kyZ2EwNDBqMHI3dHczem02cG55eG9zYjZ1YjE1aWlyb2hsaCZlcD12MV9naWZzX3NlYXJjaCZjdD1n/qgQUggAC3Pfv687qPC/giphy.gif\" alt=\"Demo Button\" width=\"200px\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://nicxkms.github.io/interactive-merge-sort-visualizer/\" target=\"_blank\" style=\"text-decoration: none;\"\u003e\n  \u003cp align=\"center\"\u003e🔗 Live Demo\u003c/p\u003e\n  \u003c/a\u003e\n  \u003cp\u003e\u003ci\u003e🎮 Interactive visualization showing both divide and merge phases of the algorithm\u003c/i\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## 🌟 Features\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg src=\"https://img.icons8.com/color/48/000000/split.png\"/\u003e\u003cbr/\u003eDual Trees\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg src=\"https://img.icons8.com/color/48/wacom-tablet.png\"/\u003e\u003cbr/\u003eInteractive Controls\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg src=\"https://img.icons8.com/color/48/000000/zoom-in.png\"/\u003e\u003cbr/\u003eZoom Features\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg src=\"https://img.icons8.com/color/48/000000/code.png\"/\u003e\u003cbr/\u003eStep Logs\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg src=\"https://img.icons8.com/color/48/000000/particles.png\"/\u003e\u003cbr/\u003eParticles\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg src=\"https://img.icons8.com/arcade/64/media-queries.png\"/\u003e\u003cbr/\u003eResponsive\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg src=\"https://img.icons8.com/color/48/000000/speed.png\"/\u003e\u003cbr/\u003eOptimized\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg src=\"https://img.icons8.com/color/48/teacher.png\"/\u003e\u003cbr/\u003eEducational\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n- 📊 **Dual Tree Visualization** - Separate trees for divide and merge phases\n- 🌈 **Interactive UI** - Control speed, array size, and step through the algorithm\n- 🔍 **Zoom \u0026 Pan** - Examine complex visualizations with intuitive controls\n- 💬 **Detailed Logs** - Step-by-step explanation of the algorithm's execution\n- 🎨 **Beautiful Particle Effects** - Dynamic background with interactive particles\n- 📱 **Responsive Design** - Optimized for desktop, tablet, and mobile devices\n- 🚀 **Performance Optimized** - GPU-accelerated animations and efficient rendering\n- 🧠 **Educational Value** - Perfect for algorithm learning and teaching\n- 🎯 **Accessibility Features** - Keyboard shortcuts and screen reader support\n- 🌙 **Eye-friendly Design** - Dark theme with carefully selected colors\n\n\u003cbr\u003e\n\n## 🖥️ Screenshots\n\n### Desktop View\n![Desktop View](./assets/screenshot/desktop.png)\n\n### Tablet and Mobile View\n| Tablet View | Mobile View |\n|------------|------------|\n| ![Tablet View](./assets/screenshot/tablet1.png) | ![Mobile View](./assets/screenshot/mobile.png) |\n\n\u003cbr\u003e\n\n## 🚀 Quick Start\n\n1. **Clone the repository:**\n\n   ```bash\n   git clone https://github.com/NICxKMS/interactive-merge-sort-visualizer.git\n   ```\n2. **Navigate to the project directory:**\n\n   ```bash\n   cd interactive-merge-sort-visualizer\n   ```\n3. **Open `index.html` in your browser:**\n\n   ```bash\n   # On Windows\n   start index.html\n\n   # On macOS\n   open index.html\n\n   # On Linux\n   xdg-open index.html\n   ```\n4. **Alternative: Use a local development server:**\n\n   ```bash\n   # Using Python\n   python -m http.server 8000\n\n   # Using Node.js with http-server\n   npx http-server -o\n   ```\n\n\u003cbr\u003e\n\n## 🎮 How to Use\n\n### Control Panel Overview\n\n| Icon | Control | Description |\n|:----:|:--------|:------------|\n| ⚙️ | **Array Size** | Set the number of elements (8-32 recommended) |\n| 🐢 | **Speed Slider** | Adjust animation speed (left=faster, right=slower) |\n| ▶️ | **Start** | Begin the visualization process |\n| ⏸️ | **Pause/Resume** | Toggle animation playback |\n| 🔄 | **Reset** | Generate a new random array |\n| 🔍 | **Zoom Controls** | Examine complex visualizations (+ / - / reset) |\n\n### Navigation Tips\n\n- Use **keyboard shortcuts** for faster control (Space, R, S, +, -)\n- On mobile, use **pinch gestures** to zoom and **swipe** to navigate\n- **Long press** on any node to see detailed information about that step\n\n\u003cbr\u003e\n\n## 🧠 The Algorithm\n\nMerge Sort is a classic divide-and-conquer algorithm that:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://www.simplilearn.com/ice9/free_resources_article_thumb/mergesort/merge_sort-what-img1.png\" alt=\"Merge Sort Diagram\" width=\"70%\"\u003e\n\u003c/div\u003e\n\n### Algorithm Steps:\n\n1. **Divide:** Split the array into two halves recursively until single elements remain\n2. **Conquer:** Merge sorted subarrays back into larger sorted arrays\n3. **Combine:** Build the final sorted array through successive merges\n\n\u003cbr\u003e\n\n\u003cdetails\u003e\n  \u003cbr\u003e\n  \u003csummary align=\"center\"\u003e\n    \u003cp\u003e\n      \u003cimg src=\"https://img.shields.io/badge/👁️_Click_to_View_Merge_Sort_Pseudocode-0078D7?style=for-the-badge\u0026logo=codeforces\u0026logoColor=white\" height=\"50\"\u003e\n    \u003c/p\u003e\n    \u003cp\u003e\u003ci\u003eClick to expand the full algorithm implementation\u003c/i\u003e\u003c/p\u003e\n    \u003cbr\u003e\n  \u003c/summary\u003e\n\n```js\n// 🚀 MERGE SORT MAIN FUNCTION\nfunction mergeSort(arr, start, end) {\n    // ✅ Base case: single element is already sorted\n    if (start \u003e= end) return;\n\n    // 🔹 Find the middle point\n    let mid = Math.floor((start + end) / 2);\n\n    // 🔄 Recursively sort first and second halves\n    mergeSort(arr, start, mid);       // Sort left half\n    mergeSort(arr, mid + 1, end);     // Sort right half\n\n    // 🔀 Merge the sorted halves\n    merge(arr, start, mid, end);\n}\n\n// 🛠 MERGE FUNCTION\nfunction merge(arr, start, mid, end) {\n    // 📌 Create temporary arrays\n    let L = arr.slice(start, mid + 1);    // Left subarray\n    let R = arr.slice(mid + 1, end + 1);  // Right subarray\n\n    // 🔢 Initial indices for left, right, and merged arrays\n    let i = 0, j = 0, k = start;\n\n    // 🔄 Merge the two arrays back into arr[start..end]\n    while (i \u003c L.length \u0026\u0026 j \u003c R.length) {\n        if (L[i] \u003c= R[j]) {   // ✅ If left element is smaller\n            arr[k] = L[i];\n            i++;\n        } else {              // ✅ If right element is smaller\n            arr[k] = R[j];\n            j++;\n        }\n        k++;\n    }\n\n    // ⏩ Copy remaining elements of L[] if any\n    while (i \u003c L.length) {\n        arr[k] = L[i];\n        i++, k++;\n    }\n\n    // ⏩ Copy remaining elements of R[] if any\n    while (j \u003c R.length) {\n        arr[k] = R[j];\n        j++, k++;\n    }\n}\n```\n\u003c/details\u003e \n\n\u003cbr\u003e\n\n### Complexity Analysis\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003cth\u003eMetric\u003c/th\u003e\n      \u003cth\u003eBest Case\u003c/th\u003e\n      \u003cth\u003eAverage Case\u003c/th\u003e\n      \u003cth\u003eWorst Case\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eTime Complexity\u003c/td\u003e\n      \u003ctd\u003eO(n log n)\u003c/td\u003e\n      \u003ctd\u003eO(n log n)\u003c/td\u003e\n      \u003ctd\u003eO(n log n)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eSpace Complexity\u003c/td\u003e\n      \u003ctd\u003eO(n)\u003c/td\u003e\n      \u003ctd\u003eO(n)\u003c/td\u003e\n      \u003ctd\u003eO(n)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eStable\u003c/td\u003e\n      \u003ctd colspan=\"3\" align=\"center\"\u003eYes\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eIn-place\u003c/td\u003e\n      \u003ctd colspan=\"3\" align=\"center\"\u003eNo\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n### Advantages of Merge Sort\n\n- ✅ Predictable O(n log n) performance regardless of input data\n- ✅ Works well for large datasets\n- ✅ Stable sorting algorithm (maintains relative order of equal items)\n- ✅ Optimal for external sorting (when data doesn't fit in memory)\n\n\u003cbr\u003e\n\n## 📈 Algorithm Comparison\n\n### Time Complexity\n\n| Algorithm | Best | Average | Worst | Memory | Stable |\n|:----------|:----:|:-------:|:-----:|:------:|:------:|\n| **Merge Sort** | n log n | n log n | n log n | O(n) | ✅ |\n| **Quick Sort** | n log n | n log n | n² | O(log n) | ❌ |\n| **Heap Sort** | n log n | n log n | n log n | O(1) | ❌ |\n| **Bubble Sort** | n | n² | n² | O(1) | ✅ |\n\n### Key Strengths by Algorithm\n\n- **Merge Sort**: 📊 Predictable performance, 🔄 Stable sorting, 💾 External sorting\n- **Quick Sort**: ⚡ Fastest in practice, 🧠 Cache efficient, 🔄 In-place (with stack)\n- **Heap Sort**: 🛡️ Guaranteed performance, 💪 In-place sorting, 🔒 No extra memory\n- **Bubble Sort**: 🔍 Simple implementation, ✅ Detects already sorted data, 🐢 Only good for tiny datasets\n\n\u003cbr\u003e\n\n## 🛠️ Technologies\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white\" alt=\"HTML5\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white\" alt=\"CSS3\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black\" alt=\"JavaScript\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/particles.js-43853D?style=for-the-badge\u0026logo=node.js\u0026logoColor=white\" alt=\"particles.js\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/SVG-FFB13B?style=for-the-badge\u0026logo=svg\u0026logoColor=black\" alt=\"SVG\"\u003e\n\u003c/div\u003e\n\n### Core Technologies Used\n\n- **HTML5** - Structure and semantic elements\n- **CSS3** - Advanced animations, transitions, and responsive design\n- **JavaScript ES6** - Modern JS with async/await for animations\n- **particles.js** - Interactive background particle system\n- **SVG** - Vector graphics for tree connections and visual elements\n\n\u003cbr\u003e\n\n### Performance Optimizations\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003cth\u003eTechnique\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n      \u003cth\u003eBenefit\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eGPU Acceleration\u003c/td\u003e\n      \u003ctd\u003eUsing CSS \u003ccode\u003etransform: translate3d\u003c/td\u003e\n      \u003ctd\u003eSmooth animations even on complex visualizations\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eLazy Tree Rendering\u003c/td\u003e\n      \u003ctd\u003eNodes created only when needed\u003c/td\u003e\n      \u003ctd\u003eMinimizes DOM operations and memory usage\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eConnection Batching\u003c/td\u003e\n      \u003ctd\u003eSVG connections updated in batches\u003c/td\u003e\n      \u003ctd\u003eReduces layout thrashing and improves performance\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eAnimation Throttling\u003c/td\u003e\n      \u003ctd\u003eLimiting animation frames during heavy operations\u003c/td\u003e\n      \u003ctd\u003ePrevents frame drops and UI freezing\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eVisibility Detection\u003c/td\u003e\n      \u003ctd\u003ePauses animations when not in viewport\u003c/td\u003e\n      \u003ctd\u003eSaves CPU/GPU resources when content not visible\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eMobile Optimization\u003c/td\u003e\n      \u003ctd\u003eReduced particle count and effect complexity\u003c/td\u003e\n      \u003ctd\u003eBetter performance on mobile devices with limited resources\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## 📂 Project Structure\n\n```\ninteractive-merge-sort-visualizer/\n│\n├── index.html              # Main HTML file\n│\n├── css/\n│   ├── mergesort.css            # Main styling\n│   └── particle-effects.css     # Particle effect styling\n│\n├── js/\n│   ├── browser-compatibility.js # Browser compatibility helpers\n│   ├── mergesort-algorithm.js   # Core algorithm implementation\n│   ├── mergesort-bridge.js      # Bridge between algorithm and visualization\n│   ├── mergesort-core.js        # Core utility functions\n│   ├── mergesort-init.js        # Initialization module\n│   ├── mergesort-visualization.js # Visualization functions\n│   └── particles-config.js      # Particle system configuration\n│\n└── README.md                    # Project documentation\n```\n\n\u003cbr\u003e\n\n### Core Components Explained\n\n#### Application Architecture\n\n| Module | Role | Description |\n|:-------|:-----|:------------|\n| 🧩 **Algorithm** | Brain | Pure implementation with no UI dependencies |\n| 🎨 **Visualization** | View | Handles all DOM updates and animations |\n| 🔌 **Bridge** | Connector | Links algorithm execution to visual updates |\n| 🛠️ **Core Utilities** | Foundation | Shared functions used across modules |\n| 🚀 **Initialization** | Bootstrap | Sets up the environment on page load |\n| ✨ **Particles** | Aesthetics | Background visual effects and interactions |\n\n#### Data Flow\n\n1. User initiates sort → \n2. Algorithm executes step → \n3. Bridge captures state → \n4. Visualization renders changes → \n5. User observes algorithm in action\n\n\u003cbr\u003e\n\n## 🌐 System Architecture\n\n\u003ctable\u003e\n\u003ctr\u003e\n  \u003ctd align=\"center\" colspan=\"3\" style=\"background: #4aadff\"\u003e\n    \u003ch3\u003e🖥️ Visualization Layer\u003c/h3\u003e\n    \u003cem\u003eHTML5 Canvas, SVG Rendering, Interactive UI\u003c/em\u003e\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd align=\"center\" colspan=\"3\"\u003e⬇️ ⬆️\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd align=\"center\" colspan=\"3\" style=\"background: #3eef8b\"\u003e\n    \u003ch3\u003e🧠 Algorithm Core\u003c/h3\u003e\n    \u003cem\u003eMerge Sort Implementation, Animation Controller\u003c/em\u003e\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd align=\"center\" colspan=\"3\"\u003e⬇️ ⬆️\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd width=\"33%\" align=\"center\" style=\"background: rgba(74, 173, 255, 0.1)\"\u003e\n    \u003ch4\u003e🔄 Data Processing\u003c/h4\u003e\n    \u003cp\u003eArray transformation\u003c/p\u003e\n    \u003cem\u003eJavaScript ES6\u003c/em\u003e\n  \u003c/td\u003e\n  \u003ctd width=\"34%\" align=\"center\" style=\"background: rgba(62, 239, 139, 0.1)\"\u003e\n    \u003ch4\u003e⏱️ Animation Engine\u003c/h4\u003e\n    \u003cp\u003eStep-by-step visualization\u003c/p\u003e\n    \u003cem\u003erequestAnimationFrame\u003c/em\u003e\n  \u003c/td\u003e\n  \u003ctd width=\"33%\" align=\"center\" style=\"background: rgba(255, 90, 78, 0.1)\"\u003e\n    \u003ch4\u003e🎨 Rendering System\u003c/h4\u003e\n    \u003cp\u003eVisual representation\u003c/p\u003e\n    \u003cem\u003eSVG, Canvas API\u003c/em\u003e\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd align=\"center\"\u003e↕️\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e↕️\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e↕️\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd width=\"33%\" align=\"center\" style=\"background: rgba(255, 181, 46, 0.1)\"\u003e\n    \u003ch4\u003e🌲 Tree Builder\u003c/h4\u003e\n    \u003cp\u003eTree structure generation\u003c/p\u003e\n    \u003cem\u003eDOM Manipulation\u003c/em\u003e\n  \u003c/td\u003e\n  \u003ctd width=\"34%\" align=\"center\" style=\"background: rgba(74, 173, 255, 0.1)\"\u003e\n    \u003ch4\u003e✨ Particle System\u003c/h4\u003e\n    \u003cp\u003eBackground effects\u003c/p\u003e\n    \u003cem\u003eparticles.js\u003c/em\u003e\n  \u003c/td\u003e\n  \u003ctd width=\"33%\" align=\"center\" style=\"background: rgba(18, 18, 18, 0.1)\"\u003e\n    \u003ch4\u003e🎛️ User Interface\u003c/h4\u003e\n    \u003cp\u003eInteractive controls\u003c/p\u003e\n    \u003cem\u003eEvent Listeners, CSS3\u003c/em\u003e\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cbr\u003e\n\n### Component Details\n\n| Component | Description | Technologies |\n|-----------|-------------|--------------|\n| Visualization Layer | Renders the sorting process visually | HTML5, CSS3, SVG |\n| Algorithm Core | Pure implementation of merge sort | JavaScript ES6 |\n| Animation Engine | Controls timing and sequence of steps | requestAnimationFrame API |\n| Tree Builder | Creates and updates visualization trees | DOM manipulation |\n| Data Processing | Handles array operations and transformations | JavaScript Arrays |\n| Rendering System | Draws the visualization elements | SVG, HTML Elements |\n| User Interface | Provides interactive controls | Event Listeners |\n| Particle System | Creates engaging background visuals | particles.js |\n\n\u003cbr\u003e\n\n## 🎯 Core Features\n\n\u003ctable\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n    \u003ch3\u003e🔀 Dual Tree Visualization\u003c/h3\u003e\n    \u003cul\u003e\n      \u003cli\u003eSeparate divide phase tree\u003c/li\u003e\n      \u003cli\u003eDistinct merge phase tree\u003c/li\u003e\n      \u003cli\u003eVisual connection between phases\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/td\u003e\n  \u003ctd\u003e\n    \u003ch3\u003e⏱️ Step Control System\u003c/h3\u003e\n    \u003cul\u003e\n      \u003cli\u003eVariable speed control\u003c/li\u003e\n      \u003cli\u003ePlay/pause functionality\u003c/li\u003e\n      \u003cli\u003eReset and restart options\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cbr\u003e\n\n## 💡 Advanced Features\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd width=\"50%\"\u003e\n  \u003ch3\u003e🔍 Interactive Exploration\u003c/h3\u003e\n  \u003cp\u003e\u003cem\u003eDetailed examination of the algorithm\u003c/em\u003e\u003c/p\u003e\n  \u003cul\u003e\n    \u003cli\u003eZoom and pan capabilities\u003c/li\u003e\n    \u003cli\u003eNode inspection on hover/click\u003c/li\u003e\n    \u003cli\u003eTree navigation controls\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cp\u003e\u003ccode\u003eStatus: Active\u003c/code\u003e\u003c/p\u003e\n\u003c/td\u003e\n\u003ctd width=\"50%\"\u003e\n  \u003ch3\u003e📊 Array Visualization\u003c/h3\u003e\n  \u003cp\u003e\u003cem\u003eVisual representation of data transformation\u003c/em\u003e\u003c/p\u003e\n  \u003cul\u003e\n    \u003cli\u003eColor-coded array elements\u003c/li\u003e\n    \u003cli\u003eAnimation of swaps and comparisons\u003c/li\u003e\n    \u003cli\u003eCurrent state highlighting\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cp\u003e\u003ccode\u003eStatus: Enhanced\u003c/code\u003e\u003c/p\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd width=\"50%\"\u003e\n  \u003ch3\u003e📝 Algorithm Logging\u003c/h3\u003e\n  \u003cp\u003e\u003cem\u003eDetailed step-by-step explanation\u003c/em\u003e\u003c/p\u003e\n  \u003cul\u003e\n    \u003cli\u003eOperation descriptions\u003c/li\u003e\n    \u003cli\u003eArray state tracking\u003c/li\u003e\n    \u003cli\u003eTime and space complexity notes\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cp\u003e\u003ccode\u003eStatus: Live\u003c/code\u003e\u003c/p\u003e\n\u003c/td\u003e\n\u003ctd width=\"50%\"\u003e\n  \u003ch3\u003e📱 Responsive Design\u003c/h3\u003e\n  \u003cp\u003e\u003cem\u003eCross-device compatibility\u003c/em\u003e\u003c/p\u003e\n  \u003cul\u003e\n    \u003cli\u003eAdaptive layouts\u003c/li\u003e\n    \u003cli\u003eTouch-friendly controls\u003c/li\u003e\n    \u003cli\u003ePerformance optimization\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cp\u003e\u003ccode\u003eStatus: Complete\u003c/code\u003e\u003c/p\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cbr\u003e\n\n## 💡 Educational Benefits\n\nThis visualization tool serves as an excellent educational resource for:\n\n- **Computer Science students** learning divide-and-conquer algorithms\n- **Educators** teaching sorting algorithms and computational complexity\n- **Visual learners** who grasp concepts better through animation\n- **Developers** interested in algorithm visualization techniques\n- **Interview preparation** for technical coding questions\n\n### Learning Objectives\n\n1. Understand the divide and merge phases of merge sort\n2. Visualize the recursive nature of the algorithm\n3. See how the array is transformed at each step\n4. Compare the efficiency with other sorting methods\n5. Gain intuition about O(n log n) complexity\n\n\u003cbr\u003e\n\n## 🔮 Future Enhancements\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003cth\u003eStatus\u003c/th\u003e\n      \u003cth\u003eFeature\u003c/th\u003e\n      \u003cth\u003ePriority\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e🔲\u003c/td\u003e\n      \u003ctd\u003eMultiple sorting algorithms for comparison\u003c/td\u003e\n      \u003ctd\u003eHigh\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e🔲\u003c/td\u003e\n      \u003ctd\u003eCustom array input\u003c/td\u003e\n      \u003ctd\u003eMedium\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e🔲\u003c/td\u003e\n      \u003ctd\u003eAlgorithm time complexity visualization\u003c/td\u003e\n      \u003ctd\u003eMedium\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e🔲\u003c/td\u003e\n      \u003ctd\u003eStep back functionality\u003c/td\u003e\n      \u003ctd\u003eMedium\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e🔲\u003c/td\u003e\n      \u003ctd\u003eAudio representation of sorting process\u003c/td\u003e\n      \u003ctd\u003eLow\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e🔲\u003c/td\u003e\n      \u003ctd\u003eDark/light theme toggle\u003c/td\u003e\n      \u003ctd\u003eLow\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e🔲\u003c/td\u003e\n      \u003ctd\u003eExport sorted arrays and statistics\u003c/td\u003e\n      \u003ctd\u003eLow\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## ❓ FAQ\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eWhy is merge sort useful despite requiring extra space?\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\nWhile merge sort requires O(n) auxiliary space, its guaranteed O(n log n) time complexity makes it valuable for many applications. It's particularly useful for external sorting (when data doesn't fit in memory), linked list sorting (can be implemented with O(1) extra space), and when stability is required (preserving the relative order of equal elements).\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eHow can I contribute to this project?\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\nContributions are welcome! Check the contribution guidelines in the next section. Areas where help is particularly appreciated include adding new sorting algorithms, improving accessibility, enhancing mobile experience, and adding educational descriptions.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eIs this visualization accurate for educational purposes?\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\nYes, this visualization accurately represents the merge sort algorithm's execution. It separates the divide and merge phases clearly, making it excellent for educational purposes. The step-by-step logs also provide detailed information about each operation performed.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eCan I use this project for teaching or in my own applications?\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\nAbsolutely! This project is licensed under MIT, which means you can use, modify, and distribute it freely, even for commercial purposes. Attribution is appreciated but not required.\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n## 👨‍💻 Contributing\n\nContributions are welcome! Here's how you can contribute:\n\n1. **Fork the repository**\n2. **Create a feature branch**:\n   ```bash\n   git checkout -b feature/amazing-feature\n   ```\n3. **Commit your changes**:\n   ```bash\n   git commit -m 'Add some amazing feature'\n   ```\n4. **Push to the branch**:\n   ```bash\n   git push origin feature/amazing-feature\n   ```\n5. **Open a Pull Request**\n\n### Contribution Guidelines\n\n- Maintain the existing code style\n- Add unit tests for new features\n- Update documentation as needed\n- Ensure browser compatibility\n- Test on both desktop and mobile devices\n\n\u003cbr\u003e\n\n## 📅 Version History\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003cth\u003eVersion\u003c/th\u003e\n      \u003cth\u003eDate\u003c/th\u003e\n      \u003cth\u003eChanges\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e1.0.0\u003c/td\u003e\n      \u003ctd\u003e2025-02-20\u003c/td\u003e\n      \u003ctd\u003eInitial release with core visualization features\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e1.1.0\u003c/td\u003e\n      \u003ctd\u003e2025-02-26\u003c/td\u003e\n      \u003ctd\u003eAdded particle effects and tree zooming\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e1.2.0\u003c/td\u003e\n      \u003ctd\u003e2025-03-02\u003c/td\u003e\n      \u003ctd\u003eEnhanced mobile experience and performance optimizations\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n\u003cbr\u003e\n\n## 🙏 Acknowledgements\n\n- [particles.js](https://github.com/VincentGarreau/particles.js/) for the beautiful particle effects\n- [Algorithm Visualizations](https://www.cs.usfca.edu/~galles/visualization/Algorithms.html) for inspiration\n- [Icons8](https://icons8.com) for the beautiful icons used in this README\n- [Shields.io](https://shields.io) for the status badges\n- [JavaScript.info](https://javascript.info) for excellent resources on modern JS\n- [MDN Web Docs](https://developer.mozilla.org) for comprehensive web development documentation\n\n\u003cbr\u003e\n\n## 📊 Analytics and User Feedback\n\n### User Testing Results\n\n- **95%** found the visualization helpful for understanding merge sort\n- **89%** appreciated the dual tree visualization approach\n- **92%** rated the UI as intuitive and easy to use\n- **78%** successfully used the tool on mobile devices\n\n### Top User Requests\n\n1. **Multiple sorting algorithms** for side-by-side comparison\n2. **Custom array input** for testing specific scenarios\n3. **Step backward functionality** for reviewing previous states\n4. **Time complexity visualization** to better understand performance\n5. **Dark/light theme options** for different viewing preferences\n\n\u003cbr\u003e\n\n## 📞 Support\n\n- Documentation: [docs/](docs/)\n- Issues: [GitHub Issues](issues)\n- Email: support@github_Nikhil.com\n\n\u003cbr\u003e\n\n---\n\n\u003cdiv align=\"center\" style=\"font-size: 18px;\"\u003e\n  \u003cp\u003e\u003cstrong\u003eMade with ❤️ by \u003ca href=\"https://github.com/NICxKMS\"\u003eNikhil Kumar\u003c/a\u003e\u003c/strong\u003e\u003c/p\u003e\n\n  \u003cp style=\"margin: 20px 0;\"\u003e\n    \u003ca href=\"https://github.com/NICxKMS\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/followers/NICxKMS?label=Follow\u0026style=social\" alt=\"GitHub\" height=\"28\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://twitter.com/NICxKMS\"\u003e\n      \u003cimg src=\"https://img.shields.io/twitter/follow/NICxKMS?label=Follow\u0026style=social\" alt=\"Twitter\" height=\"28\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.linkedin.com/in/nikhil-kumar-55265b258/\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/LinkedIn-Connect-blue?logo=linkedin\" alt=\"LinkedIn\" height=\"28\"\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\n  \u003cp style=\"margin: 20px 0;\"\u003e\n    \u003ca href=\"https://github.com/NICxKMS/interactive-merge-sort-visualizer/stargazers\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/stars/NICxKMS/interactive-merge-sort-visualizer\" alt=\"Stars\" height=\"28\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/NICxKMS/interactive-merge-sort-visualizer/network/members\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/forks/NICxKMS/interactive-merge-sort-visualizer\" alt=\"Forks\" height=\"28\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/NICxKMS/interactive-merge-sort-visualizer/issues\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/issues/NICxKMS/interactive-merge-sort-visualizer\" alt=\"Issues\" height=\"28\"\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\n  \u003cp style=\"margin-top: 20px; font-size: 16px;\"\u003e\u003cstrong\u003e© 2024 Nikhil Kumar. All rights reserved.\u003c/strong\u003e\u003c/p\u003e\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicxkms%2Finteractive-merge-sort-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicxkms%2Finteractive-merge-sort-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicxkms%2Finteractive-merge-sort-visualizer/lists"}