Data Structure Visualization Resources

def quicksort(arr, low, high):
    if low < high:
        pivot = partition(arr, low, high)
        quicksort(arr, low, pivot - 1)
        quicksort(arr, pivot + 1, high)
    return arr

def partition(arr, low, high):
    pivot = arr[high]
    i = low - 1
    for j in range(low, high):
        if arr[j] <= pivot:
            i += 1
            arr[i], arr[j] = arr[j], arr[i]
    arr[i + 1], arr[high] = arr[high], arr[i + 1]
    return i + 1

def mergesort(arr):
    if len(arr) <= 1:
        return arr
    
    mid = len(arr) // 2
    left = mergesort(arr[:mid])
    right = mergesort(arr[mid:])
    
    return merge(left, right)

def merge(left, right):
    result = []
    i = j = 0
    while i < len(left) and j < len(right):
        if left[i] <= right[j]:
            result.append(left[i])
            i += 1
        else:
            result.append(right[j])
            j += 1
    result.extend(left[i:])
    result.extend(right[j:])
    return result

class AVLNode:
    def __init__(self, key):
        self.key = key
        self.left = None
        self.right = None
        self.height = 1

class AVLTree:
    def get_height(self, node):
        if not node:
            return 0
        return node.height
    
    def get_balance(self, node):
        if not node:
            return 0
        return self.get_height(node.left) - self.get_height(node.right)
    
    def right_rotate(self, y):
        x = y.left
        T2 = x.right
        x.right = y
        y.left = T2
        y.height = 1 + max(self.get_height(y.left), self.get_height(y.right))
        x.height = 1 + max(self.get_height(x.left), self.get_height(x.right))
        return x

class RBNode:
    def __init__(self, key, color="RED"):
        self.key = key
        self.color = color
        self.left = None
        self.right = None
        self.parent = None

from collections import deque

def bfs(graph, start):
    visited = set()
    queue = deque([start])
    visited.add(start)
    
    while queue:
        vertex = queue.popleft()
        print(vertex, end=' ')
        
        for neighbor in graph[vertex]:
            if neighbor not in visited:
                visited.add(neighbor)
                queue.append(neighbor)

def dfs(graph, start, visited=None):
    if visited is None:
        visited = set()
    
    visited.add(start)
    print(start, end=' ')
    
    for neighbor in graph[start]:
        if neighbor not in visited:
            dfs(graph, neighbor, visited)

import heapq

def dijkstra(graph, start):
    distances = {node: float('inf') for node in graph}
    distances[start] = 0
    pq = [(0, start)]
    
    while pq:
        current_dist, current = heapq.heappop(pq)
        
        if current_dist > distances[current]:
            continue
        
        for neighbor, weight in graph[current]:
            distance = current_dist + weight
            
            if distance < distances[neighbor]:
                distances[neighbor] = distance
                heapq.heappush(pq, (distance, neighbor))
    
    return distances

import heapq

class MinHeap:
    def __init__(self):
        self.heap = []
    
    def push(self, val):
        heapq.heappush(self.heap, val)
    
    def pop(self):
        return heapq.heappop(self.heap)
    
    def peek(self):
        return self.heap[0]

# Pseudocode for a generic visualization framework
class AlgorithmVisualizer:
    def __init__(self):
        self.steps = []  # snapshot history
        self.highlights = set()

    def snapshot(self, description=""):
        """Record current state as a visualization frame."""
        self.steps.append({
            'state': self._capture_state(),
            'highlight': set(self.highlights),
            'description': description
        })

    def _capture_state(self):
        """Return copy of current data structure state."""
        raise NotImplementedError

// Simplified D3 sorting visualization
const svg = d3.select("#vis")
    .append("svg")
    .attr("width", 800)
    .attr("height", 400);

function visualizeSort(arr, highlight = []) {
    const bars = svg.selectAll("rect").data(arr);
    bars.enter()
        .append("rect")
        .merge(bars)
        .attr("x", (d, i) => i * 30)
        .attr("y", d => 400 - d * 3)
        .attr("width", 25)
        .attr("height", d => d * 3)
        .attr("fill", (d, i) => highlight.includes(i) ? "red" : "steelblue");
    bars.exit().remove();
}

