Advanced Force-Directed Graph with Progressive Node Addition and Visual Effects

Functional Overview

This enhanced version of the force-directed classifier introduces progressive node addition, animated visual effects, and real-time graph evolution. Unlike the basic version which initializes all nodes at once, this demo dynamically adds nodes over time with adaptive timing based on the current graph size. It also features a decorative electric border effect using SVG filters and radial gradient background elements placed on the canvas.

Implementation of Key Features

Progressive Node Addition with Adaptive Timing

The demo implements an intelligent node generation system that adjusts its speed based on graph complexity:

const startGenerateNodes = () => {
    const currentNodesCount = graphInstance.getNodes().length;
    if (currentNodesCount > 300) {
        return; // Stop when reaching maximum capacity
    }
    const speed = currentNodesCount < 60 ? 100 : (currentNodesCount < 120 ? 500 : 1000);
    generateNewNodeTimerRef.current = setTimeout(() => {
        graphInstance.stopAutoLayout();
        const randomUsers = generateNodes(1);
        randomUsers.forEach(n => {
            n.x = 0;
            n.y = 0;
        });
        graphInstance.addNodes(randomUsers);
        graphInstance.startAutoLayout();
        startGenerateNodes();
    }, speed);
};

The adaptive speed mechanism adds nodes rapidly when the graph is sparse (100ms interval), then slows down as the graph grows (500ms, then 1000ms), ensuring smooth performance and visually pleasing progression.

Decorative Canvas Elements with Electric Border Effect

The demo showcases how to add purely decorative elements to the graph canvas using RGSlotOnCanvas:

<RGSlotOnCanvas>
    <div className="absolute -top-10 -left-10">
        <ElectricBorderCard width={'200px'} height={'200px'} borderRadius="50%">
            <div className="w-full h-full rounded-full bg-[radial-gradient(circle_at_center,rgba(99,102,241,0.9)_0%,rgba(99,102,241,0.4)_35%,rgba(99,102,241,0.15)_55%,rgba(99,102,241,0.05)_70%,transparent_75%)]" />
        </ElectricBorderCard>
    </div>
</RGSlotOnCanvas>

This creates a radial gradient “glow” effect with an animated electric border using SVG filters. The element is positioned outside the normal canvas area (-top-10 -left-10) to create a decorative corner accent that doesn’t interfere with the graph content.

Cleanup and Lifecycle Management

Proper cleanup of timers prevents memory leaks:

useEffect(() => {
    callOnceFunction(() => {
        initializeGraph();
    });
    return () => {
        clearInterval(generateNewNodeTimerRef.current);
    };
}, []);

The cleanup function ensures that the node generation timer is properly cleared when the component unmounts.

React-Based State Management

The demo uses React’s useRef to track the current grouping field independently of re-renders:

const groupBy = React.useRef('userRegion');

const onClick={() => {
    groupBy.current = item.code;
    setCurrentGroupBy(item.code);
}}

This pattern allows the grouping logic to access the latest value without triggering unnecessary re-renders, while the state variable still drives UI updates.

Creative Use Cases

Real-Time Data Stream Visualization

Adapt this progressive addition approach for real-time data visualization scenarios such as live social media feeds, transaction monitoring, or sensor networks. Each new node could represent a new tweet, transaction, or sensor reading, with the graph automatically organizing them by category, value range, or source.

Dynamic Network Growth Simulation

Use for simulating network growth scenarios in research or education. For example, simulate the growth of a social network, the expansion of transportation infrastructure, or the evolution of neural connections in developmental biology, with nodes appearing over time to show how networks naturally evolve.

Progressive Disclosure in Data Exploration

Implement for large datasets where showing all nodes at once would be overwhelming. Gradually reveal nodes based on user interactions (e.g., hover, click, or scroll), allowing users to explore the data at their own pace while maintaining spatial organization through the force layout.

Storytelling and Narrative Visualization

Use the progressive node addition to create animated visual narratives. For example, show the spread of a disease outbreak, the diffusion of innovations, or the expansion of a historical empire, with each new node representing a temporal event in the story.

Performance Testing and Benchmarking

Adapt the adaptive timing mechanism for performance testing of graph rendering systems. By measuring frame rates and interaction responsiveness as nodes are progressively added, you can establish performance baselines and identify optimization opportunities for large-scale visualizations.