implement the global event heatmap in 8bit style

index.html

@@ -19,30 +19,103 @@
             background: #000;
             border: 4px solid #00ff00;
             image-rendering: pixelated;
+            position: relative;
+            overflow: hidden;
         }
         
-        .country:hover {
-            stroke: #ffff00;
+        .pixel-map {
+            image-rendering: pixelated;
+            background: #000;
+        }
+        
+        .map-grid {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                linear-gradient(#00ff00 1px, transparent 1px),
+                linear-gradient(90deg, #00ff00 1px, transparent 1px);
+            background-size: 20px 20px;
+            opacity: 0.3;
+            pointer-events: none;
+        }
+        
+        .country-pixel {
+            fill: #000;
+            stroke: #00ff00;
             stroke-width: 2px;
-            filter: brightness(1.5);
+            image-rendering: pixelated;
+            transition: all 0.2s;
+        }
+        
+        .country-pixel:hover {
+            stroke: #ffff00;
+            stroke-width: 3px;
+            filter: drop-shadow(0 0 4px #ffff00);
+        }
+        
+        .heat-1 { fill: #004400; }
+        .heat-2 { fill: #008800; }
+        .heat-3 { fill: #00cc00; }
+        .heat-4 { fill: #00ff00; }
+        .heat-5 { fill: #88ff00; }
+        .heat-6 { fill: #ffff00; }
+        .heat-7 { fill: #ff8800; }
+        .heat-8 { fill: #ff0000; }
+        
+        .map-legend {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            background: #000;
+            border: 3px solid #00ff00;
+            padding: 8px;
+            image-rendering: pixelated;
+        }
+        
+        .legend-item {
+            display: flex;
+            align-items: center;
+            margin: 4px 0;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
         }
         
-        .heat-gradient {
-            stop-color: #00ff00;
-            stop-opacity: 0.6;
+        .legend-color {
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+            border: 1px solid #00ff00;
+            image-rendering: pixelated;
         }
         
-        .heat-gradient-stop-2 {
-            stop-color: #ffff00;
-            stop-opacity: 0.8;
+        .map-tooltip {
+            position: absolute;
+            background: #000;
+            border: 3px solid #ffff00;
+            padding: 8px;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            image-rendering: pixelated;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.2s;
+            z-index: 100;
         }
         
-        .heat-gradient-stop-3 {
-            stop-color: #ff0000;
-            stop-opacity: 1;
+        .pulse-dot {
+            animation: pixel-pulse 1.5s infinite;
+            image-rendering: pixelated;
         }
         
-        .pulse-ring {
+        @keyframes pixel-pulse {
+            0% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.3); opacity: 0.7; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+.pulse-ring {
             animation: pulse 1s infinite;
             image-rendering: pixelated;
         }
@@ -285,26 +358,46 @@
                     <div class="text-sm text-slate-600 dark:text-slate-400">98.3% uptime</div>
                 </div>
             </div>
-
             <!-- Interactive World Map -->
-            <div class="glass-effect rounded-xl p-6 mb-8">
+            <div class="pixel-card p-6 mb-8">
                 <div class="flex items-center justify-between mb-6">
-                    <h2 class="text-xl font-bold">Global Event Heat Map</h2>
+                    <h2 class="text-xl font-bold pixel-text">GLOBAL_EVENT_HEAT_MAP</h2>
                     <div class="flex space-x-2">
-                        <button class="px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors">
-                            <i data-feather="download" class="w-4 h-4 mr-2 inline"></i>
-                            Export
+                        <button class="pixel-button">
+                            <i data-feather="download" class="w-4 h-4 mr-2"></i>
+                            EXPORT
                         </button>
-                        <button class="px-4 py-2 rounded-lg glass-effect hover:bg-slate-200/50 dark:hover:bg-slate-700/50 transition-colors">
-                            <i data-feather="refresh-cw" class="w-4 h-4 mr-2 inline"></i>
-                            Refresh
+                        <button class="pixel-button">
+                            <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i>
+                            REFRESH
                         </button>
                     </div>
                 </div>
-                <div id="worldMap" class="world-map rounded-lg"></div>
+                <div id="worldMap" class="world-map">
+                    <div class="map-grid"></div>
+                    <svg id="pixelMap" class="pixel-map" width="100%" height="100%"></svg>
+                    <div id="mapTooltip" class="map-tooltip"></div>
+                    <div class="map-legend">
+                        <div class="legend-item">
+                            <div class="legend-color heat-1"></div>
+                            <span>0-100K</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color heat-3"></div>
+                            <span>100K-500K</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color heat-5"></div>
+                            <span>500K-1M</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color heat-7"></div>
+                            <span>1M+</span>
+                        </div>
+                    </div>
+                </div>
             </div>
-
-            <!-- Scrape Runs & Metrics -->
+<!-- Scrape Runs & Metrics -->
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                 <!-- Recent Scrape Runs -->
                 <div class="glass-effect rounded-xl p-6">
@@ -397,45 +490,130 @@
                 document.getElementById('pluginsCounter').textContent = plugins.toLocaleString();
             }, 5000);
         }
-
-        // World Map with D3.js
+        // 8-bit World Map with D3.js
         function initWorldMap() {
-            const svg = d3.select("#worldMap")
-                .append("svg")
-                .attr("width", "100%")
-                .attr("height", "100%");
+            const svg = d3.select("#pixelMap");
+            const tooltip = d3.select("#mapTooltip");
 
-            // Simplified world map with sample data
-            const projection = d3.geoNaturalEarth1()
-                .scale(150)
+            // Simplified projection for pixelated look
+            const projection = d3.geoMercator()
+                .scale(120)
                 .translate([400, 300]);
 
             const path = d3.geoPath().projection(projection);
 
-            // Sample data for heat map
+            // Enhanced sample data for heat map
             const sampleData = {
-                "USA": { events: 800000, music: "Rock", capacity: 2500000 },
-                "GBR": { events: 450000, music: "Pop", capacity: 1200000 },
-                "DEU": { events: 320000, music: "Electronic", capacity: 900000 },
-                "FRA": { events: 280000, music: "Hip Hop", capacity: 750000 },
-                "JPN": { events: 210000, music: "J-Pop", capacity: 600000 }
+                "USA": { events: 842000, music: "Rock", capacity: 2850000, cities: 245 },
+                "GBR": { events: 467000, music: "Pop", capacity: 1280000, cities: 89 },
+                "DEU": { events: 328000, music: "Electronic", capacity: 920000, cities: 76 },
+                "FRA": { events: 291000, music: "Hip Hop", capacity: 780000, cities: 68 },
+                "JPN": { events: 218000, music: "J-Pop", capacity: 640000, cities: 52 },
+                "CAN": { events: 187000, music: "Indie", capacity: 520000, cities: 45 },
+                "AUS": { events: 156000, music: "Rock", capacity: 410000, cities: 38 },
+                "BRA": { events: 134000, music: "Samba", capacity: 380000, cities: 41 },
+                "ITA": { events: 123000, music: "Opera", capacity: 320000, cities: 35 },
+                "ESP": { events: 118000, music: "Flamenco", capacity: 290000, cities: 32 }
             };
 
-            // Draw base map
-            d3.json("https://cdn.jsdelivr.net/npm/world-atlas@1/countries-110m.json").then(function(world) {
-                svg.selectAll("path")
-                    .data(topojson.feature(world, world.objects.countries).features)
-                    .enter()
-                    .append("path")
-                    .attr("d", path)
-                    .attr("class", "country")
-                    .style("fill", function(d) {
-                        const countryData = sampleData[d.id];
-                        return countryData ? `rgba(59, 130, 246, ${countryData.events / 1000000})` : "#374151";
-                    })
-                    .style("stroke", "#4B5563")
-                    .style("stroke-width", 0.5)
-                    .on("mouseover", function(event, d) {
-                        const countryData = sampleData[d.id];
+            // Get heat level based on event count
+            function getHeatLevel(events) {
+                if (events > 1000000) return 8;
+                if (events > 800000) return 7;
+                if (events > 600000) return 6;
+                if (events > 400000) return 5;
+                if (events > 200000) return 4;
+                if (events > 100000) return 3;
+                if (events > 50000) return 2;
+                return 1;
+            }
+
+            // Draw simplified pixelated map
+            const simplifiedWorld = {
+                type: "FeatureCollection",
+                features: [
+                    // North America
+                    { type: "Feature", geometry: { type: "Polygon", coordinates: [[[-130, 25], [-130, 50], [-65, 50], [-65, 25], [-130, 25]]] }, properties: { name: "North America", id: "USA" }},
+                    // Europe
+                    { type: "Feature", geometry: { type: "Polygon", coordinates: [[[-10, 35], [-10, 60], [40, 60], [40, 35], [-10, 35]]] }, properties: { name: "Europe", id: "EUR" }},
+                    // Asia
+                    { type: "Feature", geometry: { type: "Polygon", coordinates: [[[60, 10], [60, 60], [140, 60], [140, 10], [60, 10]]] }, properties: { name: "Asia", id: "ASIA" }},
+                    // South America
+                    { type: "Feature", geometry: { type: "Polygon", coordinates: [[[-80, -55], [-80, 15], [-35, 15], [-35, -55], [-80, -55]]] }, properties: { name: "South America", id: "SAM" }},
+                    // Africa
+                    { type: "Feature", geometry: { type: "Polygon", coordinates: [[[-20, -35], [-20, 35], [50, 35], [50, -35], [-20, -35]]] }, properties: { name: "Africa", id: "AFR" }},
+                    // Australia
+                    { type: "Feature", geometry: { type: "Polygon", coordinates: [[[110, -45], [110, -10], [155, -10], [155, -45], [110, -45]]] }, properties: { name: "Australia", id: "AUS" }}
+                ]
+            };
+
+            // Draw pixelated countries
+            svg.selectAll("path")
+                .data(simplifiedWorld.features)
+                .enter()
+                .append("path")
+                .attr("d", path)
+                .attr("class", "country-pixel")
+                .attr("fill", function(d) {
+                    const countryData = sampleData[d.properties.id];
+                    if (countryData) {
+                        const heatLevel = getHeatLevel(countryData.events);
+                        return `var(--heat-${heatLevel})`;
+                    }
+                    return "#000";
+                })
+                .on("mouseover", function(event, d) {
+                    const countryData = sampleData[d.properties.id];
+                    if (countryData) {
+                        tooltip
+                            .style("opacity", 1)
+                            .html(`
+                                <div class="font-bold">${d.properties.name}</div>
+                                <div>Events: ${countryData.events.toLocaleString()}</div>
+                                <div>Top Genre: ${countryData.music}</div>
+                                <div>Cities: ${countryData.cities}</div>
+                                <div>Capacity: ${countryData.capacity.toLocaleString()}</div>
+                            `)
+                            .style("left", (event.pageX + 10) + "px")
+                            .style("top", (event.pageY - 10) + "px");
+                    }
+                    
+                    d3.select(this)
+                        .style("filter", "drop-shadow(0 0 6px #ffff00)");
+                })
+                .on("mousemove", function(event) {
+                    tooltip
+                        .style("left", (event.pageX + 10) + "px")
+                        .style("top", (event.pageY - 10) + "px");
+                })
+                .on("mouseout", function() {
+                    tooltip.style("opacity", 0);
+                    d3.select(this)
+                        .style("filter", "none");
+                });
+
+            // Add pulse dots for major cities
+            const majorCities = [
+                { name: "New York", coords: [-74, 40.7], events: 284000 },
+                { name: "London", coords: [-0.1, 51.5], events: 198000 },
+                { name: "Tokyo", coords: [139.7, 35.7], events: 167000 },
+                { name: "Berlin", coords: [13.4, 52.5], events: 142000 },
+                { name: "Paris", coords: [2.3, 48.9], events: 128000 },
+                { name: "Sydney", coords: [151.2, -33.9], events: 98000 },
+                { name: "São Paulo", coords: [-46.6, -23.6], events: 87000 }
+            ];
+
+            svg.selectAll("circle")
+                .data(majorCities)
+                .enter()
+                .append("circle")
+                .attr("cx", d => projection(d.coords)[0])
+                .attr("cy", d => projection(d.coords)[1])
+                .attr("r", 4)
+                .attr("class", "pulse-dot")
+                .attr("fill", "#ffff00")
+                .attr("stroke", "#000")
+                .attr("stroke-width", 1);
+        }
 </body>
 </html>