Update app.py

app.py

@@ -7,29 +7,29 @@ from fastapi import FastAPI
 # Create a FastAPI app
 app = FastAPI()
 
-# Sample country data with random progress percentages
+# Sample country data with random progress percentages - using the proper ISO codes
 def generate_data():
     return {
-        "MX": {"name": "Mexico", "percent": random.randint(10, 90)},
-        "AR": {"name": "Argentina", "percent": random.randint(10, 90)},
-        "CO": {"name": "Colombia", "percent": random.randint(10, 90)},
-        "CL": {"name": "Chile", "percent": random.randint(10, 90)},
-        "PE": {"name": "Peru", "percent": random.randint(10, 90)},
-        "ES": {"name": "Spain", "percent": random.randint(10, 90)},
-        "BR": {"name": "Brazil", "percent": random.randint(10, 90)},
-        "VE": {"name": "Venezuela", "percent": random.randint(10, 90)},
-        "EC": {"name": "Ecuador", "percent": random.randint(10, 90)},
-        "BO": {"name": "Bolivia", "percent": random.randint(10, 90)},
-        "PY": {"name": "Paraguay", "percent": random.randint(10, 90)},
-        "UY": {"name": "Uruguay", "percent": random.randint(10, 90)},
-        "CR": {"name": "Costa Rica", "percent": random.randint(10, 90)},
-        "PA": {"name": "Panama", "percent": random.randint(10, 90)},
-        "DO": {"name": "Dominican Republic", "percent": random.randint(10, 90)},
-        "GT": {"name": "Guatemala", "percent": random.randint(10, 90)},
-        "HN": {"name": "Honduras", "percent": random.randint(10, 90)},
-        "SV": {"name": "El Salvador", "percent": random.randint(10, 90)},
-        "NI": {"name": "Nicaragua", "percent": random.randint(10, 90)},
-        "CU": {"name": "Cuba", "percent": random.randint(10, 90)}
+        "MEX": {"name": "Mexico", "percent": random.randint(10, 90)},
+        "ARG": {"name": "Argentina", "percent": random.randint(10, 90)},
+        "COL": {"name": "Colombia", "percent": random.randint(10, 90)},
+        "CHL": {"name": "Chile", "percent": random.randint(10, 90)},
+        "PER": {"name": "Peru", "percent": random.randint(10, 90)},
+        "ESP": {"name": "Spain", "percent": random.randint(10, 90)},
+        "BRA": {"name": "Brazil", "percent": random.randint(10, 90)},
+        "VEN": {"name": "Venezuela", "percent": random.randint(10, 90)},
+        "ECU": {"name": "Ecuador", "percent": random.randint(10, 90)},
+        "BOL": {"name": "Bolivia", "percent": random.randint(10, 90)},
+        "PRY": {"name": "Paraguay", "percent": random.randint(10, 90)},
+        "URY": {"name": "Uruguay", "percent": random.randint(10, 90)},
+        "CRI": {"name": "Costa Rica", "percent": random.randint(10, 90)},
+        "PAN": {"name": "Panama", "percent": random.randint(10, 90)},
+        "DOM": {"name": "Dominican Republic", "percent": random.randint(10, 90)},
+        "GTM": {"name": "Guatemala", "percent": random.randint(10, 90)},
+        "HND": {"name": "Honduras", "percent": random.randint(10, 90)},
+        "SLV": {"name": "El Salvador", "percent": random.randint(10, 90)},
+        "NIC": {"name": "Nicaragua", "percent": random.randint(10, 90)},
+        "CUB": {"name": "Cuba", "percent": random.randint(10, 90)}
     }
 
 # HTML template - avoiding f-strings with JavaScript template literals
@@ -237,12 +237,15 @@ HTML_TEMPLATE = """
                 .then(function(data) {
                     console.log('GeoJSON data loaded');
                     
-                    // Filter to only include our target countries
+                    // The relevant country codes
                     const relevantCountryCodes = Object.keys(countryData);
                     
                     // Log countries in data
                     console.log('Countries in countryData:', relevantCountryCodes);
-                    console.log('First few features from GeoJSON:', data.features.slice(0, 3));
+                    
+                    // Log some sample features to check the properties structure
+                    const sampleFeatures = data.features.slice(0, 3);
+                    console.log('Sample feature properties:', sampleFeatures.map(f => f.properties));
                     
                     // Add ocean background
                     svg.append('rect')
@@ -250,50 +253,213 @@ HTML_TEMPLATE = """
                         .attr('height', height)
                         .attr('fill', '#0f1218');
                     
-                    // Filter the features
+                    // Filter the features - check for id match
                     const relevantFeatures = data.features.filter(d => 
-                        relevantCountryCodes.includes(d.properties.iso_a2)
+                        relevantCountryCodes.includes(d.id)
                     );
                     
                     console.log('Filtered features count:', relevantFeatures.length);
                     
