leaderboard-hackaton-2025

Runtime error

App Files Files Community

ouhenio commited on Apr 8

Commit

4777956

verified ·

1 Parent(s): 0f592a0

Update template.txt

Browse files

Files changed (1) hide show

template.txt +174 -170

template.txt CHANGED Viewed

@@ -3,12 +3,8 @@
 <head>
     <meta charset="utf-8">
     <title>Cartografía de anotación</title>
-    <!-- Use specific D3 modules instead of the full library -->
-    <script src="https://d3js.org/d3-selection.v2.min.js"></script>
-    <script src="https://d3js.org/d3-geo.v2.min.js"></script>
-    <script src="https://d3js.org/d3-fetch.v2.min.js"></script>
-    <script src="https://d3js.org/d3-scale.v2.min.js"></script>
-    <script src="https://d3js.org/d3-array.v2.min.js"></script>
     <style>
         body {
             margin: 0;
@@ -178,145 +174,98 @@
         // Country data from Python - will be replaced
         const countryData = COUNTRY_DATA_PLACEHOLDER;
-        // Pre-calculate statistics to avoid repeated calculations
-        const totalDocs = Object.values(countryData).reduce((sum, country) => {
-            return sum + (country.documents || 0);
-        }, 0);
-        const avgPercent = Object.values(countryData).reduce((sum, country) => {
-            return sum + country.percent;
-        }, 0) / Object.values(countryData).length;
-        // Pre-sort countries by document count
-        const countriesWithDocs = Object.keys(countryData).map(code => {
             return {
-                code: code,
-                name: countryData[code].name,
-                percent: countryData[code].percent,
-                documents: countryData[code].documents || 0
             };
-        }).sort((a, b) => b.documents - a.documents);
-        // Take the top 5
-        const topCountries = countriesWithDocs.slice(0, 5);
-        // Use a local variable for relevant country codes to avoid object lookups
-        const relevantCountryCodes = Object.keys(countryData);
-        // Create a mapping function for faster lookups during rendering
-        const countryDataMap = new Map();
-        relevantCountryCodes.forEach(code => {
-            countryDataMap.set(code, countryData[code]);
-        });
-        // Define the render function outside the load event for better organization
-        function renderMap() {
-            const container = document.getElementById('map-container');
-            const width = container.clientWidth;
-            const height = container.clientHeight;
-            // Use a lightweight SVG creation approach
-            const svg = d3.select('#map-container')
-                .append('svg')
-                .attr('width', width)
-                .attr('height', height);
-            // Create color scale - define outside to prevent recreation
-            const colorScale = d3.scaleLinear()
-                .domain([0, 100])
-                .range(['#4a1942', '#f32b7b']);
-            // Optimize projection settings for South America focus
-            const projection = d3.geoMercator()
-                .center([-60, -15])
-                .scale(width / 4)
-                .translate([width / 2, height / 2]);
-            const path = d3.geoPath().projection(projection);
-            // Cache tooltip element to avoid repeated DOM lookups
             const tooltip = d3.select('#tooltip');
-            // Use a faster GeoJSON source if available or host your own copy
-            const geoJsonUrl = 'https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson';
-            // Add ocean background
-            svg.append('rect')
-                .attr('width', width)
-                .attr('height', height)
-                .attr('fill', '#0f1218');
-            // Function to show tooltip - defined outside loop for better performance
-            function showTooltip(event, iso) {
                 d3.select(event.currentTarget)
                     .attr('stroke', '#fff')
                     .attr('stroke-width', 1.5);
-                const countryInfo = countryDataMap.get(iso);
                 tooltip.style('opacity', 1)
                     .style('left', (event.pageX + 15) + 'px')
                     .style('top', (event.pageY + 15) + 'px')
-                    .html(`<strong>${countryInfo.name}</strong><br/>` +
-                        `Preguntas totales: ${countryInfo.total_questions}<br/>` +
-                        `Preguntas respondidas: ${countryInfo.answered_questions}<br/>` +
-                        `Progreso: ${countryInfo.percent}%`);
-            }
-            // Add legend first so it appears above the map
-            addLegend(svg, width);
-            // Fetch the GeoJSON data
-            d3.json(geoJsonUrl)
-                .then(function(data) {
-                    // Hide loading indicator
-                    document.getElementById('loading-indicator').style.display = 'none';
-                    // Filter features once before rendering
-                    const relevantFeatures = data.features.filter(d =>
-                        relevantCountryCodes.includes(d.id)
-                    );
-                    // Create a document fragment for better performance
-                    const 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(countryDataMap.get(iso).percent);
-                        })
-                        .attr('stroke', '#0f1218')
-                        .attr('stroke-width', 1);
-                    // Add event listeners
-                    countries
-                        .on('mouseover', function(event, d) {
-                            showTooltip(event, d.id);
-                        })
-                        .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);
-                        });
-                })
-                .catch(function(error) {
-                    console.error('Error loading or rendering the map:', error);
-                    container.innerHTML = '<div style="color: white; text-align: center; padding: 20px;">Error loading map: ' + error.message + '</div>';
-                });
-            return { svg, projection, path }; // Return for resize handler
         }
         function addLegend(svg, width) {
             const legendWidth = 200;
             const legendHeight = 15;
@@ -387,85 +336,140 @@
                 .text('100%');
         }
