💡 [Feature]: Add Merge Sort Visualizer

[ruhelamahi7-code]

❓ Problem Statement

Currently, the project includes Bubble Sort and Quick Sort
visualizers for teaching/demonstrating sorting algorithms.
Merge Sort is another fundamental algorithm that uses a
divide-and-conquer approach, but there's no interactive way
for users to visualize how it works within this project.

🚀 Proposed Enhancement

Add a Merge Sort Visualizer project following the same
UI/UX pattern as the existing Bubble Sort and Quick Sort
Visualizers, so users can interactively see how Merge Sort
divides an array into halves and merges them back in sorted
order step by step.

🛠️ Suggested Implementation

• Reuse the existing UI structure (input field, speed slider,
  animated bar chart, stats row, result display)
• Visualize the dividing phase (splitting array into halves)
• Visualize the merging phase (combining two sorted halves
  back together)
• Use different colors for: Dividing / Merging / Sorted
• Track and display comparisons and merge operations count,
  similar to Bubble Sort and Quick Sort Visualizers
• Add a new file web-app/js/projects/merge-sort.js with:
  • getMergeSortHTML() — UI template
  • initMergeSort() — sorting logic + animation
• Register the new project in web-app/js/projects.js:
  • Add to getProjectHTML() map
  • Add to initializers map
• Add math/Merge-Sort/Merge-Sort.py CLI version following
  the Bubble-Sort.py / Quick-Sort.py pattern
• Add tests/test_merge_sort.py with unit tests

---

• I am a registered GSSoC 2026 contributor.
• I would like to implement this feature myself.

[github-actions]

⚠️ Important Contribution Guideline

Please do not open a Pull Request without being assigned to this issue first.

Please do not open a Pull Request without being assigned to this issue first.

How to proceed:

1. Comment on this issue to express interest
2. Wait for maintainers to assign you to the issue
3. Once assigned, you can start working on the PR
4. Include the assignment in your PR checklist

Thank you for helping us maintain a smooth workflow! 🙏

[ruhelamahi7-code]

Hi @steam-bell-92! 👋

I'd love to work on this feature! I recently completed the
Quick Sort Visualizer (PR #1291, merged), so I'm familiar with
the project's visualization patterns, animation logic, and
the full contribution workflow (web + CLI + tests + banner + README).

My plan for Merge Sort:

• Reuse the existing single-row bar chart UI (same as Bubble/Quick Sort)
• Use color states to show "Dividing" → "Comparing" (during merge)
  → "Sorted" phases
• Implement the recursive divide-and-merge logic with the same
  render/sleep animation pattern used in quick-sort.js
• Add Ascending/Descending toggle for consistency with other visualizers
• Include the Python CLI version (Merge-Sort.py) and unit tests,
  following the same structure as Bubble-Sort.py and Quick-Sort.py

I'm confident I can deliver this cleanly since the recursive
animation pattern is very similar to what I just built for
Quick Sort. Could you please assign this issue to me?

I'll submit a PR as soon as possible! 🚀

[steam-bell-92]

@ruhelamahi7-code instead of adding entirely new file can you use current UI of Bubble sort and its same .py file too