npm - @graphty/layout - Versions diffs - 1.1.0 → 1.2.0 - Mend

@graphty/layout 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/.env.example +11 -0
package/.github/workflows/ci.yml +89 -14
package/.releaserc.json +22 -0
package/CHANGELOG.md +31 -0
package/CLAUDE.md +104 -0
package/CONTRIBUTING.md +1 -0
package/DEPLOYMENT.md +59 -0
package/README.md +662 -93
package/dist/layout-helpers.d.ts +123 -0
package/dist/layout-helpers.js +458 -0
package/dist/layout-helpers.js.map +1 -0
package/dist/layout.d.ts +275 -0
package/dist/layout.js +2304 -0
package/dist/layout.js.map +1 -0
package/dist/vitest.config.d.ts +2 -0
package/dist/vitest.config.js +30 -0
package/dist/vitest.config.js.map +1 -0
package/examples/3d-force-directed.html +611 -0
package/examples/3d-kamada-kawai.html +394 -0
package/examples/3d-layout-comparison.html +448 -0
package/examples/3d-spherical-layout.html +319 -0
package/examples/arf-layout.html +13 -1
package/examples/bfs-layout.html +49 -39
package/examples/bipartite-layout.html +89 -69
package/examples/circular-layout.html +26 -35
package/examples/forceatlas2-layout.html +134 -28
package/examples/index.html +75 -0
package/examples/kamada-kawai-layout.html +13 -1
package/examples/multipartite-layout.html +73 -88
package/examples/planar-layout.html +13 -1
package/examples/random-layout.html +13 -1
package/examples/shell-layout.html +65 -34
package/examples/spectral-layout.html +13 -1
package/examples/spiral-layout.html +13 -1
package/examples/spring-layout.html +25 -3
package/layout-helpers.ts +560 -0
package/layout.ts +316 -14
package/package.json +20 -6
package/test/arf-layout.test.ts +443 -0
package/test/bfs-layout.test.ts +427 -0
package/test/bipartite-layout.test.ts +344 -0
package/test/circular-layout.test.ts +442 -0
package/test/forceatlas2-layout.test.ts +405 -0
package/test/fruchterman-reingold-layout.test.ts +477 -0
package/test/graph-generators.test.ts +450 -0
package/test/kamada-kawai-layout.test.ts +623 -0
package/test/multipartite-layout.test.ts +404 -0
package/test/planar-layout.test.ts +266 -0
package/test/random-layout.test.ts +254 -0
package/test/rescale-layout.test.ts +373 -0
package/test/shell-layout.test.ts +347 -0
package/test/spectral-layout.test.ts +378 -0
package/test/spiral-layout.test.ts +338 -0
package/test/spring-layout.test.ts +241 -0
package/vite.config.js +36 -0
package/vitest.config.ts +30 -0
package/.releaserc +0 -3

package/examples/bipartite-layout.html CHANGED Viewed

@@ -1,6 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <!-- Eruda Mobile Console -->
+  <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
+  <script>
+    // Initialize Eruda console for mobile debugging
+    if (typeof eruda !== "undefined") {
+      eruda.init();
+      // Auto-show on mobile devices
+      if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
+        eruda.show();
+      }
+    }
+  </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bipartite Layout Test</title>
@@ -102,15 +114,15 @@
             <h3>Graph Settings</h3>
             <div class="control-group">
-                <label for="num-nodes">Total number of nodes:</label>
-                <input type="range" id="num-nodes" min="4" max="20" value="12">
-                <span id="num-nodes-value">12</span>
+                <label for="set-a-size">Set A size:</label>
+                <input type="range" id="set-a-size" min="2" max="15" value="5">
+                <span id="set-a-size-value">5</span>
             </div>
             <div class="control-group">
-                <label for="partition-ratio">Partition ratio (A:B):</label>
-                <input type="range" id="partition-ratio" min="0.2" max="0.8" step="0.1" value="0.5">
-                <span id="partition-ratio-value">50%-50%</span>
+                <label for="set-b-size">Set B size:</label>
+                <input type="range" id="set-b-size" min="2" max="15" value="7">
+                <span id="set-b-size-value">7</span>
             </div>
             <div class="control-group">
@@ -119,7 +131,8 @@
                 <span id="edge-density-value">0.3</span>
             </div>