-                    // Draw only our target countries
-                    svg.selectAll('.country')
-                        .data(relevantFeatures)
-                        .enter()
-                        .append('path')
-                        .attr('class', 'country')
-                        .attr('d', path)
-                        .attr('fill', function(d) {
-                            const iso = d.properties.iso_a2;
-                            return colorScale(countryData[iso].percent);
-                        })
-                        .attr('stroke', '#0f1218')
-                        .attr('stroke-width', 1)
-                        .on('mouseover', function(event, d) {
-                            const iso = d.properties.iso_a2;
-                            
-                            d3.select(this)
-                                .attr('stroke', '#fff')
-                                .attr('stroke-width', 1.5);
+                    // If we still don't have matches, look more deeply at the data structure
+                    if (relevantFeatures.length === 0) {
+                        console.log('No matches found using id, checking all feature properties');
+                        
+                        // Get the first 10 features to examine their structure
+                        const firstTen = data.features.slice(0, 10);
+                        console.log('First ten features:', firstTen);
+                        
+                        // Look for our countries in all features
+                        const latinAmericanFeatures = data.features.filter(f => {
+                            // Check various properties that might contain the country code
+                            return relevantCountryCodes.includes(f.id) || 
+                                   (f.properties && relevantCountryCodes.includes(f.properties.iso_a3)) ||
+                                   (f.properties && relevantCountryCodes.includes(f.properties.name));
+                        });
+                        
+                        console.log('Latin American features found:', latinAmericanFeatures.length);
+                        
+                        // If there are still no matches, just use all features and filter visually
+                        if (latinAmericanFeatures.length === 0) {
+                            console.log('Still no matches, using all features and hiding non-Latin American countries');
                             
-                            tooltip.style('opacity', 1)
-                                .style('left', (event.pageX + 15) + 'px')
-                                .style('top', (event.pageY + 15) + 'px')
-                                .html('<strong>' + countryData[iso].name + '</strong><br/>' +
-                                    'Progress: ' + countryData[iso].percent + '%');
-                        })
-                        .on('mousemove', function(event) {
-                            tooltip.style('left', (event.pageX + 15) + 'px')
-                                .style('top', (event.pageY + 15) + 'px');
-                        })
-                        .on('mouseout', function() {
-                            d3.select(this)
+                            // Draw all countries but only color our target ones
+                            svg.selectAll('.country')
+                                .data(data.features)
+                                .enter()
+                                .append('path')
+                                .attr('class', 'country')
+                                .attr('d', path)
+                                .attr('fill', function(d) {
+                                    // Try to match with id or iso_a3
+                                    if (d.id && countryData[d.id]) {
+                                        return colorScale(countryData[d.id].percent);
+                                    } else if (d.properties && d.properties.iso_a3 && countryData[d.properties.iso_a3]) {
+                                        return colorScale(countryData[d.properties.iso_a3].percent);
+                                    } else if (d.properties && d.properties.name && countryData[d.properties.name]) {
+                                        return colorScale(countryData[d.properties.name].percent);
+                                    } else {
+                                        // Try checking if it's a Latin American country by name
+                                        const latinAmericanCountries = [
+                                            'Mexico', 'Argentina', 'Colombia', 'Chile', 'Peru', 'Spain', 
+                                            'Brazil', 'Venezuela', 'Ecuador', 'Bolivia', 'Paraguay', 
+                                            'Uruguay', 'Costa Rica', 'Panama', 'Dominican Republic', 
+                                            'Guatemala', 'Honduras', 'El Salvador', 'Nicaragua', 'Cuba'
+                                        ];
+                                        
+                                        if (d.properties && latinAmericanCountries.includes(d.properties.name)) {
+                                            // Find the matching country in our data
+                                            for (const code in countryData) {
+                                                if (countryData[code].name === d.properties.name) {
+                                                    return colorScale(countryData[code].percent);
+                                                }
+                                            }
+                                        }
+                                        
+                                        // If not a target country, make it transparent
+                                        return 'transparent';
+                                    }
+                                })
+                                .attr('stroke', function(d) {
+                                    // Only show outlines for Latin American countries
+                                    const latinAmericanCountries = [
+                                        'Mexico', 'Argentina', 'Colombia', 'Chile', 'Peru', 'Spain', 
+                                        'Brazil', 'Venezuela', 'Ecuador', 'Bolivia', 'Paraguay', 
+                                        'Uruguay', 'Costa Rica', 'Panama', 'Dominican Republic', 
+                                        'Guatemala', 'Honduras', 'El Salvador', 'Nicaragua', 'Cuba'
+                                    ];
+                                    
+                                    if (d.properties && latinAmericanCountries.includes(d.properties.name)) {
+                                        return '#0f1218';
+                                    } else {
+                                        return 'transparent';
+                                    }
+                                })
+                                .attr('stroke-width', 1)
+                                .on('mouseover', function(event, d) {
+                                    // Only enable hover for target countries
+                                    if (d.id && countryData[d.id]) {
+                                        const iso = d.id;
+                                        showTooltip(event, iso);
+                                    } else if (d.properties && d.properties.iso_a3 && countryData[d.properties.iso_a3]) {
+                                        const iso = d.properties.iso_a3;
+                                        showTooltip(event, iso);
+                                    } else if (d.properties && d.properties.name) {
+                                        // Find the matching country in our data by name
+                                        for (const code in countryData) {
+                                            if (countryData[code].name === d.properties.name) {
+                                                showTooltip(event, code);
+                                                break;
+                                            }
+                                        }
+                                    }
+                                })
+                                .on('mousemove', function(event) {
+                                    tooltip.style('left', (event.pageX + 15) + 'px')
+                                        .style('top', (event.pageY + 15) + 'px');
+                                })
+                                .on('mouseout', function() {
+                                    d3.select(this)
+                                        .attr('stroke', function(d) {
+                                            const latinAmericanCountries = [
+                                                'Mexico', 'Argentina', 'Colombia', 'Chile', 'Peru', 'Spain', 
+                                                'Brazil', 'Venezuela', 'Ecuador', 'Bolivia', 'Paraguay', 
+                                                'Uruguay', 'Costa Rica', 'Panama', 'Dominican Republic', 
+                                                'Guatemala', 'Honduras', 'El Salvador', 'Nicaragua', 'Cuba'
+                                            ];
+                                            
+                                            if (d.properties && latinAmericanCountries.includes(d.properties.name)) {
+                                                return '#0f1218';
+                                            } else {
+                                                return 'transparent';
+                                            }
+                                        })
+                                        .attr('stroke-width', 1);
+                                        
+                                    tooltip.style('opacity', 0);
+                                });
+                        } else {
+                            // Draw only the Latin American features
+                            svg.selectAll('.country')
+                                .data(latinAmericanFeatures)
+                                .enter()
+                                .append('path')
+                                .attr('class', 'country')
+                                .attr('d', path)
+                                .attr('fill', function(d) {
+                                    if (d.id && countryData[d.id]) {
+                                        return colorScale(countryData[d.id].percent);
+                                    } else if (d.properties && d.properties.iso_a3 && countryData[d.properties.iso_a3]) {
+                                        return colorScale(countryData[d.properties.iso_a3].percent);
+                                    } else {
+                                        return colorScale(50); // Default to mid-range if no match
+                                    }
+                                })
                                 .attr('stroke', '#0f1218')
-                                .attr('stroke-width', 1);
-                                
-                            tooltip.style('opacity', 0);
-                        });
+                                .attr('stroke-width', 1)
+                                .on('mouseover', function(event, d) {
+                                    if (d.id && countryData[d.id]) {
+                                        const iso = d.id;
+                                        showTooltip(event, iso);
+                                    } else if (d.properties && d.properties.iso_a3 && countryData[d.properties.iso_a3]) {
+                                        const iso = d.properties.iso_a3;
+                                        showTooltip(event, iso);
+                                    }
+                                })
+                                .on('mousemove', function(event) {
+                                    tooltip.style('left', (event.pageX + 15) + 'px')
+                                        .style('top', (event.pageY + 15) + 'px');
+                                })
+                                .on('mouseout', function() {
+                                    d3.select(this)
+                                        .attr('stroke', '#0f1218')
+                                        .attr('stroke-width', 1);
+                                        
+                                    tooltip.style('opacity', 0);
+                                });
+                        }
+                    } else {
+                        // Draw only our target countries
+                        svg.selectAll('.country')
+                            .data(relevantFeatures)
+                            .enter()
+                            .append('path')
+                            .attr('class', 'country')
+                            .attr('d', path)
+                            .attr('fill', function(d) {
+                                const iso = d.id;
+                                return colorScale(countryData[iso].percent);
+                            })
+                            .attr('stroke', '#0f1218')
+                            .attr('stroke-width', 1)
+                            .on('mouseover', function(event, d) {
+                                const iso = d.id;
+                                showTooltip(event, iso);
+                            })
+                            .on('mousemove', function(event) {
+                                tooltip.style('left', (event.pageX + 15) + 'px')
+                                    .style('top', (event.pageY + 15) + 'px');
+                            })
+                            .on('mouseout', function() {
+                                d3.select(this)
+                                    .attr('stroke', '#0f1218')
+                                    .attr('stroke-width', 1);
+                                    
+                                tooltip.style('opacity', 0);
+                            });
+                    }
+                    
+                    // Function to show tooltip
+                    function showTooltip(event, iso) {
+                        d3.select(event.currentTarget)
+                            .attr('stroke', '#fff')
+                            .attr('stroke-width', 1.5);
+                        
+                        tooltip.style('opacity', 1)
+                            .style('left', (event.pageX + 15) + 'px')
+                            .style('top', (event.pageY + 15) + 'px')
+                            .html('<strong>' + countryData[iso].name + '</strong><br/>' +
+                                'Progress: ' + countryData[iso].percent + '%');
+                    }
                     
                     // Add a legend on the right side of the map
                     const legendWidth = 200;