Relation Graph

Functional Overview

This example demonstrates an advanced force-directed graph visualization with dynamic data grouping and clustering capabilities. It implements a custom force layout algorithm that automatically groups and clusters nodes based on multiple dimensions (region, major, grade, gender). The visualization provides real-time layout recalculation when users switch between different grouping criteria, making it ideal for analyzing multi-dimensional categorical data.

Implementation of Key Features

Custom Force Layout Implementation

The demo extends the built-in force layout by creating a custom MyForceLayout class that integrates with relation-graph’s layout system:

const myLayout = new MyForceLayout({
    maxLayoutTimes: Number.MAX_SAFE_INTEGER,
    force_node_repulsion: 0.4,
    force_line_elastic: 0.1
}, graphInstance.getOptions(), graphInstance);

graphInstance.setLayoutor(myLayout, true, true);
const rootNode = graphInstance.getNodeById('a');
myLayout.placeNodes(graphInstance.getNodes(), rootNode);

This allows the layout to run continuously while being controllable through relation-graph’s toolbar buttons (start/stop layout).

Dynamic Grouping System

The core feature is the ability to regroup nodes on-the-fly based on different attributes:

const updateGroupByValue = async () => {
    graphInstance.stopAutoLayout();
    // Update node grouping attribute
    graphInstance.getNodes().forEach(node => {
        graphInstance.updateNodeData(node, {
            currentGroupValue: node.data[currentGroupBy]
        });
    });
    // Restart force calculation
    setTimeout(async () => {
        graphInstance.startAutoLayout();
    }, 200);
};

When users select a different grouping criterion (region, major, grade, or gender), the system updates the currentGroupValue property in each node’s data and restarts the force layout, causing nodes to naturally cluster by their new group assignments.

Multi-Dimensional Node Styling

Nodes display multiple visual attributes simultaneously:

const node: JsonNode = {
    id: 'u-' + graphInstance.generateNewNodeId(),
    text: userName,
    x: Math.random() * 300,
    y: Math.random() * 300,
    data: {
        userRegion: region.code,
        userRegionIcon: region.icon,
        userMajor: majors[Math.floor(Math.random() * majors.length)],
        userGrade: randomGrade.grade,
        userGender
    }
};
node.color = randomGrade.color;  // Color represents grade
node.nodeShape = userGender === 'Male' ? RGNodeShape.rect : RGNodeShape.circle;  // Shape represents gender
node.data.currentGroupValue = node.data[currentGroupBy];  // Current grouping field

This allows the force layout to cluster nodes based on the active grouping criterion while maintaining visual distinction for other dimensions.

Rich Node Slot Rendering

The demo uses RGSlotOnNode to create complex node displays:

<RGSlotOnNode>
    {({ node }) => (
        <div className="px-6 py-1 w-full h-full flex place-items-center justify-center text-xs">
            <div className="px-3 py-0.5 bg-gray-100 bg-opacity-30 rounded text-black text-sm">
                {node.text}
            </div>
            <div className="absolute left-[-3px] top-[-3px] h-4 w-4 border border-gray-900 bg-gray-600 rounded text-white text-sm flex place-items-center justify-center">
                {node.data.userMajor.substring(0, 1).toUpperCase()}
            </div>
            <div className="absolute right-[-3px] bottom-[-3px] text-xl">
                {node.data.userRegionIcon}
            </div>
        </div>
    )}
</RGSlotOnNode>

Each node displays the user name, major abbreviation (top-left badge), and region flag (bottom-right icon).

Interactive Legend Panel

A DataLegendPanel component provides visual reference for all data dimensions:

<RGSlotOnView>
    <div className="pointer-events-auto absolute top-2 left-2">
        <DataLegendPanel />
    </div>
</RGSlotOnView>

The panel shows color coding for grades, icon reference for regions, badge styles for majors, and shape indicators for gender, making the visualization self-explanatory.

Creative Use Cases

Customer Segmentation Analysis

Apply this technique to customer data where dimensions include purchase category, loyalty tier, geographic region, and customer type. Switch between grouping criteria to identify cross-segment patterns, such as high-value customers in specific regions or product categories favored by certain demographics.

Organizational Network Analysis

Use for visualizing organizational structures where nodes represent employees grouped by department, location, role level, or team. Switching between groupings can reveal siloed communication patterns, cross-functional collaboration clusters, or geographic distribution of expertise.

Social Media Community Detection

Implement for social network analysis where nodes are users grouped by interest category, engagement level, platform, or community membership. This helps identify micro-communities, understand content propagation patterns, and detect influential users across different segments.

Product Feature Association Analysis

Adapt for e-commerce product analysis where products are grouped by category, price range, brand, or customer rating. This visualization can reveal product affinities and help optimize product bundling strategies.

Academic Research Collaboration Mapping

Use in research institutions to visualize collaborations between researchers grouped by field of study, institution, career stage, or funding source. This can identify interdisciplinary collaboration opportunities and research network gaps.

Force Classifier