https://github.com/kglikith/huffman-and-lzw-compression-visualization
Explore and understand how lossless text compression works with step-by-step visualizations built using Next.js, React D3 Tree, and Tailwind CSS.
https://github.com/kglikith/huffman-and-lzw-compression-visualization
framer-motion nextjs react-d3-tree shadcn-ui typscript
Last synced: 3 months ago
JSON representation
Explore and understand how lossless text compression works with step-by-step visualizations built using Next.js, React D3 Tree, and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/kglikith/huffman-and-lzw-compression-visualization
- Owner: KGLikith
- Created: 2025-05-07T16:49:13.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-22T12:14:51.000Z (about 1 year ago)
- Last Synced: 2025-07-03T06:07:29.618Z (about 1 year ago)
- Topics: framer-motion, nextjs, react-d3-tree, shadcn-ui, typscript
- Language: TypeScript
- Homepage: https://huffman-and-lzw-visualizer.vercel.app
- Size: 113 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Huffman & LZW Compression Visualizer
A sleek, interactive web application to **visualize how Huffman Coding and LZW Compression algorithms work** step-by-step — built with **Next.js 15**, **Tailwind CSS**, **React D3 Tree**, and smooth animations using **Framer Motion**.
---
## Features
### Compression Algorithm Visualization
- 📊 **Huffman Coding Tree** step-by-step construction
- 🧱 **LZW dictionary build-up** with real-time updates
- 🧠 Interactive encoding/decoding processes with tooltips and transitions
### Modern UI & UX
- 🌙 Theme support via `next-themes`(Only dark mode supported for now)
- 🧩 Responsive design using Tailwind CSS + Shadcn UI
- 📈 Dynamic tree rendering via `react-d3-tree`
- 🎬 Smooth animations with `framer-motion`
### 🛠Dev Tools
- TypeScript-powered
---
## Tech Stack
| Tech | Role |
|----------------------|-------------------------------------------|
| **Next.js** | React-based app framework |
| **Tailwind CSS** | Utility-first styling |
| **Shadcn UI** | Accessible UI primitives |
| **Framer Motion** | Animation library |
| **React D3 Tree** | Tree rendering for Huffman visualization |
| **Recharts** | Graphical representation (pending) |
| **TypeScript** | Type safety and dev ergonomics |
---
## Compression Algorithms
### Huffman Coding
**Huffman Coding** is a **lossless data compression algorithm** based on character frequencies. It builds a binary tree (Huffman Tree) where:
- Characters with higher frequencies have **shorter binary codes**
- Characters with lower frequencies have **longer binary codes**
#### Features of Huffman Coding
- 📊 **Frequency-Based**: Uses the frequency of each character to build an optimal prefix tree
- 🌲 **Binary Tree Construction**: Dynamically builds a tree where each leaf is a character
- 🔗 **Prefix-Free Codes**: No code is a prefix of another; ensures unambiguous decoding
- 💡 **Greedy Algorithm**: Always combines the two least frequent nodes
- 🚀 **Efficient for texts with skewed frequency distribution**
### Lempel–Ziv–Welch (LZW) Compression
**LZW** is a **dictionary-based** lossless compression algorithm. It works by:
- Scanning sequences of characters
- Storing new sequences in a **dynamic dictionary**
- Replacing repeated sequences with **dictionary indexes**
#### Features of LZW Compression
- 📘 **No Need to Transmit Dictionary**: Both encoder and decoder build it identically on the fly
- 🧱 **Efficient for Repeating Patterns**: Great for structured, repetitive data (e.g., XML, logs)
- 🔄 **Dynamic Dictionary Building**: Grows during encoding, allowing for efficient handling of long strings
## Getting Started
1. **Clone the repo**
```bash
git clone https://github.com/KGLikith/huffman-lzw-visualizer.git
cd huffman-lzw-visualizer
npm i
npm run build
npm start