// Step through bubble sort
async function bubbleSortVisualize(arr) {
    const n = arr.length;
    for (let i = 0; i < n - 1; i++) {
        for (let j = 0; j < n - i - 1; j++) {
            visualizeSort(arr, [j, j + 1]);
            await sleep(200);
            if (arr[j] > arr[j + 1]) {
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
                visualizeSort(arr, [j, j + 1]);
                await sleep(200);
            }
        }
    }
    visualizeSort(arr, []);
}

// Render a binary tree using D3 hierarchy
const treeData = {
    name: "root",
    children: [
        {
            name: "left",
            children: [
                { name: "left.left" },
                { name: "left.right" }
            ]
        },
        { name: "right" }
    ]
};

const root = d3.hierarchy(treeData);
const treeLayout = d3.tree().size([600, 400]);
treeLayout(root);

const links = svg.append("g")
    .selectAll("line")
    .data(root.links())
    .enter().append("line")
    .attr("x1", d => d.source.x)
    .attr("y1", d => d.source.y)
    .attr("x2", d => d.target.x)
    .attr("y2", d => d.target.y)
    .attr("stroke", "#ccc");

const nodes = svg.append("g")
    .selectAll("circle")
    .data(root.descendants())
    .enter().append("circle")
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", 10)
    .attr("fill", "steelblue");

// Create a network visualization
const nodes = new vis.DataSet([
    { id: 1, label: "A" },
    { id: 2, label: "B" },
    { id: 3, label: "C" },
    { id: 4, label: "D" },
]);

const edges = new vis.DataSet([
    { from: 1, to: 2, label: "5" },
    { from: 1, to: 3, label: "3" },
    { from: 2, to: 4, label: "7" },
    { from: 3, to: 4, label: "1" },
]);

const container = document.getElementById("graph");
const data = { nodes, edges };
const options = {
    physics: { stabilization: true },
    edges: { smooth: { type: "curvedCW" } },
    interaction: { hover: true }
};
const network = new vis.Network(container, data, options);

// Highlight Dijkstra's shortest path
function highlightPath(path) {
    edges.forEach(edge => {
        edge.color = path.includes(edge.id) ? "red" : "gray";
    });
}

from manim import *

class SortingVisualization(Scene):
    def construct(self):
        arr = [5, 3, 8, 1, 9, 2, 7, 4, 6]
        bars = VGroup(*[
            Rectangle(
                width=0.6,
                height=val * 0.3,
                fill_color=BLUE,
                fill_opacity=0.8
            ).shift(RIGHT * i * 0.8)
            for i, val in enumerate(arr)
        ])
        self.add(bars)
        self.wait(1)

        # Bubble sort step
        for i in range(len(arr)):
            for j in range(len(arr) - i - 1):
                if arr[j] > arr[j + 1]:
                    arr[j], arr[j + 1] = arr[j + 1], arr[j]
                    bars[j], bars[j+1] = bars[j+1], bars[j]
                    self.play(
                        bars[j].animate.shift(RIGHT * 0.8),
                        bars[j+1].animate.shift(LEFT * 0.8),
                        run_time=0.3
                    )

import matplotlib.pyplot as plt
import numpy as np

def plot_complexity():
    n = np.arange(1, 100)
    plt.figure(figsize=(10, 6))
    plt.plot(n, np.ones_like(n), label='O(1)')
    plt.plot(n, np.log2(n), label='O(log n)')
    plt.plot(n, n, label='O(n)')
    plt.plot(n, n * np.log2(n), label='O(n log n)')
    plt.plot(n, n**2, label='O(n²)')
    plt.plot(n, 2**n, label='O(2ⁿ)')
    plt.ylim(0, 100)
    plt.xlabel('Input size (n)')
    plt.ylabel('Operations')
    plt.title('Algorithm Complexity Comparison')
    plt.legend()
    plt.grid(True, alpha=0.3)
    plt.savefig('complexity_comparison.png')

