Issue - Create a Visualizer For Difference Array #110
Description
Comment Assign me To Get Assigned The issue
Difference Array Visualizer (Next.js + TSX)
🎯 Objective
Create an interactive Difference Array visualizer to help users intuitively understand how range updates work efficiently using difference arrays and prefix sums.
This visualizer will complement the existing Prefix Sum visualizer and will live under the Range Queries section.
📁 Target Directory (Mandatory)
The implementation must be placed at:
/algo/range_queries/differencearray/visualizer/<your_name>/
yaml
Copy code
🧠 What the Visualizer Should Demonstrate
1️⃣ Initial Array
- Array of size
n - Initialized with
0or user-defined values - Clearly labeled indices
2️⃣ Difference Array Construction
- Show how the difference array
diff[]is initialized - Visually demonstrate how a range update affects only:
diff[L] += X
diff[R + 1] -= X
yaml
Copy code
- Highlight affected indices during each update
3️⃣ Multiple Range Updates
- Allow users to input multiple updates
(L, R, X) - Apply updates step-by-step
- Show cumulative effects on the difference array
4️⃣ Prefix Sum Application
- Animate or step through prefix sum computation on
diff[] - Show how the final array is reconstructed:
arr[i] = arr[i-1] + diff[i]
yaml
Copy code
- Clearly connect difference array values to the final array values
5️⃣ Final Result
- Display the final array after all updates are applied
- Optionally show intermediate states for learning clarity
✨ Expected Features (Recommended)
- Input fields for:
- Array size
n - Range updates
(L, R, X) - Controls:
▶️ Next step- ⏮️ Previous step
- 🔁 Reset
- Clear visual distinction between:
- Original array
- Difference array
- Final array
- Visual highlighting of:
- Updated indices
- Prefix sum progression
- Beginner-friendly explanations or tooltips explaining:
- Why only two indices are updated
- How prefix sums rebuild the array
🧑🏫 Learning-Focused UI
- Show update logic like:
Update (L, R, X):
diff[L] += X
diff[R + 1] -= X
yaml
Copy code
- Show prefix sum logic step-by-step
- Optional toggle:
- Auto-play animation
- Manual stepping
🛠 Tech Stack & Constraints
✅ Next.js
✅ TypeScript (.tsx)
✅ Tailwind CSS
❌ No backend
❌ No external state managers (unless strongly justified)
🎨 Design Reference
You are encouraged to take UI/UX inspiration from the existing Prefix Sum visualizer:
👉 https://pholio.pearl99z.tech/extensions/prefixsum
🏆 Contributor Recognition
If your Difference Array visualizer is merged:
🎉 You will be featured on:
- 👉 This repository
- 👉 https://pholio.pearl99z.tech/
Your name/handle will be credited alongside your implementation.