Update index.html

index.html

@@ -13,7 +13,7 @@
         }
         #viz { 
             width: 100%; 
-            height: 67vh; 
+            height: 100vh; 
             position: relative;
             overflow: hidden;
         }
@@ -86,18 +86,26 @@ const labelData = [{"x": 1.7994170188903809, "y": -0.15466168522834778, "label":
 
 function createVisualization() {
     const container = d3.select("#viz");
-
+    
     // Set dynamic width and height for responsiveness
     const width = window.innerWidth;
-    const height = window.innerHeight * 0.67;
-
+    const height = window.innerHeight;
+    
+    // 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;
+    
     const plot = Plot.plot({
         width: width,
         height: height,
-        margin: 50,
+        margin: isMobile ? 30 : 50,
         style: {
             background: "white",
-            fontSize: 12,
+            fontSize: isMobile ? 10 : 12,
             overflow: "visible"
         },
         color: {
@@ -108,7 +116,7 @@ function createVisualization() {
                 x: "x",
                 y: "y",
                 fill: d => `topic${d.topic}`,
-                r: 12,
+                r: pointSize,
                 opacity: 0.6,
                 stroke: "white",
                 strokeWidth: 0.5
@@ -118,12 +126,12 @@ function createVisualization() {
                 y: "y",
                 text: "label",
                 fill: "black",
-                fontSize: 16,
+                fontSize: labelSize,
                 fontWeight: "bold",
                 dx: 0,
                 dy: 0,
                 background: true,
-                backgroundPadding: 8,
+                backgroundPadding: labelPadding,
                 backgroundFill: "white",
                 backgroundOpacity: 0.9
             })
@@ -140,6 +148,12 @@ function createVisualization() {
     
     const popup = d3.select("#popup");
     
+    // Adjust popup styling for mobile
+    if (isMobile) {
+        popup.style("max-width", "280px")
+            .style("font-size", "12px");
+    }
+    
     // Function to update popup content and position
     function updatePopup(circle) {
         const index = Array.from(document.querySelectorAll('circle')).indexOf(circle);
@@ -166,18 +180,23 @@ function createVisualization() {
         let leftPos = rect.left - vizRect.left + rect.width/2;
         let topPos = rect.top - vizRect.top - popupRect.height - 10;
 
-        // Check if popup would go outside the window on the right
-        if (rect.left + popupRect.width > windowWidth) {
-            leftPos = windowWidth - popupRect.width - 20;
-        }
-        // Check if popup would go outside the window on the left
-        if (leftPos < 0) {
-            leftPos = 20;
-        }
-
-        // If popup would go above the window, place it below the point instead
-        if (topPos < 0) {
-            topPos = rect.top - vizRect.top + rect.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 logic
+            if (rect.left + popupRect.width > windowWidth) {
+                leftPos = windowWidth - popupRect.width - 20;
+            }
+            if (leftPos < 0) {
+                leftPos = 20;
+            }
+            if (topPos < 0) {
+                topPos = rect.top - vizRect.top + rect.height + 10;
+            }
         }
 
         popup
@@ -189,7 +208,7 @@ function createVisualization() {
     d3.selectAll("circle")
         .style("cursor", "pointer")
         .on("click", function(event) {
-            event.stopPropagation();  // Prevent click from immediately closing popup
+            event.stopPropagation();
             updatePopup(this);
         });
 
@@ -207,7 +226,6 @@ function createVisualization() {
 // Wait for everything to be loaded and on window resize to adjust
 window.addEventListener('load', createVisualization);
 window.addEventListener('resize', function() {
-    // Re-create the visualization on window resize
     d3.select("#viz").html('');
     createVisualization();
 });