-            <button onclick="newGraph()">New Graph</button>
+            <button onclick="newGraph()">Generate Bipartite Graph</button>
+            <button onclick="generateMixedGraph()">Generate Random Graph</button>
             <div id="partition-info" class="partition-info"></div>
         </div>
@@ -149,44 +162,15 @@
     </div>
     <script type="module">
-        import { bipartiteLayout } from '../dist/layout.js';
+        import {
+            bipartiteLayout,
+            bipartiteGraph,
+            detectBipartite,
+            randomGraph
+        } from "./layout.js";
         let currentGraph = null;
-        function generateBipartiteGraph(totalNodes, partitionRatio, edgeDensity) {
-            const setASize = Math.round(totalNodes * partitionRatio);
-            const setBSize = totalNodes - setASize;
-            const setA = Array.from({length: setASize}, (_, i) => `A${i}`);
-            const setB = Array.from({length: setBSize}, (_, i) => `B${i}`);
-            const allNodes = [...setA, ...setB];
-            const edges = [];
-            const maxEdges = setASize * setBSize;
-            const targetEdges = Math.floor(maxEdges * edgeDensity);
-            // Generate random bipartite edges (only between setA and setB)
-            for (let i = 0; i < targetEdges; i++) {
-                const nodeA = setA[Math.floor(Math.random() * setA.length)];
-                const nodeB = setB[Math.floor(Math.random() * setB.length)];
-                // Check if edge already exists
-                const edgeExists = edges.some(([s, t]) =>
-                    (s === nodeA && t === nodeB) || (s === nodeB && t === nodeA)
-                );
-                if (!edgeExists) {
-                    edges.push([nodeA, nodeB]);
-                }
-            }
-            return {
-                nodes: () => allNodes,
-                edges: () => edges,
-                setA,
-                setB
-            };
-        }
+        let detectedBipartite = null;
         function visualizeGraph(graph, positions) {
             const svg = document.getElementById('graph-svg');
@@ -237,8 +221,9 @@
                 const x = margin + (pos[0] - minX) / rangeX * scaleX;
                 const y = margin + (pos[1] - minY) / rangeY * scaleY;
-                // Determine color based on set
-                const isSetA = graph.setA.includes(node);
+                // Determine color based on set (use detected sets if available)
+                const setA = detectedBipartite ? detectedBipartite.setA : graph.setA;
+                const isSetA = setA.includes(node);
                 const color = isSetA ? '#E91E63' : '#2196F3';
                 const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
@@ -299,30 +284,28 @@
         }
         window.newGraph = function() {
-            const totalNodes = parseInt(document.getElementById('num-nodes').value);
-            const partitionRatio = parseFloat(document.getElementById('partition-ratio').value);
+            const setASize = parseInt(document.getElementById('set-a-size').value);
+            const setBSize = parseInt(document.getElementById('set-b-size').value);
             const edgeDensity = parseFloat(document.getElementById('edge-density').value);
-            currentGraph = generateBipartiteGraph(totalNodes, partitionRatio, edgeDensity);
+            // Generate bipartite graph using our generator
+            currentGraph = bipartiteGraph(setASize, setBSize, edgeDensity, Date.now());
-            // Just visualize with random positions initially
-            const positions = {};
-            currentGraph.nodes().forEach(node => {
-                positions[node] = [
-                    (Math.random() - 0.5) * 1.5,
-                    (Math.random() - 0.5) * 1.5
-                ];
-            });
+            // Auto-detect bipartite structure
+            detectedBipartite = detectBipartite(currentGraph);
-            visualizeGraph(currentGraph, positions);
+            // Apply layout immediately
+            applyLayout();
             // Update partition info
             const infoDiv = document.getElementById('partition-info');
+            const totalNodes = setASize + setBSize;
             infoDiv.innerHTML = `
-                <strong>Partition:</strong><br>
-                Set A: ${currentGraph.setA.length} nodes (${((currentGraph.setA.length / totalNodes) * 100).toFixed(1)}%)<br>
-                Set B: ${currentGraph.setB.length} nodes (${((currentGraph.setB.length / totalNodes) * 100).toFixed(1)}%)<br>
-                Edges: ${currentGraph.edges().length}
+                <strong>Generated Bipartite Graph:</strong><br>
+                Set A: ${currentGraph.setA.length} nodes (${((setASize / totalNodes) * 100).toFixed(1)}%)<br>
+                Set B: ${currentGraph.setB.length} nodes (${((setBSize / totalNodes) * 100).toFixed(1)}%)<br>
+                Edges: ${currentGraph.edges().length}<br>
+                <strong>Auto-detected:</strong> ${detectedBipartite ? 'Yes ✓' : 'No ✗'}
             `;
         };
