Force-Directed Graph with Dynamic Layout Parameters and Sea Anemone Effect

Functional Overview

This example demonstrates a force-directed layout with dynamic parameter adjustments that create an animated “sea anemone” effect. The graph automatically cycles between different layout parameter configurations every 3 seconds, causing nodes to rhythmically expand and contract like a sea anemone’s tentacles. This showcases how runtime layout parameter changes can create organic, breathing animations in graph visualizations.

Implementation of Key Features

Dynamic Layout Parameter Updates

The core feature is the automatic cycling between different force layout configurations:

const updateLayoutorOptions = async () => {
    const opts = [[0.2, 2], [1, 0.2]];
    const opt = opts[optIndex.current++];
    if (optIndex.current >= opts.length) {
        optIndex.current = 0;
    }

    graphInstance.updateOptions({
        layout: {
            layoutName: 'force',
            force_node_repulsion: opt[0],
            force_line_elastic: opt[1]
        }
    });
};

The first configuration [0.2, 2] has low node repulsion and high line elasticity, causing nodes to cluster tightly. The second configuration [1, 0.2] has high node repulsion and low line elasticity, causing nodes to spread apart. The automatic switching creates a breathing/pulsing animation.

Continuous Layout Execution

The layout runs continuously to allow smooth parameter transitions:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'force',
        maxLayoutTimes: 30000, // Very high value for continuous animation
        force_node_repulsion: 1,
        force_line_elastic: 1
    }
};

Setting maxLayoutTimes to a very high value (30,000 iterations) ensures the force layout keeps running, allowing the parameter changes to take immediate effect.

Interval-Based Automation

The parameter changes are triggered automatically using setInterval:

useEffect(() => {
    initializeGraph();
    const resizeTimer = setInterval(async () => {
        await updateLayoutorOptions();
    }, 3000);

    return () => {
        clearInterval(resizeTimer);
    };
}, []);

The 3-second interval provides enough time for the graph to stabilize at each configuration before switching to the next one. The cleanup function clears the interval when the component unmounts.

Large Tree Structure Dataset

The demo uses a substantial hierarchical dataset (100+ nodes) with clear tree structure:

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [/* 100 nodes with tree structure */],
    lines: [/* lines connecting the tree structure */]
        .map((line, index) => ({ ...line, id: `line_${index}` }))
};

The tree structure provides good distribution of nodes across the canvas, making the expansion/contraction effect more visually pronounced.

Creative Use Cases

Ambient Data Visualization

Create ambient visualizations for lobbies, public spaces, or digital art installations where the gentle breathing motion provides visual interest without demanding attention. The automatic cycling creates a meditative, ever-changing display.

System Health Monitoring

Adapt for monitoring dashboards where the breathing animation represents system “aliveness”. For example, use faster/slower breathing cycles to indicate system load, or change color schemes based on health status while maintaining the organic motion.

Presentations and Storytelling

Use the automatic transitions to gradually reveal different aspects of network structure. During presentations, the expanding/contracting motion can draw attention to different clusters or relationships as they become more or less dispersed.

Stress Testing and Performance Demo

Demonstrate the performance capabilities of the graph visualization system by showing smooth, continuous layout updates with large datasets. This can be useful for sales demos or technical showcases.

Biological Process Simulation

Adapt for scientific visualizations of biological processes such as cell respiration, muscle contraction, or population dynamics. The rhythmic expansion and contraction can naturally represent these organic processes.

Background Loading Animation

Use as an engaging background animation while data is being loaded or processed. The organic motion indicates activity and provides visual feedback that the system is working.