خريطة تفاعلية لانتشار التغطية.

index.html

@@ -158,17 +158,24 @@
                         </div>
                         <div class="mt-6 relative">
                             <div class="h-[400px] w-full rounded-lg overflow-hidden">
-                                <div id="worldMap" class="h-full w-full"></div>
-                            </div>
-                            <div class="absolute top-4 left-4 z-10 bg-white/80 backdrop-blur-sm p-2 rounded-lg shadow-sm">
-                                <div class="flex items-center space-x-2 space-x-reverse">
-                                    <span class="w-3 h-3 rounded-full bg-green-500"></span>
-                                    <span class="text-sm">إيجابي</span>
-                                    <span class="w-3 h-3 rounded-full bg-red-500 ml-2"></span>
-                                    <span class="text-sm">سلبي</span>
+                            <div id="worldMap" class="h-full w-full">
+                                <div class="absolute top-0 right-0 z-10 p-4 bg-white/80 rounded-bl-lg shadow-sm flex items-center space-x-2 space-x-reverse">
+                                    <div class="flex items-center">
+                                        <span class="w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="text-xs mr-1">إيجابي</span>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <span class="w-3 h-3 rounded-full bg-red-500"></span>
+                                        <span class="text-xs mr-1">سلبي</span>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
+                                        <span class="text-xs mr-1">محايد</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
+</div>
+</div>
 </div>
                 </div>
             </div>
@@ -551,19 +558,25 @@
                     }
                 }
             });
-        // Initialize world map
+        // Initialize world map with more countries and dynamic data
         const mapData = {
-            "SA": { fillKey: "positive", newsCount: 124 },
-            "US": { fillKey: "neutral", newsCount: 87 },
-            "GB": { fillKey: "positive", newsCount: 65 },
-            "FR": { fillKey: "neutral", newsCount: 42 },
-            "DE": { fillKey: "positive", newsCount: 38 },
-            "CN": { fillKey: "negative", newsCount: 56 },
-            "IN": { fillKey: "positive", newsCount: 29 },
-            "JP": { fillKey: "neutral", newsCount: 21 }
+            "SA": { fillKey: "positive", newsCount: 124, sentimentScore: 0.87 },
+            "US": { fillKey: "neutral", newsCount: 87, sentimentScore: 0.52 },
+            "GB": { fillKey: "positive", newsCount: 65, sentimentScore: 0.72 },
+            "FR": { fillKey: "neutral", newsCount: 42, sentimentScore: 0.48 },
+            "DE": { fillKey: "positive", newsCount: 38, sentimentScore: 0.68 },
+            "CN": { fillKey: "negative", newsCount: 56, sentimentScore: 0.34 },
+            "IN": { fillKey: "positive", newsCount: 29, sentimentScore: 0.65 },
+            "JP": { fillKey: "neutral", newsCount: 21, sentimentScore: 0.45 },
+            "RU": { fillKey: "negative", newsCount: 43, sentimentScore: 0.29 },
+            "BR": { fillKey: "positive", newsCount: 27, sentimentScore: 0.63 },
+            "CA": { fillKey: "neutral", newsCount: 35, sentimentScore: 0.55 },
+            "AU": { fillKey: "positive", newsCount: 31, sentimentScore: 0.71 },
+            "AE": { fillKey: "positive", newsCount: 48, sentimentScore: 0.78 },
+            "EG": { fillKey: "neutral", newsCount: 39, sentimentScore: 0.49 },
+            "TR": { fillKey: "negative", newsCount: 33, sentimentScore: 0.41 }
         };
-
-        const map = new Datamap({
+const map = new Datamap({
             element: document.getElementById('worldMap'),
             responsive: true,
             geographyConfig: {
@@ -581,13 +594,21 @@
                         neutral: 'محايد',
                         negative: 'سلبي'
                     }[data.fillKey];
-                    
-                    return `<div class="p-2 text-sm">
-                        <div class="font-bold">${geo.properties.name}</div>
-                        <div>عدد الأخبار: ${data.newsCount}</div>
-                        <div>الانطباع: ${sentiment}</div>
+                    return `<div class="p-3 text-sm bg-white rounded-lg shadow-lg">
+                        <div class="font-bold text-primary mb-2">${geo.properties.name}</div>
+                        <div class="mb-1">عدد الأخبار: <span class="font-medium">${data.newsCount}</span></div>
+                        <div class="mb-1">الانطباع: 
+                            <span class="font-medium ${data.fillKey === 'positive' ? 'text-green-600' : data.fillKey === 'negative' ? 'text-red-600' : 'text-yellow-600'}">
+                                ${sentiment}
+                            </span>
+                        </div>
+                        <div class="mb-1">نسبة المشاعر: <span class="font-medium">${Math.round(data.sentimentScore * 100)}%</span></div>
+                        <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
+                            <div class="h-2 rounded-full ${data.fillKey === 'positive' ? 'bg-green-500' : data.fillKey === 'negative' ? 'bg-red-500' : 'bg-yellow-500'}" 
+                                 style="width: ${Math.round(data.sentimentScore * 100)}%"></div>
+                        </div>
                     </div>`;
-                }
+}
             },
             fills: {
                 positive: '#408E91',
@@ -595,7 +616,32 @@
                 negative: '#E49393',
                 defaultFill: '#F8F5F1'
             },
+            bubblesConfig: {
+                popupOnHover: true,
+                highlightOnHover: true,
+                highlightFillColor: '#245953',
+                highlightBorderColor: '#fff',
+                highlightBorderWidth: 2,
+                fillOpacity: 0.8,
+                borderWidth: 1,
+                borderColor: '#fff',
+                r: function(data) {
+                    return Math.min(Math.max(data.newsCount / 2, 5), 20);
+                },
+                fillKey: 'fillKey',
+                popupTemplate: function(geo, data) {
+                    return `<div class="p-3 text-sm bg-white rounded-lg shadow-lg">
+                        <div class="font-bold">${geo.properties.name}</div>
+                        <div>عدد الأخبار: ${data.newsCount}</div>
+                    </div>`;
+                }
+            },
             data: mapData,
+            done: function(datamap) {
+                datamap.svg.selectAll('.datamaps-bubble').attr('r', function(d) {
+                    return Math.min(Math.max(d.newsCount / 2, 5), 20);
+                });
+            },
             setProjection: function(element) {
                 const projection = d3.geo.equirectangular()
                     .center([50, 20])
@@ -604,14 +650,40 @@
                     .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
                 const path = d3.geo.path().projection(projection);
                 return { path: path, projection: projection };
+            },
+            geographyConfig: {
+                borderColor: '#408E91',
+                borderWidth: 0.5,
+                highlightBorderWidth: 1.5,
+                highlightBorderColor: '#245953',
+                highlightFillColor: '#E49393',
+                popupOnHover: true
+            }
+});
+        // Add bubbles to the map
+        const bubbles = Object.keys(mapData).map(countryCode => {
+            return {
+                ...mapData[countryCode],
+                name: countryCode,
+                latitude: Datamap.latLngLookup(countryCode)[0],
+                longitude: Datamap.latLngLookup(countryCode)[1]
+            };
+        });
+
+        map.bubbles(bubbles, {
+            popupTemplate: function(geo, data) {
+                return `<div class="p-2 text-sm">
+                    <div class="font-bold">${geo.properties.name}</div>
+                    <div>عدد الأخبار: ${data.newsCount}</div>
+                </div>`;
             }
         });
 
         window.addEventListener('resize', function() {
             map.resize();
+            map.bubbles(bubbles);
         });
-
-        // Feather Icons
+// Feather Icons
         feather.replace();
 });
     </script>