@@ -332,29 +315,66 @@
             const alignment = document.getElementById('alignment').value;
             const aspectRatio = parseFloat(document.getElementById('aspect-ratio').value);
-            const positions = bipartiteLayout(currentGraph, currentGraph.setA, alignment, 1, [0, 0], aspectRatio);
+            // Use detected sets if available, otherwise use generated sets
+            const setA = detectedBipartite ? detectedBipartite.setA : currentGraph.setA;
+            const positions = bipartiteLayout(currentGraph, setA, alignment, 1, [0, 0], aspectRatio);
             visualizeGraph(currentGraph, positions);
         };
         function setupControls() {
-            const controls = ['num-nodes', 'partition-ratio', 'aspect-ratio', 'edge-density'];
+            const controls = ['set-a-size', 'set-b-size', 'aspect-ratio', 'edge-density'];
             controls.forEach(id => {
                 const slider = document.getElementById(id);
                 const valueSpan = document.getElementById(id + '-value');
                 slider.oninput = function() {
-                    if (id === 'partition-ratio') {
-                        const ratio = parseFloat(this.value);
-                        valueSpan.textContent = `${(ratio * 100).toFixed(0)}%-${((1 - ratio) * 100).toFixed(0)}%`;
-                    } else {
-                        valueSpan.textContent = this.value;
-                    }
+                    valueSpan.textContent = this.value;
                 };
             });
             document.getElementById('alignment').onchange = null;
         }
+        window.generateMixedGraph = function() {
+            const totalNodes = parseInt(document.getElementById('set-a-size').value) +
+                               parseInt(document.getElementById('set-b-size').value);
+            const edgeDensity = parseFloat(document.getElementById('edge-density').value);
+            // Generate random graph that might or might not be bipartite
+            currentGraph = randomGraph(totalNodes, edgeDensity * 0.3, Date.now());
+            // Try to detect bipartite structure
+            detectedBipartite = detectBipartite(currentGraph);
+            if (detectedBipartite) {
+                // If bipartite, use bipartite layout
+                applyLayout();
+                const infoDiv = document.getElementById('partition-info');
+                infoDiv.innerHTML = `
+                    <strong>Random Graph (Bipartite Detected!):</strong><br>
+                    Set A: ${detectedBipartite.setA.length} nodes<br>
+                    Set B: ${detectedBipartite.setB.length} nodes<br>
+                    Edges: ${currentGraph.edges().length}<br>
+                    <strong>Auto-detected:</strong> Yes ✓
+                `;
+            } else {
+                // Not bipartite - show with spring layout instead
+                const { springLayout } = await import('../dist/layout.js');
+                const positions = springLayout(currentGraph);
+                visualizeGraph(currentGraph, positions);
+                const infoDiv = document.getElementById('partition-info');
+                infoDiv.innerHTML = `
+                    <strong>Random Graph (Not Bipartite):</strong><br>
+                    Nodes: ${currentGraph.nodes().length}<br>
+                    Edges: ${currentGraph.edges().length}<br>
+                    <strong>Auto-detected:</strong> No ✗<br>
+                    <em>Using spring layout instead</em>
+                `;
+            }
+        };
         setupControls();
         newGraph();
     </script>

package/examples/circular-layout.html CHANGED Viewed

@@ -1,6 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <!-- Eruda Mobile Console -->
+  <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
+  <script>
+    // Initialize Eruda console for mobile debugging
+    if (typeof eruda !== "undefined") {
+      eruda.init();
+      // Auto-show on mobile devices
+      if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
+        eruda.show();
+      }
+    }
+  </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Circular Layout Test</title>
@@ -136,51 +148,30 @@
     </div>
     <script type="module">
