Add 1 files

index.html

@@ -21,19 +21,21 @@
             background-color: white;
             border-radius: 10px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            padding: 20px;
+            padding: 30px;
         }
 
         h1 {
             text-align: center;
             color: #2c3e50;
             margin-bottom: 10px;
+            font-size: 2.2em;
         }
 
         .subtitle {
             text-align: center;
             color: #7f8c8d;
             margin-bottom: 30px;
+            font-size: 1.1em;
         }
 
         .controls {
@@ -42,63 +44,102 @@
             gap: 15px;
             margin-bottom: 25px;
             align-items: center;
-            padding: 15px;
+            padding: 20px;
             background-color: #f8f9fa;
             border-radius: 8px;
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
         }
 
         .filter-buttons {
             display: flex;
             flex-wrap: wrap;
-            gap: 8px;
+            gap: 10px;
             margin-right: auto;
         }
 
         .filter-btn {
-            padding: 8px 12px;
+            padding: 8px 16px;
             border: none;
-            border-radius: 20px;
+            border-radius: 25px;
             cursor: pointer;
             font-weight: 600;
             transition: all 0.3s;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+        }
+
+        .filter-btn i {
+            margin-right: 5px;
+            font-size: 0.9em;
         }
 
         .filter-btn:hover {
-            opacity: 0.8;
+            opacity: 0.9;
             transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
         }
 
         .filter-btn.active {
             transform: scale(1.05);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
         }
 
         .year-controls {
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 15px;
+            background-color: rgba(255, 255, 255, 0.8);
+            padding: 10px 15px;
+            border-radius: 30px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
 
         .year-slider {
-            width: 200px;
+            width: 250px;
+            -webkit-appearance: none;
+            height: 6px;
+            background: #e0e0e0;
+            border-radius: 5px;
+            outline: none;
+        }
+
+        .year-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #3498db;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .year-slider::-webkit-slider-thumb:hover {
+            background: #2980b9;
+            transform: scale(1.1);
         }
 
         .play-btn {
             background-color: #2ecc71;
             color: white;
             border: none;
-            padding: 8px 16px;
-            border-radius: 4px;
+            padding: 10px 20px;
+            border-radius: 30px;
             cursor: pointer;
             transition: all 0.3s;
             display: flex;
             align-items: center;
-            gap: 5px;
+            gap: 8px;
+            font-weight: 600;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
 
         .play-btn:hover {
             background-color: #27ae60;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
         }
 
         .play-btn.playing {
@@ -107,36 +148,43 @@
 
         .year-display {
             font-weight: bold;
-            min-width: 60px;
+            min-width: 50px;
             text-align: center;
-            font-size: 16px;
+            font-size: 1.1em;
+            color: #2c3e50;
+            background-color: #f8f9fa;
+            padding: 5px 10px;
+            border-radius: 20px;
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
         }
 
         .chart-container {
             width: 100%;
-            height: 600px;
+            height: 650px;
             position: relative;
             border-radius: 8px;
             overflow: hidden;
             background-color: white;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+            border: 1px solid #eee;
         }
 
         .tooltip {
             position: absolute;
-            padding: 12px;
-            background: rgba(0, 0, 0, 0.85);
+            padding: 15px;
+            background: rgba(0, 0, 0, 0.9);
             color: white;
-            border-radius: 5px;
+            border-radius: 8px;
             pointer-events: none;
-            text-align: center;
+            text-align: left;
             opacity: 0;
             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;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+            max-width: 240px;
+            line-height: 1.5;
+            backdrop-filter: blur(2px);
         }
 
         .tooltip:after {
@@ -147,7 +195,7 @@
             margin-left: -8px;
             border-width: 8px;
             border-style: solid;
-            border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
+            border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
         }
 
         .loading {
@@ -175,20 +223,28 @@
         .axis-label {
             font-size: 12px;
             fill: #555;
-        }
-
-        .legend {
-            font-size: 12px;
+            font-weight: 500;
         }
 
         .disclaimer {
             text-align: center;
-            font-size: 12px;
+            font-size: 13px;
             color: #7f8c8d;
-            margin-top: 15px;
+            margin-top: 20px;
+            line-height: 1.5;
+        }
+
+        .chart-title {
+            font-size: 14px;
+            font-weight: bold;
+            fill: #444;
         }
 
         @media (max-width: 768px) {
+            .container {
+                padding: 15px;
+            }
+            
             .controls {
                 flex-direction: column;
                 align-items: stretch;
@@ -201,11 +257,24 @@
             }
 
             .year-controls {
-                justify-content: center;
+                width: 100%;
+                justify-content: space-between;
+            }
+            
+            .year-slider {
+                width: 100%;
             }
 
             .chart-container {
-                height: 450px;
+                height: 500px;
+            }
+            
+            h1 {
+                font-size: 1.8em;
+            }
+            
+            .subtitle {
+                font-size: 1em;
             }
         }
     </style>
@@ -237,25 +306,25 @@
         </div>
         
         <div class="tooltip" id="tooltip"></div>
-        <p class="disclaimer">Note: For countries missing region data in their year, we use the region from their latest available data</p>
+        <p class="disclaimer">Note: For countries missing region data in their year, we use the region from their latest available data.<br>Some countries/territories may not have complete indicator coverage for all years.</p>
     </div>
 
     <script>
         // Configuration
         const config = {
-            margin: { top: 50, right: 40, bottom: 70, left: 80 },
+            margin: { top: 60, right: 60, bottom: 80, left: 90 },
             minBubbleSize: 3,
-            maxBubbleSize: 40,
+            maxBubbleSize: 45,
             animationDuration: 500,
             playInterval: 800,
             regions: {
-                "Africa": { color: "#e74c3c" },
-                "Asia": { color: "#3498db" },
-                "Europe": { color: "#2ecc71" },
-                "North America": { color: "#f1c40f" },
-                "Oceania": { color: "#9b59b6" },
-                "South America": { color: "#1abc9c" },
-                "Antarctica": { color: "#95a5a6" }
+                "Africa": { color: "#e74c3c", icon: "globe-africa" },
+                "Asia": { color: "#3498db", icon: "globe-asia" },
+                "Europe": { color: "#2ecc71", icon: "globe-europe" },
+                "North America": { color: "#f1c40f", icon: "globe-americas" },
+                "Oceania": { color: "#9b59b6", icon: "map-marked-alt" },
+                "South America": { color: "#1abc9c", icon: "map-marked-alt" },
+                "Antarctica": { color: "#95a5a6", icon: "snowflake" }
             }
         };
 
@@ -393,11 +462,11 @@
             // Create region buttons
             dom.regionButtons.selectAll("*").remove();
             
-            Object.entries(config.regions).forEach(([region, { color }]) => {
+            Object.entries(config.regions).forEach(([region, { color, icon }]) => {
                 const btn = dom.regionButtons.append("button")
                     .attr("class", "filter-btn active")
                     .style("background-color", color)
-                    .text(region)
+                    .html(`<i class="fas fa-${icon}"></i> ${region}`)
                     .on("click", function() {
                         const isActive = d3.select(this).classed("active");
                         d3.select(this).classed("active", !isActive);
@@ -488,23 +557,22 @@
             chartGroup.append("text")
                 .attr("class", "axis-label")
                 .attr("x", innerWidth / 2)
-                .attr("y", innerHeight + 40)
+                .attr("y", innerHeight + 50)
                 .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)
+                .attr("y", -50)
                 .text("Life Expectancy (years)");
             
             // Add title
             chartGroup.append("text")
+                .attr("class", "chart-title")
                 .attr("x", innerWidth / 2)
-                .attr("y", -20)
+                .attr("y", -30)
                 .attr("text-anchor", "middle")
-                .style("font-size", "16px")
-                .style("font-weight", "bold")
                 .text("Life Expectancy vs. GDP per capita");
             
             // Add year display on chart
@@ -513,30 +581,11 @@
                 .attr("x", innerWidth - 10)
                 .attr("y", -10)
                 .attr("text-anchor", "end")
-                .style("font-size", "24px")
+                .style("font-size", "28px")
                 .style("font-weight", "bold")
-                .style("fill", "#444")
+                .style("fill", "#2c3e50")
+                .style("opacity", 0.9)
                 .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
@@ -615,12 +664,14 @@
                 .on("mouseover", function(event, d) {
                     dom.tooltip.style("opacity", 1)
                         .html(`
-                            <strong>${d.entity}</strong><br>
-                            Year: ${d.year}<br>
-                            Region: ${d.region}<br>
-                            Life Expectancy: ${d.lifeExpectancy.toFixed(1)} years<br>
-                            GDP per capita: $${d.gdpPerCapita.toLocaleString('en-US', {maximumFractionDigits: 0})}<br>
-                            Population: ${d3.format(",.0f")(d.population)}
+                            <div style="margin-bottom: 5px; font-size: 16px; font-weight: bold; color: ${config.regions[d.region].color}">
+                                <i class="fas fa-${config.regions[d.region].icon}" style="margin-right: 5px;"></i>${d.entity}
+                            </div>
+                            <div><strong>Year:</strong> ${d.year}</div>
+                            <div><strong>Region:</strong> ${d.region}</div>
+                            <div><strong>Life Expectancy:</strong> ${d.lifeExpectancy.toFixed(1)} years</div>
+                            <div><strong>GDP per capita:</strong> $${d.gdpPerCapita.toLocaleString('en-US', {maximumFractionDigits: 0})}</div>
+                            <div><strong>Population:</strong> ${d3.format(",.0f")(d.population)}</div>
                         `)
                         .style("left", (event.pageX + 10) + "px")
                         .style("top", (event.pageY - 10) + "px");
@@ -632,11 +683,11 @@
             newCircles.append("circle")
                 .attr("r", 0)
                 .attr("fill", d => config.regions[d.region] ? config.regions[d.region].color : "#95a5a6")
-                .attr("opacity", 0.7)
-                .transition(t)
-                .attr("r", d => state.size(d.population))
+                .attr("opacity", 0.8)
                 .attr("stroke", "#fff")
-                .attr("stroke-width", 1);
+                .attr("stroke-width", 1.5)
+                .transition(t)
+                .attr("r", d => state.size(d.population));
             
             // Update existing bubbles
             circles.transition(t)