add context on bubble sizing and add % label to y

src/components/BeeswarmChart.vue

@@ -51,7 +51,7 @@
     </div>
     <div id="text2" class="text-container tooltip-width">
       <div id="tooltip" class="tooltip">Interact with the chart to explore evidence<br>for social vulnerability determinants.</div>
-      <em>Many social vulnerability determinants have been studied. Some show positive <span class="legend-box positive"></span> relationships with water insecurity, some negative <span class="legend-box negative"></span>, and others unknown <span class="legend-box unknown"></span> <a href='https://www.sciencebase.gov/catalog/item/63f79d49d34e4f7eda456572' target='_blank'>(Hines and others, 2023)</a>. The y-axis of the chart represents the level of agreement among studies where increased <b>consensus</b> indicates a majority of studies using the selected determinant recorded the same direction of influence on conditions of water insecurity and <b>inconclusive</b> indicates studies using the selected determinant did not record the same direction of influence on conditions of water insecurity.</em>
+      <em>Many social vulnerability determinants have been studied. Some show positive <span class="legend-box positive"></span> relationships with water insecurity, some negative <span class="legend-box negative"></span>, and others unknown <span class="legend-box unknown"></span> <a href='https://www.sciencebase.gov/catalog/item/63f79d49d34e4f7eda456572' target='_blank'>(Hines and others, 2023)</a>. The y-axis of the chart represents the level of agreement among studies where increased <b>consensus</b> indicates a majority of studies using the selected determinant recorded the same direction of influence on conditions of water insecurity and <b>inconclusive</b> indicates studies using the selected determinant did not record the same direction of influence on conditions of water insecurity. The size of the bubbles on the chart represents the number of studies, with larger bubbles indicating that a particular determinant has been studied more frequently.</em>
     </div>
   </section>
 </template>
@@ -222,10 +222,12 @@ function createBeeswarmChart() {
     .range(window.innerWidth <= 700 ? [8, 40] : [10, 70]);
 
   const yAxis = svg.append('g')
-    .attr("transform", "translate(50, 0)")
-    .call(d3.axisLeft(yScale).ticks(5))
-    .attr("stroke-width", 2)
-    .attr("font-size", 18);
+  .attr("transform", "translate(50, 0)")
+  .call(d3.axisLeft(yScale)
+    .ticks(5)
+    .tickFormat(d => d + '%'))
+  .attr("stroke-width", 2)
+  .attr("font-size", 18);
 
   // Add label to y axis
   svg.append('text')