Algorithm Visualizer Guide

# Clone the repository
git clone https://github.com/algorithm-visualizer/algorithm-visualizer.git
cd algorithm-visualizer

# Install dependencies
npm install

# Start development server
npm start

# Access at http://localhost:3000

# Clone all required components
git clone https://github.com/algorithm-visualizer/algorithm-visualizer.git
git clone https://github.com/algorithm-visualizer/server.git

# Build and run with Docker
cd server
docker build -t algo-viz-server .
docker run -d -p 8080:8080 algo-viz-server

cd ../algorithm-visualizer
# Set the server URL in environment configuration
echo "REACT_APP_API_URL=http://localhost:8080" > .env.local
npm install && npm run build
npx serve -s build -l 3000

const { Tracer, Array1DTracer, LogTracer, Layout, VerticalLayout } = require('algorithm-visualizer');

// Set up visualization layout
const arrayTracer = new Array1DTracer('Array');
const logger = new LogTracer('Execution Log');
Layout.setRoot(new VerticalLayout([arrayTracer, logger]));

// Example: Visualizing insertion sort on research ranking data
const impactFactors = [3.2, 1.8, 7.5, 2.1, 5.9, 4.3, 6.7, 0.9];
arrayTracer.set(impactFactors);
Tracer.delay();

for (let i = 1; i < impactFactors.length; i++) {
    const key = impactFactors[i];
    let j = i - 1;

    logger.println(`Inserting element ${key} at position ${i}`);
    arrayTracer.select(i);
    Tracer.delay();

    while (j >= 0 && impactFactors[j] > key) {
        arrayTracer.patch(j + 1, impactFactors[j]);
        Tracer.delay();

        impactFactors[j + 1] = impactFactors[j];
        arrayTracer.depatch(j + 1);
        j--;
    }

    impactFactors[j + 1] = key;
    arrayTracer.patch(j + 1, key);
    Tracer.delay();
    arrayTracer.depatch(j + 1);
    arrayTracer.deselect(i);
}

logger.println('Sorting complete: journals ranked by impact factor');

const { Tracer, GraphTracer, LogTracer, Layout, VerticalLayout } = require('algorithm-visualizer');

const graphTracer = new GraphTracer('Citation Network');
const logger = new LogTracer('BFS Traversal');
Layout.setRoot(new VerticalLayout([graphTracer, logger]));

// Adjacency matrix representing citation relationships
const citations = [
    [0, 1, 1, 0, 0, 0],
    [0, 0, 1, 1, 0, 0],
    [0, 0, 0, 0, 1, 0],
    [0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 0, 1],
    [0, 0, 0, 0, 0, 0]
];

const paperNames = ['Paper A', 'Paper B', 'Paper C', 'Paper D', 'Paper E', 'Paper F'];

graphTracer.set(citations);
Tracer.delay();

// BFS to find citation chains
function bfs(startNode) {
    const visited = new Set();
    const queue = [startNode];
    visited.add(startNode);

    logger.println(`Starting BFS from ${paperNames[startNode]}`);
    graphTracer.visit(startNode);
    Tracer.delay();

    while (queue.length > 0) {
        const current = queue.shift();

        for (let neighbor = 0; neighbor < citations.length; neighbor++) {
            if (citations[current][neighbor] === 1 && !visited.has(neighbor)) {
                visited.add(neighbor);
                queue.push(neighbor);

                logger.println(`${paperNames[current]} cites ${paperNames[neighbor]}`);
                graphTracer.visit(neighbor, current);
                Tracer.delay();
            }
        }
    }

    logger.println(`BFS complete. Visited ${visited.size} papers.`);
}

bfs(0);