-        import { circularLayout } from '../dist/layout.js';
+        import {
+            circularLayout,
+            completeGraph,
+            cycleGraph,
+            wheelGraph,
+            randomGraph
+        } from "./layout.js";
         let currentGraph = null;
         function generateGraph(type, numNodes) {
-            const nodes = Array.from({length: numNodes}, (_, i) => i);
-            const edges = [];
             switch(type) {
                 case 'complete':
-                    for(let i = 0; i < numNodes; i++) {
-                        for(let j = i + 1; j < numNodes; j++) {
-                            edges.push([i, j]);
-                        }
-                    }
-                    break;
+                    return completeGraph(numNodes);
                 case 'cycle':
-                    for(let i = 0; i < numNodes; i++) {
-                        edges.push([i, (i + 1) % numNodes]);
-                    }
-                    break;
+                    return cycleGraph(numNodes);
                 case 'wheel':
-                    // Center connected to all
-                    for(let i = 1; i < numNodes; i++) {
-                        edges.push([0, i]);
-                    }
-                    // Outer cycle
-                    for(let i = 1; i < numNodes; i++) {
-                        edges.push([i, i === numNodes - 1 ? 1 : i + 1]);
-                    }
-                    break;
+                    return wheelGraph(numNodes);
                 case 'random':
                 default:
-                    const numEdges = Math.floor(numNodes * 1.2);
-                    for(let i = 0; i < numEdges; i++) {
-                        const a = Math.floor(Math.random() * numNodes);
-                        const b = Math.floor(Math.random() * numNodes);
-                        if(a !== b && !edges.some(e => (e[0] === a && e[1] === b) || (e[0] === b && e[1] === a))) {
-                            edges.push([a, b]);
-                        }
-                    }
-                    break;
+                    // Random graph with ~1.2 edges per node
+                    const edgeProbability = Math.min(2.4 / (numNodes - 1), 1);
+                    return randomGraph(numNodes, edgeProbability, Date.now());
             }
-            return { nodes: () => nodes, edges: () => edges };
         }
         function visualizeGraph(graph, positions) {
@@ -298,4 +289,4 @@
         newGraph();
     </script>
 </body>
-</html>
+</html>

package/examples/forceatlas2-layout.html CHANGED Viewed

@@ -1,6 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <!-- Eruda Mobile Console -->
+  <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
+  <script>
+    // Initialize Eruda console for mobile debugging
+    if (typeof eruda !== "undefined") {
+      eruda.init();
+      // Auto-show on mobile devices
+      if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
+        eruda.show();
+      }
+    }
+  </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ForceAtlas2 Layout Test</title>
@@ -153,12 +165,17 @@
             </div>
             <div class="control-group">
+                <label for="auto-configure">Auto-configure parameters:</label>
+                <input type="checkbox" id="auto-configure" checked>
+            </div>
+            <div class="control-group" id="scaling-group">
                 <label for="scaling-ratio">Scaling Ratio:</label>
                 <input type="range" id="scaling-ratio" min="0.5" max="10" step="0.5" value="2">
                 <span id="scaling-ratio-value">2.0</span>
             </div>
-            <div class="control-group">
+            <div class="control-group" id="gravity-group">
                 <label for="gravity">Gravity:</label>
                 <input type="range" id="gravity" min="0" max="5" step="0.1" value="1">
                 <span id="gravity-value">1.0</span>
@@ -185,19 +202,67 @@
     </div>
     <script type="module">
-        import { forceatlas2Layout } from '../dist/layout.js';
+        import {
+            forceatlas2Layout,
+            randomGraph,
+            scaleFreeGraph,
+            gridGraph,
+            autoConfigureForce
+        } from "./layout.js";
         let currentGraph = null;
