Greedy Algorithm Visualizer

An educational frontend app built with React and browser-only logic. Explore greedy decision-making through animated visualizations, customizable input scenarios, and step-by-step explanations.

🚀 Project Overview

This repository contains a single-page visualizer that helps users understand how greedy algorithms operate. The app runs entirely in the browser and uses a neon-dark UI with glowing highlights to make each decision feel like machine reasoning.

🧠 Algorithms Included

1. Coin Change (Greedy)

• Uses the largest available coin first.
• Visualizes current remaining amount and coin selections.
• Demonstrates where greedy works and when exact change may not be possible.

2. Activity Selection

• Sorts activities by finish time and selects the earliest finisher that fits.
• Displays timeline bars for each interval.
• Highlights chosen activities and skipped overlaps.

3. Fractional Knapsack

• Sorts items by value-to-weight ratio.
• Fills knapsack capacity greedily.
• Shows partial item inclusion and total value accumulated.

🎯 What You Can Do

• Switch algorithms with the sidebar.
• Edit inputs directly for each problem type.
• Advance one greedy decision at a time using Next Step.
• Use Auto-Play to animate the full greedy process automatically.
• Adjust playback speed with the slider.
• Read a decision log of each greedy pick in plain English.
• Reset the demo and export the decision log as a text file.

📌 Why It Matters

Greedy algorithms are easy to describe but not always optimal. This visualizer helps learners:

• see the exact choice made on each iteration
• compare greedy behavior across problems
• understand the mechanics of greedy selection
• observe how partial selection works in fractional knapsack

🧩 Example Inputs

Coin Change

• Denominations: 1,5,10,25
• Target amount: 93

Activity Selection

• Intervals:

  1,4
  3,5
  0,6
  5,7
  3,8
  5,9
  6,10
  8,11
  8,12
  2,13
  12,14
  

Fractional Knapsack

• Capacity: 50
• Items:

  60,10
  100,20
  120,30
  

🛠️ How to Run Locally

1. Open index.html directly in your browser.
2. Or use a local static server for best compatibility.

Optional: Serve with VS Code Live Server

• Install the Live Server extension.
• Right-click index.html and select Open with Live Server.

📁 Repository Structure

• index.html — app container, fonts, and React imports
• styles.css — dark theme, responsive layout, animations
• app.jsx — React components, algorithm logic, visualization
• README.md — project documentation and usage guide

💡 Implementation Notes

• No backend or API is used.
• All greedy algorithms are coded from scratch in app.jsx.
• Uses React with Babel in the browser for simplicity.
• Designed to be mobile-responsive and visually engaging.

📚 Learning Outcomes

This project is ideal for demonstrating:

• greedy selection strategy
• step-by-step algorithm execution
• the importance of problem-specific choice rules
• how visualization supports intuitive learning

🧑‍🤝‍🧑 Authors

• Sabyasachi Panda
• Sameer Kumar