-        function updateStatistics() {
-            // Update the stats with pre-calculated values
-            document.getElementById('total-docs').textContent = totalDocs.toLocaleString();
-            document.getElementById('avg-percent').textContent = avgPercent.toFixed(1) + '%';
-            // Update the top countries list
-            const topCountriesList = document.getElementById('top-countries-list');
-            topCountriesList.innerHTML = '';
-            // Create DOM elements more efficiently
-            const fragment = document.createDocumentFragment();
-            topCountries.forEach(country => {
-                const countryDiv = document.createElement('div');
-                countryDiv.className = 'country-stat';
-                countryDiv.innerHTML = `
-                    <span>${country.name}</span>
-                    <div class="country-bar">
-                        <div class="country-bar-fill" style="width: ${country.percent}%;"></div>
-                    </div>
-                    <span class="country-value">${country.documents.toLocaleString()}</span>
-                `;
-                fragment.appendChild(countryDiv);
-            });
-            topCountriesList.appendChild(fragment);
         }
-        // Track resize state to avoid excessive redraws
-        let resizeTimer;
-        let mapElements;
-        // Handle window resize with debouncing
-        function setupResizeHandler() {
             window.addEventListener('resize', function() {
-                // Clear the previous timeout
                 clearTimeout(resizeTimer);
-                // Set a timeout to run after resizing ends
                 resizeTimer = setTimeout(function() {
                     const container = document.getElementById('map-container');
                     const width = container.clientWidth;
                     const height = container.clientHeight;
-                    if (!mapElements) return;
                     // Update SVG dimensions
-                    d3.select('svg')
                         .attr('width', width)
                         .attr('height', height);
                     // Update projection
-                    mapElements.projection
                         .scale(width / 4)
                         .translate([width / 2, height / 2]);
                     // Update paths
-                    d3.selectAll('.country').attr('d', mapElements.path);
                     // Update legend position
                     const legendX = width - 220;
                     d3.select('.legend')
                         .attr('transform', 'translate(' + legendX + ',20)');
-                }, 250); // 250ms debounce
             });
         }
-        // Execute non-DOM manipulation code immediately
         document.addEventListener('DOMContentLoaded', function() {
-            // Render map - this is the most time-consuming operation
-            mapElements = renderMap();
-            // Update statistics
             updateStatistics();
-            // Set up resize handler
-            setupResizeHandler();
         });
     </script>
 </body>

 <head>
     <meta charset="utf-8">
     <title>Cartografía de anotación</title>