def visualize_memory_overhead():
    structures = ['Array', 'Linked List', 'Hash Table', 'BST', 'Heap']
    memory_per_element = [8, 24, 16, 32, 24]  # approximate bytes
    plt.bar(structures, memory_per_element)
    plt.ylabel('Memory per element (bytes)')
    plt.title('Data Structure Memory Overhead')
    for i, v in enumerate(memory_per_element):
        plt.text(i, v + 0.5, str(v), ha='center')

class SortingVisualizer:
    def __init__(self, data):
        self.data = list(data)
        self.steps = []

    def _record(self, highlights=None):
        self.steps.append({
            'array': list(self.data),
            'highlights': highlights or []
        })

    def bubble_sort(self):
        n = len(self.data)
        for i in range(n):
            for j in range(n - i - 1):
                self._record([j, j+1])
                if self.data[j] > self.data[j+1]:
                    self.data[j], self.data[j+1] = self.data[j+1], self.data[j]
                    self._record([j, j+1])
        self._record()

    def playback(self, delay=0.5):
        """Replay the sorting animation in terminal."""
        import time
        for step in self.steps:
            display = []
            for i, val in enumerate(step['array']):
                bar = '█' * val
                if i in step.get('highlights', []):
                    display.append(f"\033[91m{bar}\033[0m")  # Red
                else:
                    display.append(f"\033[94m{bar}\033[0m")  # Blue
            print(' '.join(display))
            time.sleep(delay)
            print('\033[A' * len(self.steps[0]['array']))  # Move cursor up

class TreeVisualizer:
    @staticmethod
    def print_tree(root, prefix="", is_left=True):
        """Print a binary tree in a readable format."""
        if root is None:
            return
        connector = "├── " if is_left else "└── "
        print(prefix + connector + str(root.value))
        child_prefix = prefix + ("│   " if is_left else "    ")
        if root.left or root.right:
            if root.left:
                TreeVisualizer.print_tree(root.left, child_prefix, True)
            else:
                print(child_prefix + "├── None")
            if root.right:
                TreeVisualizer.print_tree(root.right, child_prefix, False)
            else:
                print(child_prefix + "└── None")

    @staticmethod
    def visualize_traversal(root, traversal_type="inorder"):
        """Step through traversal with visual feedback."""
        result = []
        stack = []
        current = root
        print(f"Starting {traversal_type} traversal:")
        while stack or current:
            if current:
                print(f"  Push: {current.value}")
                stack.append(current)
                current = current.left
            else:
                node = stack.pop()
                print(f"  Pop:  {node.value} → visited")
                result.append(node.value)
                current = node.right
        print(f"Result: {result}")
        return result

// Web-based data structure visualizer skeleton
class DataStructureVisualizer {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.container.appendChild(this.canvas);
        this.animationQueue = [];
        this.isAnimating = false;
    }

    drawRectangle(x, y, w, h, color, label) {
        this.ctx.fillStyle = color;
        this.ctx.fillRect(x, y, w, h);
        this.ctx.strokeStyle = '#333';
        this.ctx.strokeRect(x, y, w, h);
        if (label) {
            this.ctx.fillStyle = '#000';
            this.ctx.fillText(label, x + w/2, y + h/2);
        }
    }

    drawArrow(fromX, fromY, toX, toY) {
        this.ctx.beginPath();
        this.ctx.moveTo(fromX, fromY);
        this.ctx.lineTo(toX, toY);
        this.ctx.stroke();
        // Arrowhead
        const angle = Math.atan2(toY - fromY, toX - fromX);
        this.ctx.beginPath();
        this.ctx.moveTo(toX, toY);
        this.ctx.lineTo(toX - 10 * Math.cos(angle - 0.3),
                        toY - 10 * Math.sin(angle - 0.3));
        this.ctx.lineTo(toX - 10 * Math.cos(angle + 0.3),
                        toY - 10 * Math.sin(angle + 0.3));
        this.ctx.closePath();
        this.ctx.fill();
    }

    async animate(frames, delay = 500) {
        for (const frame of frames) {
            this.render(frame);
            await new Promise(r => setTimeout(r, delay));
        }
    }
}