Update index.html

index.html

@@ -117,21 +117,20 @@ const labelData = [{"x": 1.7994170188903809, "y": -0.15466168522834778, "label":
 
 // Create visualization function
 function createVisualization() {
-    // Clear any existing visualization
     const container = d3.select("#viz");
-    container.html('');
     
-    // Set up responsive variables
+    // Set dynamic width and height for responsiveness
     const width = window.innerWidth;
-    const isMobile = width < 768;
     const height = isMobile ? window.innerHeight : window.innerHeight * 0.67;
     
+    // Determine if we're on mobile (width < 768px is a common breakpoint)
+    const isMobile = width < 768;
+    
     // Adjust sizes based on device
     const pointSize = isMobile ? 8 : 12;
     const labelSize = isMobile ? 12 : 16;
     const labelPadding = isMobile ? 4 : 8;
     
-    // Create the plot
     const plot = Plot.plot({
         width: width,
         height: height,
@@ -177,10 +176,8 @@ function createVisualization() {
         }
     });
 
-    // Add plot to container
     container.node().appendChild(plot);
     
-    // Set up popup
     const popup = d3.select("#popup");
     
     // Adjust popup styling for mobile
@@ -209,21 +206,20 @@ function createVisualization() {
         const vizRect = document.getElementById("viz").getBoundingClientRect();
         const popupRect = popup.node().getBoundingClientRect();
         const windowWidth = window.innerWidth;
-        
-        // Calculate position
-        let leftPos, topPos;
-        
+        const windowHeight = window.innerHeight;
+
+        // Calculate initial position
+        let leftPos = rect.left - vizRect.left + rect.width/2;
+        let topPos = rect.top - vizRect.top - popupRect.height - 10;
+
+        // Adjust popup position for mobile
         if (isMobile) {
             // Center popup horizontally on mobile
             leftPos = (windowWidth - popupRect.width) / 2;
             // Position popup at fixed distance from top
             topPos = 20;
         } else {
-            // Desktop positioning
-            leftPos = rect.left - vizRect.left + rect.width/2;
-            topPos = rect.top - vizRect.top - popupRect.height - 10;
-            
-            // Adjust if popup would go off screen
+            // Desktop positioning logic
             if (rect.left + popupRect.width > windowWidth) {
                 leftPos = windowWidth - popupRect.width - 20;
             }
@@ -240,7 +236,7 @@ function createVisualization() {
             .style("top", topPos + "px");
     }
 
-    // Set up event listeners
+    // Handle clicks on points
     d3.selectAll("circle")
         .style("cursor", "pointer")
         .on("click", function(event) {
@@ -248,7 +244,7 @@ function createVisualization() {
             updatePopup(this);
         });
 
-    // Close popup when clicking outside
+    // Click anywhere else to close popup
     document.addEventListener("click", function() {
         popup.style("display", "none");
     });
@@ -259,9 +255,12 @@ function createVisualization() {
     });
 }
 
-// Initialize visualization on load and resize
+// Wait for everything to be loaded and on window resize to adjust
 window.addEventListener('load', createVisualization);
-window.addEventListener('resize', createVisualization);
+window.addEventListener('resize', function() {
+    d3.select("#viz").html('');
+    createVisualization();
+});
 </script>
 </body>
 </html>