+    <!-- Use the full D3 library to avoid dependency issues -->
+    <script src="https://d3js.org/d3.v7.min.js"></script>
     <style>
         body {
             margin: 0;
         // Country data from Python - will be replaced
         const countryData = COUNTRY_DATA_PLACEHOLDER;
+        // Pre-calculate statistics once at page load
+        const calculateStats = () => {
+            // Calculate total documents
+            const totalDocs = Object.values(countryData).reduce((sum, country) => {
+                return sum + (country.documents || 0);
+            }, 0);
+            // Calculate average percentage
+            const avgPercent = Object.values(countryData).reduce((sum, country) => {
+                return sum + country.percent;
+            }, 0) / Object.values(countryData).length;
+            // Create an array of countries with document counts
+            const countriesWithDocs = Object.keys(countryData).map(code => {
+                return {
+                    code: code,
+                    name: countryData[code].name,
+                    percent: countryData[code].percent,
+                    documents: countryData[code].documents || 0
+                };
+            });
+            // Sort by document count descending
+            countriesWithDocs.sort((a, b) => b.documents - a.documents);
+            // Take the top 5
+            const topCountries = countriesWithDocs.slice(0, 5);
             return {
+                totalDocs,
+                avgPercent,
+                topCountries
             };
+        };
+        // Store the calculated stats
+        const stats = calculateStats();
+        // Function to update the DOM with the statistics
+        function updateStatistics() {
+            // Update the stats
+            document.getElementById('total-docs').textContent = stats.totalDocs.toLocaleString();
+            document.getElementById('avg-percent').textContent = stats.avgPercent.toFixed(1) + '%';
+            // Update the top countries list - use document fragment for performance
+            const topCountriesList = document.getElementById('top-countries-list');
+            const fragment = document.createDocumentFragment();
+            stats.topCountries.forEach(country => {
+                const countryDiv = document.createElement('div');
+                countryDiv.className = 'country-stat';
+                countryDiv.innerHTML = `
+                    <span>${country.name}</span>
+                    <div class="country-bar">
+                        <div class="country-bar-fill" style="width: ${country.percent}%;"></div>
+                    </div>
+                    <span class="country-value">${country.documents.toLocaleString()}</span>
+                `;
+                fragment.appendChild(countryDiv);
+            });
+            topCountriesList.innerHTML = '';
+            topCountriesList.appendChild(fragment);
+        }
+        // Optimized function to show tooltip
+        function createTooltipHandler() {
             const tooltip = d3.select('#tooltip');
+            return function(event, iso) {
+                // Update the current country style
                 d3.select(event.currentTarget)
                     .attr('stroke', '#fff')
                     .attr('stroke-width', 1.5);
+                // Get country data
+                const country = countryData[iso];
+                // Update tooltip content and position
                 tooltip.style('opacity', 1)
                     .style('left', (event.pageX + 15) + 'px')
                     .style('top', (event.pageY + 15) + 'px')
+                    .html(`<strong>${country.name}</strong><br/>` +
+                        `Preguntas totales: ${country.total_questions}<br/>` +
+                        `Preguntas respondidas: ${country.answered_questions}<br/>` +
+                        `Progreso: ${country.percent}%`);
+            };
         }
+        // Add the legend to the map
         function addLegend(svg, width) {
             const legendWidth = 200;
             const legendHeight = 15;
                 .text('100%');
         }
+        // Main function to render the map
+        function initMap() {
+            // Cache the relevant country codes for filtering
+            const relevantCountryCodes = Object.keys(countryData);
+            // Update dimensions with container size
+            const container = document.getElementById('map-container');
+            const width = container.clientWidth;
+            const height = container.clientHeight;
+            // Set up the SVG
+            const svg = d3.select('#map-container')
+                .append('svg')
+                .attr('width', width)
+                .attr('height', height);
+            // Add ocean background first (layering matters)
+            svg.append('rect')
+                .attr('width', width)
+                .attr('height', height)
+                .attr('fill', '#0f1218');
+            // Define the color scale
+            const colorScale = d3.scaleLinear()
+                .domain([0, 100])
+                .range(['#4a1942', '#f32b7b']);
+            // Set up the projection
+            const projection = d3.geoMercator()
+                .center([-60, -15]) // Centered on South America
+                .scale(width / 4)
+                .translate([width / 2, height / 2]);
+            const path = d3.geoPath().projection(projection);
+            // Add the legend before loading data
+            addLegend(svg, width);
+            // Create the tooltip handler
+            const showTooltip = createTooltipHandler();
+            const tooltip = d3.select('#tooltip');
+            // Store reference for resize handler
+            const mapState = { svg, projection, path };
+            // Load GeoJSON data with a smaller, faster source if possible
+            d3.json('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson')
+                .then(function(data) {
+                    // Hide loading indicator
+                    document.getElementById('loading-indicator').style.display = 'none';
+                    // Filter only relevant countries for faster rendering
+                    const relevantFeatures = data.features.filter(d =>
+                        relevantCountryCodes.includes(d.id)
+                    );
+                    // Add country paths
+                    svg.selectAll('.country')
+                        .data(relevantFeatures)
+                        .enter()
+                        .append('path')
+                        .attr('class', 'country')
+                        .attr('d', path)
+                        .attr('fill', d => colorScale(countryData[d.id].percent))
+                        .attr('stroke', '#0f1218')
+                        .attr('stroke-width', 1)
+                        .on('mouseover', function(event, d) {
+                            showTooltip(event, d.id);
+                        })
+                        .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);
+                        });
+                })
+                .catch(function(error) {
+                    console.error('Error loading map data:', error);
+                    document.getElementById('loading-indicator').style.display = 'none';
+                    container.innerHTML = '<div style="color: white; text-align: center; padding: 20px;">Error loading map: ' + error.message + '</div>';
+                });
+            return mapState;
         }
+        // Debounced resize handler
+        function setupResizeHandler(mapState) {
+            let resizeTimer;
             window.addEventListener('resize', function() {
                 clearTimeout(resizeTimer);
                 resizeTimer = setTimeout(function() {
                     const container = document.getElementById('map-container');
                     const width = container.clientWidth;
                     const height = container.clientHeight;
                     // Update SVG dimensions
+                    mapState.svg
                         .attr('width', width)
                         .attr('height', height);
                     // Update projection
+                    mapState.projection
                         .scale(width / 4)
                         .translate([width / 2, height / 2]);
                     // Update paths
+                    d3.selectAll('.country').attr('d', mapState.path);
                     // Update legend position
                     const legendX = width - 220;
                     d3.select('.legend')
                         .attr('transform', 'translate(' + legendX + ',20)');
+                }, 250); // Debounce 250ms
             });
         }
+        // Initialize on page load
         document.addEventListener('DOMContentLoaded', function() {
+            // Update the statistics first
             updateStatistics();
+            // Initialize the map
+            const mapState = initMap();
+            // Setup resize handler
+            setupResizeHandler(mapState);
         });
     </script>
 </body>