Social network relationship graph

Basic Concepts of Social Network Relationship Graphs

A social network relationship graph is a visualization tool used to display connections and interactions between individuals. It consists of nodes (representing individuals or entities) and edges (representing relationships or interactions). This type of diagram is widely used in fields such as social network analysis, recommendation systems, and community detection. For example, Facebook's friend relationships and Twitter's follow networks can be represented using such diagrams.

Nodes are typically represented as circles, with their size reflecting the individual's importance (e.g., number of followers). Edges can be straight or curved lines, with their thickness indicating the strength of the relationship (e.g., interaction frequency). Directed edges represent one-way relationships (e.g., following), while undirected edges represent two-way relationships (e.g., friendships).

Implementing Basic Relationship Graphs with ECharts

ECharts provides a graph series specifically designed for drawing relationship graphs. Below is the simplest implementation of a social network relationship graph:

option = {
    series: [{
        type: 'graph',
        layout: 'force',
        data: [{
            name: 'Zhang San',
            symbolSize: 30
        }, {
            name: 'Li Si',
            symbolSize: 20
        }, {
            name: 'Wang Wu',
            symbolSize: 25
        }],
        links: [{
            source: 'Zhang San',
            target: 'Li Si'
        }, {
            source: 'Li Si',
            target: 'Wang Wu'
        }],
        force: {
            repulsion: 100
        }
    }]
};

This code creates three nodes and two edges, using a force-directed layout to automatically calculate node positions. The repulsion parameter controls the repulsive force between nodes—higher values result in greater spacing between nodes.

Customizing Node and Edge Styles

ECharts allows deep customization of node and edge appearances. Nodes can be styled with different shapes, colors, sizes, and labels:

data: [{
    name: 'Zhang San',
    symbolSize: 40,
    itemStyle: {
        color: '#FF6B81',
        borderColor: '#FF4757',
        borderWidth: 2
    },
    label: {
        show: true,
        fontSize: 14,
        fontWeight: 'bold'
    }
}, {
    name: 'Li Si',
    symbolSize: 30,
    itemStyle: {
        color: '#2ED573'
    }
}]

Edge styles can also be customized, including line type, color, and width:

links: [{
    source: 'Zhang San',
    target: 'Li Si',
    lineStyle: {
        color: '#A4B0BE',
        width: 2,
        type: 'dashed',
        curveness: 0.2
    }
}]

The curveness parameter controls the curvature of edges, where 0 is a straight line and 1 is the maximum curvature.

Advanced Configuration for Force-Directed Layouts

Force-directed layouts calculate node positions through physical simulations. ECharts provides several parameters to control the layout effect:

force: {
    initLayout: 'circular',  // Initial layout as circular
    repulsion: 150,         // Repulsive force between nodes
    gravity: 0.1,           // Centripetal force
    edgeLength: 100,        // Ideal edge length
    layoutAnimation: true,  // Enable layout animation
    friction: 0.6           // Friction coefficient
}

gravity controls the force pulling nodes toward the center—higher values bring nodes closer to the center. friction affects animation smoothness—lower values result in smoother animations.

Implementing Interactive Features

ECharts offers rich interactive features to enhance user experience:

option = {
    series: [{
        type: 'graph',
        // ...other configurations...
        emphasis: {  // Highlight styles
            focus: 'adjacency',
            itemStyle: {
                borderColor: '#000',
                borderWidth: 3
            },
            lineStyle: {
                width: 3
            }
        },
        roam: true,  // Allow zooming and panning
        draggable: true,  // Allow node dragging
        categories: [{  // Node categories
            name: 'Regular User'
        }, {
            name: 'VIP User'
        }]
    }],
    tooltip: {
        formatter: function(params) {
            if(params.dataType === 'node') {
                return `${params.name}<br>Friends: ${params.value || 0}`;
            } else {
                return `${params.source} → ${params.target}`;
            }
        }
    }
};

When emphasis.focus is set to 'adjacency', hovering over a node highlights adjacent nodes and edges. categories allow nodes to be grouped into different categories, each with distinct colors and symbols.

Optimizing for Large-Scale Data

When the number of nodes exceeds 500, performance may become an issue. Here are optimization suggestions:

1. Enable progressive rendering:

series: [{
    progressiveThreshold: 500,
    progressive: 200
}]

2. Simplify visual effects:

series: [{
    itemStyle: {
        opacity: 0.8
    },
    lineStyle: {
        opacity: 0.3
    },
    blur: {
        itemStyle: {
            opacity: 0.1
        }
    }
}]

3. Use WebWorker for layout calculations:

series: [{
    layout: 'force',
    force: {
        workerEnabled: true
    }
}]

Dynamic Data Updates

Social network relationship graphs often require real-time updates. ECharts provides dynamic data interfaces:

// Add a new node
function addNode(name) {
    const option = myChart.getOption();
    option.series[0].data.push({
        name: name,
        symbolSize: Math.random() * 30 + 10
    });
    myChart.setOption(option);
}