-        let currentSeed = Math.floor(Math.random() * 1000);
+        let currentConfig = null;
         function generateGraph(type, numNodes) {
-            const nodes = Array.from({length: numNodes}, (_, i) => i);
-            const edges = [];
             switch(type) {
                 case 'scale-free':
-                    // Barabási–Albert model (preferential attachment)
-                    // Start with a small connected graph
+                    return scaleFreeGraph(numNodes, 2, Date.now());
+                case 'community':
+                    // Use multiple smaller scale-free graphs
+                    const numCommunities = Math.ceil(numNodes / 10);
+                    const nodesPerCommunity = Math.floor(numNodes / numCommunities);
+                    const nodes = [];
+                    const edges = [];
+                    // Create communities
+                    for (let c = 0; c < numCommunities; c++) {
+                        const start = c * nodesPerCommunity;
+                        const end = Math.min(start + nodesPerCommunity, numNodes);
+                        // Dense connections within community
+                        for (let i = start; i < end; i++) {
+                            nodes.push(i);
+                            for (let j = i + 1; j < end; j++) {
+                                if (Math.random() < 0.6) {
+                                    edges.push([i, j]);
+                                }
+                            }
+                        }
+                        // Sparse connections between communities
+                        if (c > 0) {
+                            const prevStart = (c - 1) * nodesPerCommunity;
+                            const prevEnd = Math.min(prevStart + nodesPerCommunity, numNodes);
+                            for (let i = start; i < end && i < start + 2; i++) {
+                                for (let j = prevStart; j < prevEnd && j < prevStart + 2; j++) {
+                                    if (Math.random() < 0.1) {
+                                        edges.push([i, j]);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    return { nodes: () => nodes, edges: () => edges };
+                case 'grid':
+                    const size = Math.ceil(Math.sqrt(numNodes));
+                    return gridGraph(size, size);
+                case 'random':
+                default:
+                    return randomGraph(numNodes, 0.1, Date.now());
                     for(let i = 1; i < Math.min(5, numNodes); i++) {
                         edges.push([0, i]);
                     }
@@ -394,9 +459,10 @@
                 const x = margin + (pos[0] - minX) / rangeX * scaleX;
                 const y = margin + (pos[1] - minY) / rangeY * scaleY;
-                // Node size based on degree/mass
-                const mass = graph.masses[node] || 1;
-                const radius = 5 + Math.sqrt(mass) * 1.5;
+                // Node size based on degree
+                const edges = graph.edges();
+                const degree = edges.filter(([u, v]) => u === node || v === node).length;
+                const radius = 4 + Math.sqrt(degree) * 1.5;
                 // Color based on position/edge distribution
                 const hue = (node * 360 / nodes.length) % 360;
@@ -430,20 +496,24 @@
             const graphType = document.getElementById('graph-type').value;
             try {
-                // Generate new graph and re-seed
+                // Generate new graph
                 currentGraph = generateGraph(graphType, numNodes);
-                currentSeed = Math.floor(Math.random() * 1000);
-                // Just visualize without layout initially
-                const positions = {};
-                currentGraph.nodes().forEach(node => {
-                    // Random positions in a circle
-                    const angle = Math.random() * Math.PI * 2;
-                    const radius = Math.random() * 0.5;
-                    positions[node] = [
-                        Math.cos(angle) * radius,
-                        Math.sin(angle) * radius
-                    ];
+                // Auto-configure parameters
+                currentConfig = autoConfigureForce(currentGraph);
+                // Update controls with recommended values
+                if (document.getElementById('auto-configure').checked) {
+                    document.getElementById('iterations').value = currentConfig.iterations;
+                    document.getElementById('iterations-value').textContent = currentConfig.iterations;
+                    document.getElementById('scaling-ratio').value = currentConfig.scalingRatio;
+                    document.getElementById('scaling-ratio-value').textContent = currentConfig.scalingRatio.toFixed(1);
+                    document.getElementById('gravity').value = currentConfig.gravity;
+                    document.getElementById('gravity-value').textContent = currentConfig.gravity.toFixed(1);
+                }
+                // Apply layout immediately
+                applyLayout();
                 });
                 visualizeGraph(currentGraph, positions);
@@ -470,9 +540,27 @@
         };
         async function runForceAtlas2() {
-            const iterations = parseInt(document.getElementById('iterations').value);
-            const scalingRatio = parseFloat(document.getElementById('scaling-ratio').value);
-            const gravity = parseFloat(document.getElementById('gravity').value);
+            const autoConfig = document.getElementById('auto-configure').checked;
+            let iterations, scalingRatio, gravity;
+            if (autoConfig && currentConfig) {
+                iterations = currentConfig.iterations;
+                scalingRatio = currentConfig.scalingRatio;
+                gravity = currentConfig.gravity;
+                // Update sliders to show auto values
+                document.getElementById('iterations').value = iterations;
+                document.getElementById('iterations-value').textContent = iterations;
+                document.getElementById('scaling-ratio').value = scalingRatio;
+                document.getElementById('scaling-ratio-value').textContent = scalingRatio.toFixed(1);
+                document.getElementById('gravity').value = gravity;
+                document.getElementById('gravity-value').textContent = gravity.toFixed(1);
+            } else {
+                iterations = parseInt(document.getElementById('iterations').value);
+                scalingRatio = parseFloat(document.getElementById('scaling-ratio').value);
+                gravity = parseFloat(document.getElementById('gravity').value);
+            }
             const strongGravity = document.getElementById('strong-gravity').checked;
             const dissuadeHubs = document.getElementById('dissuade-hubs').checked;
             const linlog = document.getElementById('linlog').checked;
@@ -489,12 +577,12 @@
                 gravity,
                 false, // distributedAction
                 strongGravity,
-                currentGraph.masses, // nodeMass
+                null, // nodeMass
                 null, // nodeSize
                 null, // weight
                 dissuadeHubs,
                 linlog,
-                currentSeed
+                Date.now()
             );
             visualizeGraph(currentGraph, positions);
@@ -510,6 +598,24 @@
                 };
             });
+            // Auto-config checkbox handler
+            document.getElementById('auto-configure').onchange = function() {
+                const groups = ['scaling-group', 'gravity-group'];
+                groups.forEach(groupId => {
+                    const group = document.getElementById(groupId);
+                    group.style.opacity = this.checked ? '0.5' : '1';
+                });
+                if (this.checked && currentConfig) {
+                    document.getElementById('iterations').value = currentConfig.iterations;
+                    document.getElementById('iterations-value').textContent = currentConfig.iterations;
+                    document.getElementById('scaling-ratio').value = currentConfig.scalingRatio;
+                    document.getElementById('scaling-ratio-value').textContent = currentConfig.scalingRatio.toFixed(1);
+                    document.getElementById('gravity').value = currentConfig.gravity;
+                    document.getElementById('gravity-value').textContent = currentConfig.gravity.toFixed(1);
+                }
+            };
             // Remove auto-update on change for these controls
             document.getElementById('graph-type').onchange = null;

package/examples/index.html CHANGED Viewed

@@ -1,6 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <!-- Eruda Mobile Console -->
+  <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
+  <script>
+    // Initialize Eruda console for mobile debugging
+    if (typeof eruda !== "undefined") {
+      eruda.init();
+      // Auto-show on mobile devices
+      if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
+        eruda.show();
+      }
+    }
+  </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NetworkX Layout Tests</title>
@@ -71,6 +83,38 @@
             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
             padding: 20px;
         }
+        .section-header {
+            text-align: center;
+            margin: 40px 0 20px 0;
+            color: #333;
+        }
+        .section-header h2 {
+            color: #2c5aa0;
+            margin-bottom: 10px;
+        }
+        .section-header p {
+            color: #666;
+            margin: 0;
+        }
+        .layout-card.threed {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .layout-card.threed .layout-title {
+            color: #fff;
+        }
+        .layout-card.threed .layout-description {
+            color: #f0f0f0;
+        }
+        .layout-card.threed .test-button {
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+        }
+        .layout-card.threed .test-button:hover {
+            background: rgba(255, 255, 255, 0.3);
+            border-color: rgba(255, 255, 255, 0.5);
+        }
     </style>
 </head>
 <body>
@@ -79,6 +123,11 @@
         <p>Interactive tests for graph layout algorithms in JavaScript</p>
     </div>
+    <div class="section-header">
+        <h2>2D Layout Algorithms</h2>
+        <p>Classic graph layout algorithms for 2D visualization</p>
+    </div>
     <div class="layout-grid">
         <div class="layout-card">
             <div class="layout-title">Random Layout</div>
@@ -159,6 +208,32 @@
         </div>
     </div>
+    <div class="section-header">
+        <h2>3D Layout Algorithms</h2>
+        <p>Interactive 3D visualizations with Three.js - drag to rotate, scroll to zoom</p>
+    </div>
+    <div class="layout-grid">
+        <div class="layout-card threed">
+            <div class="layout-title">3D Force-Directed Layouts</div>
+            <div class="layout-description">Compare spring, ForceAtlas2, and ARF algorithms in immersive 3D space with interactive controls</div>
+            <a href="3d-force-directed.html" class="test-button">Explore 3D</a>
+        </div>
+        <div class="layout-card threed">
+            <div class="layout-title">3D Kamada-Kawai Layout</div>
+            <div class="layout-description">Stress-minimization algorithm in 3D with real-time stress calculation and graph generation</div>
+            <a href="3d-kamada-kawai.html" class="test-button">Explore 3D</a>
+        </div>
+        <div class="layout-card threed">
+            <div class="layout-title">3D Spherical Layout</div>
+            <div class="layout-description">Nodes positioned on a 3D sphere surface with auto-rotation and customizable graph types</div>
+            <a href="3d-spherical-layout.html" class="test-button">Explore 3D</a>
+        </div>
+    </div>
     <div class="footer">
         <p>Ported from NetworkX Python library - Interactive tests for JavaScript</p>
     </div>