Spaces:

fdaudens
/

world-indicators

Running

App Files Files Community

fdaudens HF Staff commited on Mar 30

Commit

4a19518

verified ·

1 Parent(s): 1d3fc5f

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +572 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: World Indicators
-emoji: 🐠
-colorFrom: green
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: world-indicators
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,572 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<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>
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f7fa;
+            color: #333;
+        }
+        .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;
+        }
+        h1 {
+            text-align: center;
+            color: #2c3e50;
+            margin-bottom: 10px;
+        }
+        .subtitle {
+            text-align: center;
+            color: #7f8c8d;
+            margin-bottom: 30px;
+        }
+        .controls {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin-bottom: 25px;
+            align-items: center;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 8px;
+        }
+        .filter-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-right: auto;
+        }
+        .filter-btn {
+            padding: 8px 12px;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.3s;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .filter-btn:hover {
+            opacity: 0.8;
+            transform: translateY(-2px);
+        }
+        .filter-btn.active {
+            transform: scale(1.05);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+        .year-controls {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .year-slider {
+            width: 200px;
+        }
+        .play-btn {
+            background-color: #2ecc71;
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            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;
+            opacity: 0;
+            transition: opacity 0.2s;
+            font-size: 14px;
+            z-index: 10;
+        }
+        .tooltip:after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            margin-left: -8px;
+            border-width: 8px;
+            border-style: solid;
+            border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
+        }
+        .loading {
+            text-align: center;
+            padding: 50px;
+            font-size: 18px;
+            color: #7f8c8d;
+        }
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-radius: 50%;
+            border-top: 4px solid #3498db;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .axis-label {
+            font-size: 12px;
+            fill: #555;
+        }
+        @media (max-width: 768px) {
+            .controls {
+                flex-direction: column;
+                align-items: stretch;
+            }
+            .filter-buttons {
+                margin-right: 0;
+                margin-bottom: 15px;
+                justify-content: center;
+            }
+            .year-controls {
+                justify-content: center;
+            }
+            .chart-container {
+                height: 450px;
+            }
+        }
+    </style>
+</head>
+<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">
+                <!-- Region buttons will be dynamically generated here -->
+            </div>
+            <div class="year-controls">
+                <button class="play-btn" id="play-btn">
+                    <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>
+        <div class="tooltip" id="tooltip"></div>
+    </div>
+    <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" },
+                "Europe": { color: "#2ecc71" },
+                "North America": { color: "#f1c40f" },
+                "Oceania": { color: "#9b59b6" },
+                "South America": { color: "#1abc9c" },
+                "Antarctica": { color: "#95a5a6" }
+            }
+        };
+        // State
+        let state = {
+            data: null,
+            filteredData: null,
+            currentYear: 1990,
+            activeRegions: Object.keys(config.regions),
+            isPlaying: false,
+            playIntervalId: null,
+            svg: null,
+            x: null,
+            y: null,
+            size: null
+        };
+        // DOM elements
+        const dom = {
+            chartArea: d3.select("#chart-area"),
+            loading: d3.select("#loading"),
+            tooltip: d3.select("#tooltip"),
+            yearSlider: d3.select("#year-slider"),
+            yearValue: d3.select("#year-value"),
+            playBtn: d3.select("#play-btn"),
+            regionButtons: d3.select("#region-buttons")
+        };
+        // Initialize the visualization
+        async function init() {
+            // Load data
+            await loadData();
+            // Setup UI controls
+            setupControls();
+            // Initialize chart
+            initChart();
+            // Render initial view
+            updateChart();
+            // Hide loading
+            dom.loading.style("display", "none");
+        }
+        // Load and process data
+        async function loadData() {
+            try {
+                // Load the CSV data
+                const rawData = await d3.csv("world-data.csv");
+                // Process the data
+                state.data = rawData.map(d => {
+                    return {
+                        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>