Compression Algorithms Visualizer

An interactive web-based visualization project for fundamental lossless text compression algorithms.

🔗 Live Demo: https://raufeken.github.io/compression-algorithms-visualizer/

Overview

This project visualizes how Huffman Coding and LZW compression algorithms work step by step. Users can enter custom text, load sample data, compare compression metrics, and inspect the generated outputs visually.

The project was developed as part of an Algorithms course.

Screenshots

Home Page

Compression Screen

Algorithms Included

• Huffman Coding
• LZW Compression

Technologies Used

• HTML5
• CSS3
• JavaScript

Features

• Huffman Coding visualization
• LZW dictionary-based compression visualization
• Character frequency table
• Huffman code table
• Compression ratio and bit length comparison
• Step-by-step execution flow
• Sample input support
• Responsive interface

Project Structure

compression-algorithms-visualizer/
├── index.html
├── style.css
├── script.js
└── README.md

How to Run

Clone or download the repository and open index.html in a modern web browser.

git clone https://github.com/raufeken/compression-algorithms-visualizer.git
cd compression-algorithms-visualizer

Then open:

index.html

Educational Purpose

This project was created to understand and demonstrate how classical lossless compression algorithms work. It focuses on algorithm behavior, visualization, and step-by-step learning.

Türkçe Özet

Bu proje, Huffman Coding ve LZW sıkıştırma algoritmalarının çalışma mantığını görselleştirmek amacıyla geliştirilmiş web tabanlı bir algoritma uygulamasıdır. Kullanıcı metin girebilir, örnek veri yükleyebilir, sıkıştırma oranını inceleyebilir ve algoritmaların adım adım nasıl çalıştığını görsel olarak takip edebilir.