Upload static/js/tradeflowmap.js with huggingface_hub

static/js/tradeflowmap.js

@@ -0,0 +1,682 @@
+/**
+ * Modern Trade Flow Map - Visualizes international trade flows with animated lines
+ * For International Trade Flow Predictor
+ * Based on AnyChart's flow map concept
+ */
+
+class TradeFlowMap {
+  constructor(containerId, options = {}) {
+    this.containerId = containerId;
+    this.options = {
+      width: options.width || '100%',
+      height: options.height || 350,
+      backgroundColor: options.backgroundColor || '#ffffff',
+      oceanColor: options.oceanColor || '#ffffff',
+      landColor: options.landColor || '#f0f0f0',  // Lighter gray for lands
+      countryStrokeColor: options.countryStrokeColor || '#e0e0e0', // Subtle borders
+      selectedCountryColor: options.selectedCountryColor || '#d1e5f8', // Subtle highlight
+      flowLineColor: options.flowLineColor || 'rgba(0, 103, 223, 0.7)', // More visible flows
+      flowLineWidth: options.flowLineWidth || 2,
+      flowMarkerColor: options.flowMarkerColor || '#0067df',
+      animationSpeed: options.animationSpeed || 1.5,
+      ...options
+    };
+    
+    this.container = document.getElementById(containerId);
+    this.flows = [];
+    this.countries = {};
+    this.selectedCountries = new Set();
+    this.svg = null;
+    this.defs = null;
+    this.worldGroup = null;
+    this.flowsGroup = null;
+    this.markersGroup = null;
+    this.initialized = false;
+    
+    // Country coordinates for major trading countries
+    this.countryCoordinates = {
+      '840': { name: 'United States', lat: 37.0902, lng: -95.7129 },
+      '156': { name: 'China', lat: 35.8617, lng: 104.1954 },
+      '276': { name: 'Germany', lat: 51.1657, lng: 10.4515 },
+      '392': { name: 'Japan', lat: 36.2048, lng: 138.2529 },
+      '826': { name: 'United Kingdom', lat: 55.3781, lng: -3.4360 },
+      '124': { name: 'Canada', lat: 56.1304, lng: -106.3468 },
+      '484': { name: 'Mexico', lat: 23.6345, lng: -102.5528 },
+      '410': { name: 'South Korea', lat: 35.9078, lng: 127.7669 },
+      '356': { name: 'India', lat: 20.5937, lng: 78.9629 },
+      '250': { name: 'France', lat: 46.6034, lng: 1.8883 },
+      '380': { name: 'Italy', lat: 41.8719, lng: 12.5674 },
+      '076': { name: 'Brazil', lat: -14.2350, lng: -51.9253 },
+      '036': { name: 'Australia', lat: -25.2744, lng: 133.7751 },
+      '528': { name: 'Netherlands', lat: 52.1326, lng: 5.2913 },
+      '756': { name: 'Switzerland', lat: 46.8182, lng: 8.2275 },
+      '842': { name: 'United States', lat: 37.0902, lng: -95.7129 }, // Duplicate for compatibility
+    };
+  }
+  
+  async initialize() {
+    if (this.initialized) return;
+    
+    // Create map container
+    this.container.innerHTML = '';
+    this.container.style.position = 'relative';
+    this.container.style.width = this.options.width;
+    this.container.style.height = `${this.options.height}px`;
+    this.container.style.backgroundColor = this.options.oceanColor;
+    this.container.style.borderRadius = '8px';
+    this.container.style.overflow = 'hidden';
+    
+    // Loading indicator
+    const loadingIndicator = document.createElement('div');
+    loadingIndicator.style.position = 'absolute';
+    loadingIndicator.style.top = '50%';
+    loadingIndicator.style.left = '50%';
+    loadingIndicator.style.transform = 'translate(-50%, -50%)';
+    loadingIndicator.style.color = '#999';
+    loadingIndicator.style.fontSize = '14px';
+    loadingIndicator.textContent = 'Loading map data...';
+    this.container.appendChild(loadingIndicator);
+    
+    // Create SVG container for the map
+    this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    this.svg.setAttribute('width', '100%');
+    this.svg.setAttribute('height', '100%');
+    this.svg.style.position = 'absolute';
+    this.container.appendChild(this.svg);
+    
+    // Add defs section for gradients and markers
+    this.defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+    this.svg.appendChild(this.defs);
+    
+    // Create subtle arrow marker for flow lines - more like the Google Pay reference
+    const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+    marker.setAttribute('id', `arrow-${this.containerId}`);
+    marker.setAttribute('viewBox', '0 0 10 10');
+    marker.setAttribute('refX', '5');
+    marker.setAttribute('refY', '5');
+    marker.setAttribute('markerWidth', '3');
+    marker.setAttribute('markerHeight', '3');
+    marker.setAttribute('orient', 'auto');
+    
+    const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    arrow.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
+    arrow.setAttribute('fill', this.options.flowMarkerColor);
+    marker.appendChild(arrow);
+    this.defs.appendChild(marker);
+    
+    // Create more subtle flow line gradient
+    const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
+    gradient.setAttribute('id', `flow-gradient-${this.containerId}`);
+    gradient.setAttribute('gradientUnits', 'userSpaceOnUse');
+    
+    // More subtle gradient with less contrast
+    const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+    stop1.setAttribute('offset', '0%');
+    stop1.setAttribute('stop-color', this.options.flowLineColor);
+    stop1.setAttribute('stop-opacity', '0.4');
+    
+    const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+    stop2.setAttribute('offset', '100%');
+    stop2.setAttribute('stop-color', this.options.flowLineColor);
+    stop2.setAttribute('stop-opacity', '0.6');
+    
+    gradient.appendChild(stop1);
+    gradient.appendChild(stop2);
+    this.defs.appendChild(gradient);
+    
+    // Add a pulse effect gradient for animated markers
+    const pulseGradient = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');
+    pulseGradient.setAttribute('id', `pulse-gradient-${this.containerId}`);
+    pulseGradient.setAttribute('gradientUnits', 'objectBoundingBox');
+    pulseGradient.setAttribute('cx', '0.5');
+    pulseGradient.setAttribute('cy', '0.5');
+    pulseGradient.setAttribute('r', '0.5');
+    
+    const pulseStop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+    pulseStop1.setAttribute('offset', '0%');
+    pulseStop1.setAttribute('stop-color', this.options.flowMarkerColor);
+    pulseStop1.setAttribute('stop-opacity', '0.9');
+    
+    const pulseStop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+    pulseStop2.setAttribute('offset', '100%');
+    pulseStop2.setAttribute('stop-color', this.options.flowMarkerColor);
+    pulseStop2.setAttribute('stop-opacity', '0.1');
+    
+    pulseGradient.appendChild(pulseStop1);
+    pulseGradient.appendChild(pulseStop2);
+    this.defs.appendChild(pulseGradient);
+    
+    // Create layer groups
+    this.worldGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    this.worldGroup.setAttribute('class', 'world-map');
+    
+    this.flowsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    this.flowsGroup.setAttribute('class', 'trade-flows');
+    
+    this.markersGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    this.markersGroup.setAttribute('class', 'country-markers');
+    
+    this.svg.appendChild(this.worldGroup);
+    this.svg.appendChild(this.flowsGroup);
+    this.svg.appendChild(this.markersGroup);
+    
+    // Draw the world map
+    await this.drawModernWorldMap();
+    
+    // Remove loading indicator
+    loadingIndicator.remove();
+    
+    this.initialized = true;
+    return this;
+  }
+  
+  async drawModernWorldMap() {
+    // Create a simplified world map with major continents and countries
+    // Using simplified vector paths similar to Google Pay world map
+    const worldMapData = {
+      // Define continents as clean path data with subtle curves
+      continents: [
+        // North America - with more natural coastlines
+        { 
+          path: 'M 55,100 C 90,85 130,85 160,100 L 180,120 C 190,140 195,160 185,185 C 170,200 150,210 125,215 C 90,210 70,195 55,180 C 45,160 40,130 55,100 Z', 
+          name: 'North America' 
+        },
+        // South America - with curved coastlines
+        { 
+          path: 'M 130,230 C 160,225 175,230 185,250 C 190,280 195,310 185,340 C 170,360 150,370 130,375 C 110,365 100,345 95,325 C 100,280 110,250 130,230 Z', 
+          name: 'South America' 
+        },
+        // Europe - more detailed with peninsulas
+        { 
+          path: 'M 270,110 C 290,100 320,95 345,100 C 360,115 370,130 365,150 C 355,165 340,175 315,180 C 290,175 275,165 265,150 C 260,135 260,120 270,110 Z', 
+          name: 'Europe' 
+        },
+        // Africa - more natural shape
+        { 
+          path: 'M 270,190 C 300,185 330,185 355,190 C 370,210 375,240 370,270 C 360,300 340,320 315,330 C 290,325 270,310 260,290 C 250,260 245,230 250,210 C 255,200 260,195 270,190 Z', 
+          name: 'Africa' 
+        },
+        // Asia - larger and more detailed
+        { 
+          path: 'M 370,120 C 410,100 460,90 510,95 C 550,105 580,120 590,150 C 595,180 585,210 565,240 C 520,270 470,285 420,280 C 390,270 370,250 355,220 C 345,190 345,150 370,120 Z', 
+          name: 'Asia' 
+        },
+        // Australia - more accurate shape
+        { 
+          path: 'M 580,280 C 600,275 620,275 635,285 C 645,300 645,320 635,335 C 620,345 600,345 585,340 C 570,330 565,310 570,295 C 570,290 575,285 580,280 Z', 
+          name: 'Australia' 
+        }
+      ],
+      
+      // Major countries - cleaner outlines with subtle curves
+      countries: [
+        // USA - more detailed shape
+        { 
+          code: '840', 
+          path: 'M 70,140 C 100,135 130,135 155,140 C 165,150 170,160 165,175 C 155,185 135,190 115,190 C 95,185 80,175 75,165 C 70,155 70,145 70,140 Z', 
+          name: 'United States' 
+        },
+        // Canada - with northern territories
+        { 
+          code: '124', 
+          path: 'M 70,100 C 100,90 140,90 170,100 C 175,110 175,120 170,130 C 165,135 160,138 155,140 C 125,135 95,135 70,140 C 65,130 65,115 70,100 Z', 
+          name: 'Canada' 
+        },
+        // Mexico - improved shape
+        { 
+          code: '484', 
+          path: 'M 80,170 C 90,175 100,180 110,180 C 115,190 115,200 110,205 C 100,208 90,208 80,205 C 75,195 75,180 80,170 Z', 
+          name: 'Mexico' 
+        },
+        // Brazil - larger and more accurate
+        { 
+          code: '076', 
+          path: 'M 140,260 C 155,255 170,255 180,260 C 185,275 190,290 185,310 C 175,325 160,335 145,335 C 130,330 120,320 115,305 C 120,285 125,270 140,260 Z', 
+          name: 'Brazil' 
+        },
+        // UK - more defined island shape
+        { 
+          code: '826', 
+          path: 'M 260,130 C 265,128 270,128 275,130 C 277,135 277,140 275,145 C 270,148 265,148 260,145 C 258,140 258,135 260,130 Z', 
+          name: 'United Kingdom' 
+        },
+        // Germany - central Europe position
+        { 
+          code: '276', 
+          path: 'M 300,140 C 307,138 314,138 320,140 C 322,145 322,150 320,155 C 315,158 305,158 300,155 C 298,150 298,145 300,140 Z', 
+          name: 'Germany' 
+        },
+        // France - with recognizable hexagon shape
+        { 
+          code: '250', 
+          path: 'M 280,150 C 287,148 294,148 300,150 C 302,155 302,160 300,165 C 295,168 285,168 280,165 C 278,160 278,155 280,150 Z', 
+          name: 'France' 
+        },
+        // China - larger with more accurate borders
+        { 
+          code: '156', 
+          path: 'M 450,150 C 470,145 495,145 520,150 C 525,165 525,180 520,195 C 505,205 475,210 455,205 C 445,195 440,175 450,150 Z', 
+          name: 'China' 
+        },
+        // India - recognizable peninsula shape
+        { 
+          code: '356', 
+          path: 'M 430,210 C 445,205 460,205 470,210 C 472,220 472,235 470,245 C 460,250 440,250 430,245 C 425,235 425,220 430,210 Z', 
+          name: 'India' 
+        },
+        // Japan - archipelago suggestion
+        { 
+          code: '392', 
+          path: 'M 550,160 C 555,158 560,158 565,160 C 567,165 567,170 565,175 C 560,177 550,177 545,175 C 543,170 545,165 550,160 Z', 
+          name: 'Japan' 
+        },
+        // Australia - more detailed continent shape
+        { 
+          code: '036', 
+          path: 'M 590,300 C 605,295 620,295 630,300 C 632,310 632,320 630,330 C 620,335 600,335 590,330 C 585,320 585,310 590,300 Z', 
+          name: 'Australia' 
+        }
+      ]
+    };
+    
+    // Draw continents as background
+    worldMapData.continents.forEach(continent => {
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttribute('d', continent.path);
+      path.setAttribute('fill', this.options.landColor);
+      path.setAttribute('stroke', this.options.countryStrokeColor);
+      path.setAttribute('stroke-width', '0.5');
+      path.setAttribute('data-name', continent.name);
+      
+      // Add title element for tooltip
+      const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+      title.textContent = continent.name;
+      path.appendChild(title);
+      
+      this.worldGroup.appendChild(path);
+    });
+    
+    // Draw countries with more detail
+    worldMapData.countries.forEach(country => {
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttribute('d', country.path);
+      path.setAttribute('fill', this.options.landColor);
+      path.setAttribute('stroke', this.options.countryStrokeColor);
+      path.setAttribute('stroke-width', '0.8');
+      path.setAttribute('data-code', country.code);
+      path.setAttribute('data-name', country.name);
+      
+      // Add hover effect
+      path.addEventListener('mouseover', () => {
+        path.setAttribute('fill', this.options.selectedCountryColor);
+      });
+      
+      path.addEventListener('mouseout', () => {
+        if (!this.selectedCountries.has(country.code)) {
+          path.setAttribute('fill', this.options.landColor);
+        }
+      });
+      
+      // Add title element for tooltip
+      const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+      title.textContent = country.name;
+      path.appendChild(title);
+      
+      this.worldGroup.appendChild(path);
+      
+      // Store country reference for trade flows
+      // Extract center point from path data for flow lines
+      let coords = this.extractCenterFromPath(country.path);
+      this.countries[country.code] = { 
+        code: country.code,
+        name: country.name,
+        element: path,
+        x: coords.x, 
+        y: coords.y 
+      };
+    });
+    
+    // Add labels for major countries if showLabels is enabled
+    if (this.options.showLabels) {
+      Object.values(this.countries).forEach(country => {
+        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        label.setAttribute('x', country.x);
+        label.setAttribute('y', country.y - 5);
+        label.setAttribute('text-anchor', 'middle');
+        label.setAttribute('font-size', '9px');
+        label.setAttribute('fill', '#555');
+        label.textContent = country.name;
+        this.markersGroup.appendChild(label);
+      });
+    }
+  }
+  
+  // Helper function to extract center point from SVG path
+  extractCenterFromPath(pathData) {
+    // This is a simplified approach - in a real implementation, 
+    // you would parse the path data more carefully
+    const points = pathData.replace(/[A-Za-z]/g, ' ').trim().split(/\s+/).map(Number);
+    
+    // Calculate average of x and y coordinates
+    let sumX = 0, sumY = 0, count = 0;
+    for (let i = 0; i < points.length; i += 2) {
+      if (i + 1 < points.length) {
+        sumX += points[i];
+        sumY += points[i + 1];
+        count++;
+      }
+    }
+    
+    return { x: sumX / count, y: sumY / count };
+  }
+  
+  // Converts longitude to X coordinate
+  longitudeToX(lng) {
+    // Map longitude (-180 to 180) to screen coordinates
+    const width = this.container.clientWidth;
+    return (lng + 180) * (width / 360);
+  }
+  
+  // Converts latitude to Y coordinate
+  latitudeToY(lat) {
+    // Map latitude (-90 to 90) to screen coordinates
+    const height = this.container.clientHeight;
+    // Adjust for Mercator-like projection
+    const latRad = lat * Math.PI / 180;
+    const mercN = Math.log(Math.tan((Math.PI / 4) + (latRad / 2)));
+    return height / 2 - (height * mercN / (2 * Math.PI));
+  }
+  
+  // Add a trade flow between two countries
+  addFlow(fromCountryCode, toCountryCode, value = 1, options = {}) {
+    if (!this.initialized) {
+      console.error('Map not initialized. Call initialize() first.');
+      return this;
+    }
+    
+    const fromCountry = this.countries[fromCountryCode];
+    const toCountry = this.countries[toCountryCode];
+    
+    if (!fromCountry || !toCountry) {
+      console.warn(`Country not found: ${!fromCountry ? fromCountryCode : toCountryCode}`);
+      return this;
+    }
+    
+    // Scale the line width based on the trade value
+    let scaledWidth = this.options.flowLineWidth;
+    if (value > 0) {
+      // Log scale for better visualization
+      scaledWidth = this.options.flowLineWidth * (1 + 0.5 * Math.log10(1 + value / 1000));
+    }
+    
+    // Highlight the selected countries
+    this.selectedCountries.add(fromCountryCode);
+    this.selectedCountries.add(toCountryCode);
+    
+    if (fromCountry.element) {
+      fromCountry.element.setAttribute('fill', this.options.selectedCountryColor);
+    }
+    
+    if (toCountry.element) {
+      toCountry.element.setAttribute('fill', this.options.selectedCountryColor);
+    }
+    
+    // Create a unique flow ID
+    const flowId = `flow-${fromCountryCode}-${toCountryCode}`;
+    
+    // Create a group for this flow
+    const flowGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    flowGroup.setAttribute('class', 'flow-connection');
+    flowGroup.setAttribute('data-flow-id', flowId);
+    flowGroup.setAttribute('data-from', fromCountryCode);
+    flowGroup.setAttribute('data-to', toCountryCode);
+    
+    // Calculate the curved path between countries
+    // Use quadratic Bezier curve for smoother appearance
+    const dx = toCountry.x - fromCountry.x;
+    const dy = toCountry.y - fromCountry.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    
+    // Calculate curvature - higher for longer distances
+    const curveAmount = distance * 0.2;
+    
+    // Calculate control point perpendicular to the line
+    const midX = (fromCountry.x + toCountry.x) / 2;
+    const midY = (fromCountry.y + toCountry.y) / 2;
+    
+    // Calculate perpendicular unit vector
+    const perpX = -dy / distance;
+    const perpY = dx / distance;
+    
+    // Position control point perpendicular to the midpoint
+    const ctrlX = midX + perpX * curveAmount;
+    const ctrlY = midY + perpY * curveAmount;
+    
+    // Create the flow path
+    const flowPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    flowPath.setAttribute('class', 'flow-line');
+    flowPath.setAttribute('d', `M ${fromCountry.x} ${fromCountry.y} Q ${ctrlX} ${ctrlY} ${toCountry.x} ${toCountry.y}`);
+    flowPath.setAttribute('fill', 'none');
+    flowPath.setAttribute('stroke', `url(#flow-gradient-${this.containerId})`);
+    flowPath.setAttribute('stroke-width', options.width || scaledWidth);
+    flowPath.setAttribute('stroke-linecap', 'round');
+    flowPath.setAttribute('marker-end', `url(#arrow-${this.containerId})`);
+    
+    // Add to flow group
+    flowGroup.appendChild(flowPath);
+    
+    // Add flow value label if requested
+    if (options.showLabel !== false && value > 0) {
+      const valueFormatted = value >= 1000000 ? 
+        `$${(value/1000000).toFixed(1)}M` : 
+        `$${(value/1000).toFixed(0)}K`;
+      
+      // Create label background
+      const labelBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      labelBg.setAttribute('x', ctrlX - 20);
+      labelBg.setAttribute('y', ctrlY - 10);
+      labelBg.setAttribute('width', 40);
+      labelBg.setAttribute('height', 20);
+      labelBg.setAttribute('rx', 3);
+      labelBg.setAttribute('ry', 3);
+      labelBg.setAttribute('fill', 'white');
+      labelBg.setAttribute('opacity', '0.8');
+      
+      // Create label text
+      const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      label.setAttribute('x', ctrlX);
+      label.setAttribute('y', ctrlY + 4);
+      label.setAttribute('text-anchor', 'middle');
+      label.setAttribute('font-size', '8px');
+      label.setAttribute('fill', '#444');
+      label.textContent = options.label || valueFormatted;
+      
+      // Add to flow group
+      flowGroup.appendChild(labelBg);
+      flowGroup.appendChild(label);
+    }
+    
+    // Add flow group to the flows layer
+    this.flowsGroup.appendChild(flowGroup);
+    
+    // Add animated marker
+    if (options.animated !== false) {
+      this.animateFlowPath(flowPath, fromCountry, toCountry);
+    }
+    
+    // Store flow data
+    this.flows.push({
+      id: flowId,
+      from: fromCountryCode,
+      to: toCountryCode,
+      value: value,
+      element: flowGroup,
+      path: flowPath
+    });
+    
+    return this;
+  }
+  
+  // Animate flow along a path with subtle elegant animation
+  animateFlowPath(path, source, target) {
+    // Create a group for the animated markers
+    const markerGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    markerGroup.setAttribute('class', 'flow-marker-group');
+    this.flowsGroup.appendChild(markerGroup);
+    
+    // Create pulse effect marker
+    const marker = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    marker.setAttribute('class', 'flow-marker');
+    marker.setAttribute('r', 3);
+    marker.setAttribute('fill', `url(#pulse-gradient-${this.containerId})`);
+    marker.setAttribute('opacity', '0.8');
+    markerGroup.appendChild(marker);
+    
+    // Create subtle glow effect
+    const glowMarker = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    glowMarker.setAttribute('class', 'flow-marker-glow');
+    glowMarker.setAttribute('r', 5);
+    glowMarker.setAttribute('fill', `url(#pulse-gradient-${this.containerId})`);
+    glowMarker.setAttribute('opacity', '0.3');
+    markerGroup.appendChild(glowMarker);
+    
+    // Create animated motion
+    const animate = () => {
+      // Calculate the total length of the path for smoother animation
+      const pathLength = path.getTotalLength();
+      const duration = pathLength / 30 * (1 / this.options.animationSpeed);
+      
+      // Animation function with smoother easing
+      const startTime = performance.now();
+      
+      const step = (timestamp) => {
+        const elapsedTime = timestamp - startTime;
+        let progress = Math.min(elapsedTime / (duration * 1000), 1);
+        
+        // Add slight easing for more elegant motion
+        progress = easeInOutQuad(progress);
+        
+        // Get point at percentage along the path
+        const point = path.getPointAtLength(progress * pathLength);
+        
+        // Update marker position
+        marker.setAttribute('cx', point.x);
+        marker.setAttribute('cy', point.y);
+        glowMarker.setAttribute('cx', point.x);
+        glowMarker.setAttribute('cy', point.y);
+        
+        if (progress < 1) {
+          requestAnimationFrame(step);
+        } else {
+          // When animation completes, pause then restart
+          markerGroup.setAttribute('opacity', '0');
+          setTimeout(() => {
+            markerGroup.setAttribute('opacity', '1');
+            animate();
+          }, 1200);
+        }
+      };
+      
+      requestAnimationFrame(step);
+    };
+    
+    // Easing function for smoother animation
+    const easeInOutQuad = (t) => {
+      return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+    };
+    
+    // Start the animation
+    animate();
+    
+    return markerGroup;
+  }
+  
+  // Clear all trade flows
+  clearFlows() {
+    // Remove flow elements
+    while (this.flowsGroup.firstChild) {
+      this.flowsGroup.removeChild(this.flowsGroup.firstChild);
+    }
+    
+    // Reset country colors
+    this.selectedCountries.clear();
+    Object.values(this.countries).forEach(country => {
+      if (country.element) {
+        country.element.setAttribute('fill', this.options.landColor);
+      }
+    });
+    
+    this.flows = [];
+    return this;
+  }
+  
+  // Add demo trade flows to the map
+  addDemoFlows() {
+    // Clear existing flows
+    this.clearFlows();
+    
+    // Add major trade flows with values (in millions USD)
+    this.addFlow('840', '156', 500000, { label: '$500B' }); // US to China
+    this.addFlow('840', '276', 180000, { label: '$180B' }); // US to Germany
+    this.addFlow('156', '392', 320000, { label: '$320B' }); // China to Japan
+    this.addFlow('156', '124', 110000, { label: '$110B' }); // China to Canada
+    this.addFlow('276', '250', 230000, { label: '$230B' }); // Germany to France
+    
+    // Render all flows
+    return this;
+  }
+  
+  // Update the map with new data
+  updateData(flows) {
+    this.clearFlows();
+    
+    flows.forEach(flow => {
+      this.addFlow(flow.from || flow.reporterCode, 
+                flow.to || flow.partnerCode, 
+                flow.value || flow.tradeValue, 
+                flow.options || {});
+    });
+    
+    return this;
+  }
+  
+  // Resize the map
+  resize(width, height) {
+    if (width) this.container.style.width = width;
+    if (height) this.container.style.height = `${height}px`;
+    return this;
+  }
+}
+
+// Initialize maps when document is ready
+document.addEventListener('DOMContentLoaded', () => {
+  // Create a global object to store map instances
+  window.tradeFlowMaps = {};
+  
+  // Initialize trade flow maps on the page
+  const mapContainers = document.querySelectorAll('.trade-flow-map');
+  
+  mapContainers.forEach(container => {
+    const containerId = container.id;
+    if (!containerId) return;
+    
+    const options = {
+      showLabels: container.dataset.showLabels === 'true',
+      showFlowValues: container.dataset.showValues !== 'false',
+      height: parseInt(container.dataset.height || 350, 10)
+    };
+    
+    // Create a new map instance
+    const map = new TradeFlowMap(containerId, options);
+    map.initialize().then(() => {
+      // Add demo flows if requested
+      if (container.dataset.demo === 'true') {
+        // Use our modern demo flows with proper styling
+        map.addDemoFlows();
+      }
+    });
+    
+    // Store the map instance
+    window.tradeFlowMaps[containerId] = map;
+  });
+});