Trade Relationships - Visualize international trade flows between countries

International Trade Relationship Network

Functional Overview

This example visualizes international trade relationships between countries. Nodes represent countries, sized by GDP or trade volume, with connections showing import/export relationships. Line thickness and arrow direction indicate trade volume and flow direction.

Implementation of Key Features

Country Node Styling

const createCountryNode = (country: Country) => ({
    id: country.code,
    text: country.name,
    width: Math.sqrt(country.gdp) / 1000,
    height: Math.sqrt(country.gdp) / 1000,
    color: getRegionColor(country.region),
    data: { gdp: country.gdp, region: country.region }
});

Trade Flow Lines

const createTradeLine = (trade: TradeRelationship) => {
    const volume = trade.exportVolume + trade.importVolume;
    const lineWidth = Math.log(volume) / 10;

    return {
        from: trade.exporter,
        to: trade.importer,
        text: `$${(volume / 1e9).toFixed(1)}B`,
        lineWidth: lineWidth,
        color: trade.surplus > 0 ? '#4CAF50' : '#f44336'
    };
};

Regional Grouping

const groupByRegion = () => {
    const regions = ['North America', 'Europe', 'Asia', 'South America', 'Africa'];

    regions.forEach(region => {
        const countries = graphInstance.getNodes().filter(n => n.data.region === region);
        // Apply regional layout to grouped nodes
    });
};

Creative Use Cases

Economic Analysis: Understand global trade patterns and dependencies.

Policy Planning: Visualize impact of trade agreements.

Market Research: Identify export/import opportunities.

Supply Chain Mapping: Trace international supply chains.

Education: Teach global economics interactively.