constrain bubbles within bounds of svg

src/components/BeeswarmChart.vue

@@ -129,7 +129,7 @@
       return [];
     }
   }
-  
+  // make beeswarm of determinants
   function createBeeswarmChart() {
     svg = d3
       .select('#beeswarm-chart-container')
@@ -191,15 +191,15 @@
       .on('tick', ticked)
       .alpha(0.2);
   
-    function ticked() {
-      bubbles
-        .attr("cx", d => d.x)
-        .attr("cy", d => d.y);
-    }
+      function ticked() {
+        bubbles
+          .attr("cx", d => Math.max(radiusScale(d.evidence_val), Math.min(width - radiusScale(d.evidence_val), d.x)))
+          .attr("cy", d => Math.max(radiusScale(d.evidence_val), Math.min(height - radiusScale(d.evidence_val), d.y)));
+      }
   }
   
   function toggleCategory(category) {
-    console.log(`Toggle category called for: ${category}`);
+    //console.log(`Toggle category called for: ${category}`);
     isChecked.value[category] = !isChecked.value[category];
     console.log(`Category toggled: ${category}, new value: ${isChecked.value[category]}`);
     updateChart();