Multiple Layouts - Compare different layout algorithms

Multiple Layout Algorithms Comparison

Functional Overview

This example demonstrates side-by-side comparison of different layout algorithms applied to the same graph data. Users can see how force-directed, tree, circular, and hierarchical layouts arrange the same nodes differently, helping them choose the best layout for their data.

Implementation of Key Features

Layout Runner

const runAllLayouts = async () => {
    const layouts = ['force', 'tree', 'circle', 'center'];
    const results = {};

    for (const layoutName of layouts) {
        // Clone original data
        const jsonData = JSON.parse(JSON.stringify(originalData));

        // Apply layout
        graphInstance.updateOptions({ layout: { layoutName } });
        await graphInstance.setJsonData(jsonData);
        await graphInstance.doLayout();

        // Capture positions
        results[layoutName] = graphInstance.getNodes().map(n => ({
            id: n.id,
            x: n.x,
            y: n.y
        }));
    }

    return results;
};

Comparison View

const renderComparison = () => {
    const layoutResults = runAllLayouts();

    return (
        <div className="comparison-grid">
            {Object.entries(layoutResults).map(([layoutName, positions]) => (
                <div key={layoutName} className="layout-panel">
                    <h3>{layoutName} Layout</h3>
                    <MiniGraph nodes={positions} />
                </div>
            ))}
        </div>
    );
};

Creative Use Cases

Layout Selection: Help users choose optimal layout algorithm.

Algorithm Research: Compare layout algorithm characteristics.

Teaching: Demonstrate how different algorithms work.

Data Exploration: Reveal different patterns in data.

Presentation: Show multiple perspectives simultaneously.