// Add a new relationship
function addLink(source, target) {
    const option = myChart.getOption();
    option.series[0].links.push({
        source: source,
        target: target
    });
    myChart.setOption(option);
}

// Example of periodic updates
setInterval(() => {
    const nodes = ['A','B','C','D','E'];
    const source = nodes[Math.floor(Math.random() * nodes.length)];
    const target = nodes[Math.floor(Math.random() * nodes.length)];
    if(source !== target) addLink(source, target);
}, 2000);

Visualizing Community Detection Algorithms

ECharts can visualize community structures in networks using community detection algorithms:

// Assume community division is already calculated
const communities = {
    'group1': ['Zhang San','Li Si','Wang Wu'],
    'group2': ['Zhao Liu','Qian Qi','Sun Ba']
};

const option = {
    series: [{
        type: 'graph',
        data: Object.keys(communities).flatMap((group, i) => {
            return communities[group].map(name => ({
                name: name,
                category: group,
                itemStyle: {
                    color: ['#FF6B81','#2ED573','#1E90FF'][i]
                }
            }));
        }),
        links: [...],
        categories: Object.keys(communities).map(name => ({name}))
    }]
};

Real-World Social Network Data Example

Below is a complete example simulating a Twitter follow network:

// Simulated data
const users = [
    {id: 'elonmusk', name: 'Elon Musk', followers: 128000000, verified: true},
    {id: 'billgates', name: 'Bill Gates', followers: 38000000, verified: true},
    // ...more users...
];

const follows = [
    {source: 'user1', target: 'elonmusk'},
    {source: 'user2', target: 'billgates'},
    // ...more follow relationships...
];

// Convert to ECharts data format
const nodes = users.map(user => ({
    id: user.id,
    name: user.name,
    symbolSize: Math.log(user.followers) * 5,
    itemStyle: {
        color: user.verified ? '#1DA1F2' : '#657786'
    },
    label: {
        show: user.followers > 1000000
    }
}));

const links = follows.map(rel => ({
    source: rel.source,
    target: rel.target,
    lineStyle: {
        opacity: 0.3
    }
}));

// Configuration
const option = {
    tooltip: {},
    legend: {
        data: ['Verified', 'Regular']
    },
    series: [{
        type: 'graph',
        layout: 'force',
        data: nodes,
        links: links,
        force: {
            repulsion: 200,
            edgeLength: 100
        },
        categories: [
            {name: 'Verified'},
            {name: 'Regular'}
        ],
        emphasis: {
            focus: 'adjacency',
            scale: true
        },
        roam: true,
        label: {
            position: 'right'
        }
    }]
};

Advanced Visual Encoding Techniques

To enhance the chart's expressiveness, multiple visual encoding methods can be used:

1. Encode follower count with node size:

symbolSize: function(data) {
    return Math.min(50, Math.max(5, Math.log(data.followers) * 2));
}

2. Encode interaction frequency with edge width:

lineStyle: {
    width: function(data) {
        return Math.log(data.interactions) || 1;
    }
}

3. Use gradients to represent node importance:

itemStyle: {
    color: {
        type: 'radial',
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [{
            offset: 0, color: '#FFA502'
        }, {
            offset: 1, color: '#FF6348'
        }]
    }
}

4. Enhance interaction with animations:

series: [{
    edgeSymbol: ['circle', 'arrow'],
    edgeSymbolSize: [4, 10],
    edgeLabel: {
        show: true,
        formatter: '{c}',
        fontSize: 12
    },
    animationDuration: 1500,
    animationEasingUpdate: 'quinticInOut'
}]

Performance Monitoring and Debugging

For complex relationship graphs, performance monitoring is crucial:

// Performance monitoring
myChart.on('rendered', function() {
    console.timeEnd('render');
});

console.time('render');

// Debugging layout
myChart.on('forceLayoutIteration', function(params) {
    console.log('Iteration:', params.currentIteration);
});

// Error handling
myChart.on('error', function(err) {
    console.error('ECharts error:', err);
});

Mobile Adaptation

Special handling for mobile devices:

// Responsive configuration
function resizeChart() {
    const isMobile = window.innerWidth < 768;
    myChart.setOption({
        series: [{
            layout: isMobile ? 'circular' : 'force',
            force: isMobile ? null : {repulsion: 100},
            label: {
                show: !isMobile
            }
        }]
    });
}

window.addEventListener('resize', resizeChart);

Export and Sharing Features

Implement chart export as images or data:

// Export as image
document.getElementById('export').addEventListener('click', function() {
    const img = new Image();
    img.src = myChart.getDataURL({
        type: 'png',
        pixelRatio: 2,
        backgroundColor: '#fff'
    });
    window.open(img.src);
});

// Export JSON data
function exportData() {
    const option = myChart.getOption();
    const data = {
        nodes: option.series[0].data,
        links: option.series[0].links
    };
    const blob = new Blob([JSON.stringify(data)], {type: 'application/json'});
    saveAs(blob, 'network.json');
}