static positions when toggled

src/components/BeeswarmChart.vue

@@ -170,10 +170,10 @@
 
   
     // Set forces
-    const forceY = d3.forceY(d => yScale(d.level_agreement)).strength(1);
-    const forceX = d3.forceX(width / 2).strength(0.3);
-    const forceCollide = d3.forceCollide(d => radiusScale(d.evidence_val) + 2);
-    const forceManyBody = d3.forceManyBody().strength(15);
+    const forceY = d3.forceY(d => yScale(d.level_agreement)).strength(0.9);
+    const forceX = d3.forceX(margin.left + (width / 2)).strength(0.1);
+    const forceCollide = d3.forceCollide(d => radiusScale(d.evidence_val) + 2).iterations(16);
+    const forceManyBody = d3.forceManyBody().strength(-10);
   
     const bubbles = svg
       .selectAll('.bubble')
@@ -192,11 +192,12 @@
       .force('charge', forceManyBody)
       .nodes(data.value)
       .on('tick', ticked)
-      .alpha(0.2);
+      .alpha(0.75)
+      .alphaDecay(0.03);
   
       function ticked() {
         bubbles
-          .attr("cx", d => Math.max(50+radiusScale(d.evidence_val), Math.min(width - 50 - radiusScale(d.evidence_val), d.x)))
+          .attr("cx", d => Math.max(margin.left +radiusScale(d.evidence_val), Math.min(width - margin.right - radiusScale(d.evidence_val), d.x)))
           .attr("cy", d => Math.max(radiusScale(d.evidence_val), Math.min(height - radiusScale(d.evidence_val), d.y)))
           .each(d => { d.y = Math.max(radiusScale(d.evidence_val), Math.min(height - radiusScale(d.evidence_val), yScale(d.level_agreement))); });
       }