Min Heap Visualizer

A simple TypeScript project that uses viz.js to visualize min heap operations in a web browser.

Features

• Vanilla Setup: No frameworks required—just webpack for bundling.
• Object-Oriented Design: Min Heap implemented as a class with methods.
• Visualizer: Displays heap operations visually in the browser at localhost:8080.

---

Installation and Usage

Follow these steps to set up and run the project:

Prerequisites

Ensure you have the following installed:

• Node.js (version 16 or higher recommended)
• npm or Yarn for package management

Steps

1. Clone the Repository:

   git clone <repository-url>

2. Open containing folder

    cd <repository-folder>  

3. Install Dependencies: Run the following command to install all required packages:

     npm install

4. Run the Development Server: Start the local server to view the project in your browser:

      npx webpack server

5. View in Browser:
   Open your web browser and navigate to:

      http://localhost:8080
   

---

Methods

The Min Heap class includes the following methods:

insert(value: number)

Adds a new value to the heap while maintaining the heap property.

extractMin()

Removes and returns the smallest value from the heap.

peek()

Returns the smallest value without removing it.

size()

Returns the current number of elements in the heap.

toDot()

Generates a DOT string representation of the heap for visualization with viz.js.

---

How It Works

1. Create a Min Heap: Instantiate the Min Heap class and use its methods:

   const minHeap = new MinHeap();
      minHeap.insert(10); 
      minHeap.insert(5);
      minHeap.insert(20);   
      console.log(minHeap.extractMin());

2. Visualize the Heap: Use the toDot method to generate the DOT representation and render it using viz.js:

     const dot = minHeap.toDot();
     viz.renderSVGElement(dot).then((svgElement) => {
      document.body.appendChild(svgElement);
      });