From 5c478a4997149560e42f6c60e6aefb0c44893fe6 Mon Sep 17 00:00:00 2001
From: elmeraa <eazadpour@usgs.gov>
Date: Wed, 24 Jul 2024 13:35:44 -0700
Subject: [PATCH] add context on bubble sizing and add % label to y
---
src/components/BeeswarmChart.vue | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue
index b9f2b1a..4c7b235 100644
--- a/src/components/BeeswarmChart.vue
+++ b/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')
--
GitLab