Spaces:

fdaudens
/

world-indicators

Running

App Files Files Community

fdaudens HF Staff commited on Mar 30

Commit

7eca7c8

verified ·

1 Parent(s): 4b4df65

Add 1 files

Browse files

Files changed (1) hide show

index.html +284 -223

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>World Data Visualizer</title>
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
@@ -18,7 +18,7 @@
         .container {
             max-width: 1200px;
             margin: 0 auto;
-            background-color: #fff;
             border-radius: 10px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
             padding: 20px;
@@ -42,7 +42,7 @@
             gap: 15px;
             margin-bottom: 25px;
             align-items: center;
-            padding: 10px;
             background-color: #f8f9fa;
             border-radius: 8px;
         }
@@ -92,33 +92,41 @@
             border-radius: 4px;
             cursor: pointer;
             transition: all 0.3s;
         }
         .play-btn:hover {
             background-color: #27ae60;
         }
-        .play-btn i {
-            margin-right: 5px;
         }
         .year-display {
             font-weight: bold;
             min-width: 60px;
             text-align: center;
         }
         .chart-container {
             width: 100%;
             height: 600px;
             position: relative;
         }
         .tooltip {
             position: absolute;
-            padding: 10px;
-            background: rgba(0, 0, 0, 0.8);
-            color: #fff;
             border-radius: 5px;
             pointer-events: none;
             text-align: center;
@@ -126,6 +134,9 @@
             transition: opacity 0.2s;
             font-size: 14px;
             z-index: 10;
         }
         .tooltip:after {
@@ -136,7 +147,7 @@
             margin-left: -8px;
             border-width: 8px;
             border-style: solid;
-            border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
         }
         .loading {
@@ -166,6 +177,10 @@
             fill: #555;
         }
         @media (max-width: 768px) {
             .controls {
                 flex-direction: column;
@@ -191,7 +206,7 @@
 <body>
     <div class="container">
         <h1>World Development Indicators</h1>
-        <p class="subtitle">Life Expectancy vs. GDP per capita (1990-2023)</p>
         <div class="controls">
             <div class="filter-buttons" id="region-buttons">
@@ -203,14 +218,14 @@
                     <i class="fas fa-play"></i> Play
                 </button>
                 <span class="year-display" id="year-value">1990</span>
-                <input type="range" class="year-slider" id="year-slider" min="1990" max="2023" value="1990">
             </div>
         </div>
         <div class="chart-container" id="chart-area">
             <div class="loading" id="loading">
                 <div class="spinner"></div>
-                <p>Loading data...</p>
             </div>
         </div>
@@ -220,11 +235,11 @@
     <script>
         // Configuration
         const config = {
-            margin: { top: 40, right: 40, bottom: 60, left: 70 },
-            minBubbleSize: 5,
             maxBubbleSize: 40,
-            animationDuration: 300,
-            playInterval: 1000,
             regions: {
                 "Africa": { color: "#e74c3c" },
                 "Asia": { color: "#3498db" },
@@ -240,6 +255,8 @@
         let state = {
             data: null,
             filteredData: null,
             currentYear: 1990,
             activeRegions: Object.keys(config.regions),
             isPlaying: false,
@@ -263,7 +280,7 @@
         // Initialize the visualization
         async function init() {
-            // Load data
             await loadData();
             // Setup UI controls
@@ -279,7 +296,7 @@
             dom.loading.style("display", "none");
         }
-        // Load and process data
         async function loadData() {
             try {
                 // Load the CSV data
@@ -291,282 +308,326 @@
                         entity: d.Entity,
                         code: d.Code,
                         year: +d.Year,
-                        lifeExpectancy: d["Life expectancy - Sex: all - Age: 0 - Variant: estimates"] !== ""
-                            ? +d["Life expectancy - Sex: all - Age: 0 - Variant: estimates"]
-                            : null,
-                        gdpPerCapita: d["GDP per capita, PPP (constant 2021 international $)"] !== ""
-                            ? +d["GDP per capita, PPP (constant 2021 international $)"]
-                            : null,
-                        population: d["Population (historical)"] !== ""
-                            ? +d["Population (historical)"]
-                            : null,
-                        region: d["World regions according to OWID"] || "Unknown"
                     };
-                }).filter(d => d.gdpPerCapita !== null && d.lifeExpectancy !== null && d.population !== null);
             } catch (error) {
                 console.error("Error loading data:", error);
-                dom.loading.html("<p>Error loading data. Please try again.</p>");
             }
         }
         // Setup UI controls
         function setupControls() {
-            // Create region filter buttons
-            Object.keys(config.regions).forEach(region => {
-                dom.regionButtons.append("button")
-                    .classed("filter-btn", true)
-                    .style("background-color", config.regions[region].color)
                     .text(region)
-                    .attr("data-region", region)
                     .on("click", function() {
-                        toggleRegion(region);
-                        d3.select(this).classed("active", state.activeRegions.includes(region));
                     });
             });
-            // Year slider
             dom.yearSlider.on("input", function() {
                 state.currentYear = +this.value;
                 dom.yearValue.text(state.currentYear);
-                if (!state.isPlaying) {
-                    updateChart();
-                }
             });
-            // Play button
-            dom.playBtn.on("click", togglePlay);
-        }
-        // Toggle play/pause animation
-        function togglePlay() {
-            state.isPlaying = !state.isPlaying;
-            if (state.isPlaying) {
-                dom.playBtn.html('<i class="fas fa-pause"></i> Pause');
-                dom.playBtn.style("background-color", "#e74c3c");
-                playAnimation();
-            } else {
-                dom.playBtn.html('<i class="fas fa-play"></i> Play');
-                dom.playBtn.style("background-color", "#2ecc71");
-                pauseAnimation();
-            }
-        }
-        // Play the animation
-        function playAnimation() {
-            clearInterval(state.playIntervalId);
-            state.playIntervalId = setInterval(() => {
-                if (state.currentYear < 2023) {
-                    state.currentYear++;
-                    dom.yearSlider.property("value", state.currentYear);
-                    dom.yearValue.text(state.currentYear);
-                    updateChart();
                 } else {
-                    pauseAnimation();
                 }
-            }, config.playInterval);
-        }
-        // Pause the animation
-        function pauseAnimation() {
-            clearInterval(state.playIntervalId);
-            state.isPlaying = false;
-            dom.playBtn.html('<i class="fas fa-play"></i> Play');
-            dom.playBtn.style("background-color", "#2ecc71");
-        }
-        // Toggle region filter
-        function toggleRegion(region) {
-            if (state.activeRegions.includes(region)) {
-                state.activeRegions = state.activeRegions.filter(r => r !== region);
-            } else {
-                state.activeRegions = [...state.activeRegions, region];
-            }
-            if (state.activeRegions.length === 0) {
-                // If all regions are deselected, select all
-                state.activeRegions = Object.keys(config.regions);
-            }
-            updateChart();
         }
-        // Initialize chart
         function initChart() {
             // Create SVG
-            const width = dom.chartArea.node().clientWidth - config.margin.left - config.margin.right;
-            const height = dom.chartArea.node().clientHeight - config.margin.top - config.margin.bottom;
             state.svg = dom.chartArea.append("svg")
-                .attr("width", width + config.margin.left + config.margin.right)
-                .attr("height", height + config.margin.top + config.margin.bottom)
-                .append("g")
-                .attr("transform", `translate(${config.margin.left},${config.margin.top})`);
             // Create scales
-            const gdpExtent = d3.extent(state.data, d => d.gdpPerCapita);
-            const lifeExpectancyExtent = d3.extent(state.data, d => d.lifeExpectancy);
-            const populationExtent = d3.extent(state.data, d => d.population);
             state.x = d3.scaleLog()
-                .domain([100, gdpExtent[1]])
-                .range([0, width]);
             state.y = d3.scaleLinear()
-                .domain([20, lifeExpectancyExtent[1] + 5])
-                .range([height, 0]);
             state.size = d3.scaleSqrt()
-                .domain(populationExtent)
                 .range([config.minBubbleSize, config.maxBubbleSize]);
-            // Add axes
-            state.svg.append("g")
                 .attr("class", "x-axis")
-                .attr("transform", `translate(0,${height})`);
-            state.svg.append("g")
                 .attr("class", "y-axis");
             // Add axis labels
-            state.svg.append("text")
                 .attr("class", "axis-label")
-                .attr("x", width / 2)
-                .attr("y", height + config.margin.bottom - 10)
-                .attr("text-anchor", "middle")
                 .text("GDP per capita (PPP, constant 2021 international $)");
-            state.svg.append("text")
                 .attr("class", "axis-label")
                 .attr("transform", "rotate(-90)")
-                .attr("x", -height / 2)
-                .attr("y", -config.margin.left + 15)
-                .attr("text-anchor", "middle")
                 .text("Life Expectancy (years)");
         }
-        // Update chart with current filters and year
         function updateChart() {
-            // Filter data for current year
-            const yearData = state.data.filter(d =>
                 d.year === state.currentYear &&
                 state.activeRegions.includes(d.region)
             );
-            // Update the chart
-            updateBubbles(yearData);
-        }
-        // Update bubbles on the chart
-        function updateBubbles(data) {
-            // Update scales domain for current data
-            const gdpExtent = d3.extent(data, d => d.gdpPerCapita);
-            const lifeExpectancyExtent = d3.extent(data, d => d.lifeExpectancy);
-            state.x.domain([Math.max(10, gdpExtent[0]), gdpExtent[1]]);
-            state.y.domain([Math.max(20, lifeExpectancyExtent[0] - 5), lifeExpectancyExtent[1] + 5]);
             // Update axes
-            const width = dom.chartArea.node().clientWidth - config.margin.left - config.margin.right;
-            const height = dom.chartArea.node().clientHeight - config.margin.top - config.margin.bottom;
             state.svg.select(".x-axis")
                 .transition()
                 .duration(config.animationDuration)
-                .call(d3.axisBottom(state.x).tickFormat(d3.format("$,.0f")));
             state.svg.select(".y-axis")
                 .transition()
                 .duration(config.animationDuration)
-                .call(d3.axisLeft(state.y));
-            // Bind data to bubbles
-            const bubbles = state.svg.selectAll(".bubble")
-                .data(data, d => d.entity);
-            // Remove old bubbles
-            bubbles.exit()
-                .transition()
-                .duration(config.animationDuration)
                 .attr("r", 0)
-                .style("opacity", 0)
                 .remove();
-            // Update existing bubbles
-            bubbles.transition()
-                .duration(config.animationDuration)
-                .attr("cx", d => state.x(d.gdpPerCapita))
-                .attr("cy", d => state.y(d.lifeExpectancy))
-                .attr("r", d => state.size(d.population))
-                .style("fill", d => config.regions[d.region]?.color || "#ccc")
-                .style("opacity", 0.8);
-            // Add new bubbles
-            bubbles.enter()
-                .append("circle")
-                .attr("class", "bubble")
-                .attr("cx", d => state.x(d.gdpPerCapita))
-                .attr("cy", d => state.y(d.lifeExpectancy))
                 .attr("r", d => state.size(d.population))
-                .style("fill", d => config.regions[d.region]?.color || "#ccc")
-                .style("opacity", 0)
-                .on("mouseover", showTooltip)
-                .on("mouseout", hideTooltip)
-                .transition()
-                .duration(config.animationDuration)
-                .style("opacity", 0.8);
-        }
-        // Show tooltip
-        function showTooltip(event, d) {
-            const populationFormatted = d3.format(",")(Math.round(d.population / 1000000) * 1000000);
-            dom.tooltip.html(`
-                <strong>${d.entity}</strong><br>
-                Region: ${d.region}<br>
-                GDP: ${d3.format("$,.0f")(d.gdpPerCapita)}<br>
-                Life Expectancy: ${d.lifeExpectancy.toFixed(1)} years<br>
-                Population: ${populationFormatted}
-            `)
-                .style("left", (event.pageX) + "px")
-                .style("top", (event.pageY - 28) + "px")
-                .style("opacity", 1);
-        }
-        // Hide tooltip
-        function hideTooltip() {
-            dom.tooltip.style("opacity", 0);
-        }
-        // Handle window resize
-        function handleResize() {
-            const width = dom.chartArea.node().clientWidth - config.margin.left - config.margin.right;
-            const height = dom.chartArea.node().clientHeight - config.margin.top - config.margin.bottom;
-            state.svg.attr("width", width + config.margin.left + config.margin.right)
-                .attr("height", height + config.margin.top + config.margin.bottom);
-            state.x.range([0, width]);
-            state.y.range([height, 0]);
-            state.svg.select(".x-axis")
-                .attr("transform", `translate(0,${height})`)
-                .call(d3.axisBottom(state.x).tickFormat(d3.format("$,.0f")));
-            state.svg.select(".y-axis")
-                .call(d3.axisLeft(state.y));
-            state.svg.select(".axis-label")
-                .attr("x", width / 2)
-                .attr("y", height + config.margin.bottom - 10);
-            updateChart();
-        }
-        // Initialize the visualization when the window loads
         window.addEventListener("load", init);
-        window.addEventListener("resize", handleResize);
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>World Development Indicators</title>
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .container {
             max-width: 1200px;
             margin: 0 auto;
+            background-color: white;
             border-radius: 10px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
             padding: 20px;
             gap: 15px;
             margin-bottom: 25px;
             align-items: center;
+            padding: 15px;
             background-color: #f8f9fa;
             border-radius: 8px;
         }
             border-radius: 4px;
             cursor: pointer;
             transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 5px;
         }
         .play-btn:hover {
             background-color: #27ae60;
         }
+        .play-btn.playing {
+            background-color: #e74c3c;
         }
         .year-display {
             font-weight: bold;
             min-width: 60px;
             text-align: center;
+            font-size: 16px;
         }
         .chart-container {
             width: 100%;
             height: 600px;
             position: relative;
+            border-radius: 8px;
+            overflow: hidden;
+            background-color: white;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
         .tooltip {
             position: absolute;
+            padding: 12px;
+            background: rgba(0, 0, 0, 0.85);
+            color: white;
             border-radius: 5px;
             pointer-events: none;
             text-align: center;
             transition: opacity 0.2s;
             font-size: 14px;
             z-index: 10;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            max-width: 220px;
+            line-height: 1.4;
         }
         .tooltip:after {
             margin-left: -8px;
             border-width: 8px;
             border-style: solid;
+            border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
         }
         .loading {
             fill: #555;
         }
+        .legend {
+            font-size: 12px;
+        }
         @media (max-width: 768px) {
             .controls {
                 flex-direction: column;
 <body>
     <div class="container">
         <h1>World Development Indicators</h1>
+        <p class="subtitle">Life Expectancy vs. GDP per capita</p>
         <div class="controls">
             <div class="filter-buttons" id="region-buttons">
                     <i class="fas fa-play"></i> Play
                 </button>
                 <span class="year-display" id="year-value">1990</span>
+                <input type="range" class="year-slider" id="year-slider" min="1950" max="2023" value="1990" step="1">
             </div>
         </div>
         <div class="chart-container" id="chart-area">
             <div class="loading" id="loading">
                 <div class="spinner"></div>
+                <p>Loading data visualization...</p>
             </div>
         </div>
     <script>
         // Configuration
         const config = {
+            margin: { top: 50, right: 40, bottom: 70, left: 80 },
+            minBubbleSize: 3,
             maxBubbleSize: 40,
+            animationDuration: 500,
+            playInterval: 800,
             regions: {
                 "Africa": { color: "#e74c3c" },
                 "Asia": { color: "#3498db" },
         let state = {
             data: null,
             filteredData: null,
+            minYear: 1950,
+            maxYear: 2023,
             currentYear: 1990,
             activeRegions: Object.keys(config.regions),
             isPlaying: false,
         // Initialize the visualization
         async function init() {
+            // Load data from CSV file
             await loadData();
             // Setup UI controls
             dom.loading.style("display", "none");
         }
+        // Load and process data from CSV
         async function loadData() {
             try {
                 // Load the CSV data
                         entity: d.Entity,
                         code: d.Code,
                         year: +d.Year,
+                        lifeExpectancy: d['Life expectancy - Sex: all - Age: 0 - Variant: estimates'] ? +d['Life expectancy - Sex: all - Age: 0 - Variant: estimates'] : null,
+                        gdpPerCapita: d['GDP per capita, PPP (constant 2021 international $)'] ? +d['GDP per capita, PPP (constant 2021 international $)'] : null,
+                        population: d['Population (historical)'] ? +d['Population (historical)'] : null,
+                        region: d['World regions according to OWID'] || 'Unknown'
                     };
+                }).filter(d =>
+                    d.lifeExpectancy !== null &&
+                    d.gdpPerCapita !== null &&
+                    d.population !== null
+                );
+                // Filter out any invalid data points
+                state.data = state.data.filter(d =>
+                    !isNaN(d.year) &&
+                    !isNaN(d.lifeExpectancy) &&
+                    !isNaN(d.gdpPerCapita) &&
+                    !isNaN(d.population)
+                );
+                // Determine min and max years from data
+                state.minYear = d3.min(state.data, d => d.year);
+                state.maxYear = d3.max(state.data, d => d.year);
+                state.currentYear = state.minYear;
+                // Update slider range
+                dom.yearSlider.attr("min", state.minYear)
+                    .attr("max", state.maxYear)
+                    .attr("value", state.currentYear);
+                dom.yearValue.text(state.currentYear);
+                console.log("Data loaded successfully:", state.data);
             } catch (error) {
                 console.error("Error loading data:", error);
+                dom.loading.html(`<p style="color: #e74c3c;">Error loading data. Please check if the 'world-data.csv' file exists.</p>`);
             }
         }
         // Setup UI controls
         function setupControls() {
+            // Create region buttons
+            dom.regionButtons.selectAll("*").remove();
+            Object.entries(config.regions).forEach(([region, { color }]) => {
+                const btn = dom.regionButtons.append("button")
+                    .attr("class", "filter-btn active")
+                    .style("background-color", color)
                     .text(region)
                     .on("click", function() {
+                        const isActive = d3.select(this).classed("active");
+                        d3.select(this).classed("active", !isActive);
+                        if (isActive) {
+                            state.activeRegions = state.activeRegions.filter(r => r !== region);
+                        } else {
+                            state.activeRegions.push(region);
+                        }
+                        updateChart();
                     });
             });
+            // Year slider event
             dom.yearSlider.on("input", function() {
                 state.currentYear = +this.value;
                 dom.yearValue.text(state.currentYear);
+                updateChart();
             });
+            // Play button event
+            dom.playBtn.on("click", function() {
+                state.isPlaying = !state.isPlaying;
+                if (state.isPlaying) {
+                    d3.select(this).classed("playing", true)
+                        .html('<i class="fas fa-pause"></i> Pause');
+                    state.playIntervalId = setInterval(() => {
+                        state.currentYear = state.currentYear < state.maxYear ?
+                            state.currentYear + 1 : state.minYear;
+                        dom.yearSlider.property("value", state.currentYear);
+                        dom.yearValue.text(state.currentYear);
+                        updateChart();
+                    }, config.playInterval);
                 } else {
+                    d3.select(this).classed("playing", false)
+                        .html('<i class="fas fa-play"></i> Play');
+                    if (state.playIntervalId) {
+                        clearInterval(state.playIntervalId);
+                    }
                 }
+            });
         }
+        // Initialize the chart structure
         function initChart() {
+            // Clear any existing SVG
+            dom.chartArea.selectAll("svg").remove();
             // Create SVG
+            const width = dom.chartArea.node().clientWidth;
+            const height = dom.chartArea.node().clientHeight;
             state.svg = dom.chartArea.append("svg")
+                .attr("width", width)
+                .attr("height", height);
+            // Create main chart group
+            const chartGroup = state.svg.append("g")
+                .attr("transform", `translate(${config.margin.left}, ${config.margin.top})`);
             // Create scales
+            const innerWidth = width - config.margin.left - config.margin.right;
+            const innerHeight = height - config.margin.top - config.margin.bottom;
             state.x = d3.scaleLog()
+                .range([0, innerWidth]);
             state.y = d3.scaleLinear()
+                .range([innerHeight, 0]);
             state.size = d3.scaleSqrt()
                 .range([config.minBubbleSize, config.maxBubbleSize]);
+            // Add axes groups
+            chartGroup.append("g")
                 .attr("class", "x-axis")
+                .attr("transform", `translate(0, ${innerHeight})`);
+            chartGroup.append("g")
                 .attr("class", "y-axis");
             // Add axis labels
+            chartGroup.append("text")
                 .attr("class", "axis-label")
+                .attr("x", innerWidth / 2)
+                .attr("y", innerHeight + 40)
                 .text("GDP per capita (PPP, constant 2021 international $)");
+            chartGroup.append("text")
                 .attr("class", "axis-label")
                 .attr("transform", "rotate(-90)")
+                .attr("x", -innerHeight / 2)
+                .attr("y", -40)
                 .text("Life Expectancy (years)");
+            // Add title
+            chartGroup.append("text")
+                .attr("x", innerWidth / 2)
+                .attr("y", -20)
+                .attr("text-anchor", "middle")
+                .style("font-size", "16px")
+                .style("font-weight", "bold")
+                .text("Life Expectancy vs. GDP per capita");
+            // Add year display on chart
+            chartGroup.append("text")
+                .attr("id", "chart-year")
+                .attr("x", innerWidth - 10)
+                .attr("y", -10)
+                .attr("text-anchor", "end")
+                .style("font-size", "24px")
+                .style("font-weight", "bold")
+                .style("fill", "#444")
+                .text(state.currentYear);
+            // Add legend
+            const legend = state.svg.append("g")
+                .attr("class", "legend")
+                .attr("transform", `translate(${width - config.margin.right - 150}, ${config.margin.top})`);
+            Object.entries(config.regions).forEach(([region, {color}], i) => {
+                const legendItem = legend.append("g")
+                    .attr("transform", `translate(0, ${i * 20})`);
+                legendItem.append("circle")
+                    .attr("r", 5)
+                    .attr("fill", color);
+                legendItem.append("text")
+                    .attr("x", 10)
+                    .attr("y", 5)
+                    .style("font-size", "10px")
+                    .text(region);
+            });
         }
+        // Update chart with current data
         function updateChart() {
+            if (!state.data) return;
+            // Filter data for current year and active regions
+            state.filteredData = state.data.filter(d =>
                 d.year === state.currentYear &&
                 state.activeRegions.includes(d.region)
             );
+            // Get SVG dimensions
+            const width = dom.chartArea.node().clientWidth;
+            const height = dom.chartArea.node().clientHeight;
+            const innerWidth = width - config.margin.left - config.margin.right;
+            const innerHeight = height - config.margin.top - config.margin.bottom;
+            // Update scales
+            state.x.domain([
+                d3.min(state.data, d => d.gdpPerCapita) * 0.8,
+                d3.max(state.data, d => d.gdpPerCapita) * 1.2
+            ]);
+            state.y.domain([
+                d3.min(state.data, d => d.lifeExpectancy) * 0.9,
+                d3.max(state.data, d => d.lifeExpectancy) * 1.05
+            ]);
+            state.size.domain([
+                d3.min(state.data, d => d.population),
+                d3.max(state.data, d => d.population)
+            ]);
             // Update axes
+            const xAxis = d3.axisBottom(state.x).ticks(5, ".0f");
+            const yAxis = d3.axisLeft(state.y);
             state.svg.select(".x-axis")
                 .transition()
                 .duration(config.animationDuration)
+                .call(xAxis);
             state.svg.select(".y-axis")
                 .transition()
                 .duration(config.animationDuration)
+                .call(yAxis);
+            // Update year display
+            state.svg.select("#chart-year")
+                .text(state.currentYear);
+            // Create transition for bubbles
+            const t = state.svg.transition()
+                .duration(config.animationDuration);
+            // Bind data to circles
+            const circles = state.svg.selectAll("g.country")
+                .data(state.filteredData, d => d.code + d.year);
+            // Exit old bubbles
+            circles.exit()
+                .transition(t)
                 .attr("r", 0)
                 .remove();
+            // Enter new bubbles
+            const newCircles = circles.enter()
+                .append("g")
+                .attr("class", "country")
+                .attr("transform", d => {
+                    const xPos = state.x(d.gdpPerCapita) + config.margin.left;
+                    const yPos = state.y(d.lifeExpectancy) + config.margin.top;
+                    return `translate(${xPos}, ${yPos})`;
+                })
+                .on("mouseover", function(event, d) {
+                    dom.tooltip.style("opacity", 1)
+                        .html(`
+                            <strong>${d.entity}</strong><br>
+                            Year: ${d.year}<br>
+                            Life Expectancy: ${d.lifeExpectancy.toFixed(1)} years<br>
+                            GDP per capita: $${d.gdpPerCapita.toFixed(2)}<br>
+                            Population: ${d3.format(",.0f")(d.population)}
+                        `)
+                        .style("left", (event.pageX + 10) + "px")
+                        .style("top", (event.pageY - 10) + "px");
+                })
+                .on("mouseout", function() {
+                    dom.tooltip.style("opacity", 0);
+                });
+            newCircles.append("circle")
+                .attr("r", 0)
+                .attr("fill", d => config.regions[d.region].color)
+                .attr("opacity", 0.7)
+                .transition(t)
                 .attr("r", d => state.size(d.population))
+                .attr("stroke", "#fff")
+                .attr("stroke-width", 1);
+            // Update existing bubbles
+            circles.transition(t)
+                .attr("transform", d => {
+                    const xPos = state.x(d.gdpPerCapita) + config.margin.left;
+                    const yPos = state.y(d.lifeExpectancy) + config.margin.top;
+                    return `translate(${xPos}, ${yPos})`;
+                })
+                .select("circle")
+                .attr("r", d => state.size(d.population))
+                .attr("fill", d => config.regions[d.region].color);
+            // Add country labels for larger bubbles
+            circles.selectAll("text").remove();
+            newCircles.filter(d => state.size(d.population) > 15)
+                .append("text")
+                .attr("dy", ".3em")
+                .style("text-anchor", "middle")
+                .style("font-size", "10px")
+                .style("font-weight", "bold")
+                .style("fill", "#fff")
+                .style("pointer-events", "none")
+                .text(d => d.code);
+        }
+        // Initialize the application
         window.addEventListener("load", init);
+        // Handle window resize
+        window.addEventListener("resize", function() {
+            if (state.svg) {
+                initChart();
+                updateChart();
+            }
+        });
     </script>
+</body>
 </html>