make bubbles grey with toggle

src/components/BeeswarmChart.vue

@@ -299,42 +299,44 @@
   }
   
   function updateChart() {
-    console.log('Update chart called');
-    const yScale = d3.scaleLinear()
-      .domain([40, d3.max(data.value, d => d.level_agreement)])
-      .range([height-margin.bottom, margin.top]);
-  
-    // Set radius based on evidence value
-    const radiusScale = d3.scaleLinear()
-      .domain([d3.min(data.value, d => d.evidence_val), d3.max(data.value, d => d.evidence_val)])
-      .range([10, 70]);
+  console.log('Update chart called');
 
-      // Filter data based on active categories
-    const activeCategories = Object.keys(isChecked.value).filter(category => isChecked.value[category]);
-    const dataPoints = data.value.filter(d => activeCategories.includes(d.dimension.replace(' ', '')));
-    console.log('Active categories:', activeCategories);
-    console.log('Filtered data points:', dataPoints);
-  
-    // Update existing bubbles and add new bubbles
-    const bubbles = svg.selectAll(".bubble")
-      .data(dataPoints, d => d.id);
+  // Set the y scale
+  const yScale = d3.scaleLinear()
+    .domain([40, d3.max(data.value, d => d.level_agreement)])
+    .range([height - margin.bottom, margin.top]);
 
-    // Remove old bubbles
-    bubbles.exit().remove();
-    
-    // Add new bubbles
-    bubbles.enter()
-      .append('circle')
-      .attr('class', 'bubble')
-      .attr('r', d => d3.select('.bubble').size() ? d3.select('.bubble').attr('r') : radiusScale(d.evidence_val))
-      .style('fill', d => dimensionColors[d.dimension.replace(' ', '')])
-      .attr('cx', d => d.x)  // Use existing x position
-      .attr('cy', d => d.y)
-      .merge(bubbles)  // Merge to apply forces to new and existing bubbles
-      .attr('r', d => radiusScale(d.evidence_val))
-      .style('fill', d => dimensionColors[d.dimension.replace(' ', '')]);
+  // Set the radius scale based on evidence value
+  const radiusScale = d3.scaleLinear()
+    .domain([d3.min(data.value, d => d.evidence_val), d3.max(data.value, d => d.evidence_val)])
+    .range([10, 70]);
 
-  }
+  // Filter data based on active categories
+  const activeCategories = Object.keys(isChecked.value).filter(category => isChecked.value[category]);
+  console.log('Active categories:', activeCategories);
+
+  // Select all bubbles and bind data
+  const bubbles = svg.selectAll(".bubble")
+    .data(data.value, d => d.id);
+
+  // Update existing bubbles
+  bubbles
+    .attr('r', d => radiusScale(d.evidence_val))
+    .style('fill', d => activeCategories.includes(d.dimension.replace(' ', '')) ? dimensionColors[d.dimension.replace(' ', '')] : 'rgba(250, 250, 250, 0.93)');
+
+  // Add new bubbles
+  bubbles.enter()
+    .append('circle')
+    .attr('class', 'bubble')
+    .attr('r', d => radiusScale(d.evidence_val))
+    .style('fill', d => activeCategories.includes(d.dimension.replace(' ', '')) ? dimensionColors[d.dimension.replace(' ', '')] : 'rgba(250, 250, 250, 0.93)')
+    .attr('cx', d => d.x)  // Use existing x position
+    .attr('cy', d => d.y)
+    .merge(bubbles);
+
+  // Ensure all bubbles are handled correctly
+  bubbles.exit().remove();
+}
   </script>
   
   <style scoped lang="scss">