diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue
index 5762a6f9ee0554fb6618330689bb308742e6b95f..99bc0b85d24034dc79a146818e3abf2abc73dabd 100644
--- a/src/components/BeeswarmChart.vue
+++ b/src/components/BeeswarmChart.vue
@@ -51,8 +51,8 @@
</div>
<!-- <div id="legend-container"></div> -->
<div id="text2" class="text-container tooltip-width">
- <div id="tooltip" class="tooltip">Interact with the chart to explore evidence for social vulnerability determinants.</div>
- <p><em>Many social vulnerability determinants have been studied. Some show positive relationships with water insecurity, some with negative, and others inconclusive (Drakes et al. 2024). Interact with the chart to see the level of agreement across studies.</em></p>
+ <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> (Drakes et al. 2024).</em>
</div>
</section>
</template>
@@ -104,35 +104,47 @@ const legendData = [
{ name: 'Negative', color: 'white', stroke: dimensionColors['Demographiccharacteristics'] },
{ name: 'Unknown', pattern: true, color: `url(#pattern-stripe)`, stroke: dimensionColors['Demographiccharacteristics'] }
];
-
function createLegend() {
- const legend = d3.select('#legend-container')
+ const keyW = 65;
+ const keyH = 12;
+
+ const svgDefs = d3.select('#text2')
.append('svg')
- .attr('width', width)
- .attr('height', 50)
- .attr('class', 'legend');
+ .attr('width', 0)
+ .attr('height', 0)
+ .append('defs');
- const legendGroup = legend.selectAll('g')
- .data(legendData)
- .enter()
- .append('g')
- .attr('transform', (d, i) => `translate(${i * 100}, 0)`);
-
- legendGroup.append('rect')
- .attr('x', 15)
- .attr('y', 17)
- .attr('width', 15)
- .attr('height', 15)
- .attr('class', d => d.name.toLowerCase() + '-key')
- .style('fill', d => d.pattern ? d.color : d.color)
- .style('stroke', d => d.stroke ? d.stroke : 'none')
- .style('stroke-width', d => d.stroke ? 2 : 0);
-
- legendGroup.append('text')
- .attr('x', 35)
- .attr('y', 25)
- .attr('dy', '0.35em')
- .text(d => d.name);
+ const pattern = svgDefs.append('pattern')
+ .attr('id', 'pattern-stripe')
+ .attr('patternUnits', 'userSpaceOnUse')
+ .attr('width', 8)
+ .attr('height', 8);
+
+ pattern.append('rect')
+ .attr('width', 8)
+ .attr('height', 8)
+ .attr('fill', 'white');
+
+ pattern.append('path')
+ .attr('d', 'M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4')
+ .attr('stroke', dimensionColors['Demographiccharacteristics'])
+ .attr('stroke-width', 3);
+
+ legendData.forEach(d => {
+ const legend = d3.select(`.${d.name.toLowerCase()}`)
+ .append('svg')
+ .attr('width', keyW + 5)
+ .attr('height', keyH);
+
+ legend.append('rect')
+ .attr('x', 4)
+ .attr('y', 0)
+ .attr('width', keyW)
+ .attr('height', keyH)
+ .style('fill', d.pattern ? d.color : d.color)
+ .style('stroke', d.stroke ? d.stroke : 'none')
+ .style('stroke-width', d.stroke ? 3 : 0);
+ });
}
// Load data and then make chart
@@ -310,7 +322,7 @@ function handleMouseOver(event, d) {
const tooltip = d3.select('#tooltip');
tooltip.html('')
.append('div')
- .html(`<strong>${d.determinant}</strong><br>appeared in ${d.evidence_val} ${d.evidence_val === 1 ? 'study' : 'studies'}.`);
+ .html(`<strong>${d.determinant}</strong> appeared in ${d.evidence_val} ${d.evidence_val === 1 ? 'study' : 'studies'}.`);
// Add stacked bar chart
const barData = [
@@ -320,8 +332,8 @@ function handleMouseOver(event, d) {
];
// Set dimensions for the bar chart
- const barWidth = 160;
- const barHeight = 10;
+ const barWidth = 200;
+ const barHeight = 15;
// Create an SVG element for the bar chart
const svgBar = tooltip.append('svg')
@@ -344,7 +356,7 @@ function handleMouseOver(event, d) {
pattern.append('path')
.attr('d', 'M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4')
.attr('stroke', dimensionColors[d.dimension.replace(' ', '')])
- .attr('stroke-width', 3);
+ .attr('stroke-width', 4);
const g = svgBar.append('g')
.attr('transform', 'translate(8, 8)');
@@ -369,31 +381,24 @@ function handleMouseOver(event, d) {
.style('fill', d => d.pattern ? `url(#${patternId})` : d.fill)
.style('stroke', d => d.stroke ? d.stroke : 'none');
- // Position the tooltip
- tooltip
- .style('opacity', 1)
- //.style('left', '50%')
- //.style('transform', 'translateX(-50%)')
- //.style('top', '100%'); // Ensure the tooltip is below the chart
-
// Highlight the circle
d3.select(this)
.attr('stroke', dimensionColors[d.dimension.replace(' ', '')])
.attr('stroke-width', 8);
- d3.select('#legend-container').select('.positive-key')
+ d3.select('.positive')
.style('fill', dimensionColors[d.dimension.replace(' ', '')]);
- d3.select('#legend-container').select('.negative-key')
+ d3.select('#text2').select('.negative')
.style('stroke', dimensionColors[d.dimension.replace(' ', '')]);
- d3.select('#legend-container').select('.unknown-key')
+ d3.select('#text2').select('.unknown')
.style('stroke', dimensionColors[d.dimension.replace(' ', '')]);
}
function handleMouseOut() {
const tooltip = d3.select('#tooltip');
- tooltip.html('Interact with the chart to explore evidence for social vulnerability determinants.');
+ tooltip.html('Interact with the chart to explore evidence for<br>social vulnerability determinants.');
d3.select(this)
.attr('stroke', null)
.attr('stroke-width', null);
@@ -435,7 +440,6 @@ $ThemeGrey: rgba(217, 217, 217, 0.95);
}
.tooltip {
- //position: absolute;
opacity: 1;
background: $ThemeGrey;
padding: 8px;
@@ -443,8 +447,7 @@ $ThemeGrey: rgba(217, 217, 217, 0.95);
pointer-events: none;
width: 100%;
text-align: center;
- //transform: translateX(-50%);
- //top: 100%;
+
}
.hidden {
@@ -493,6 +496,24 @@ $ThemeGrey: rgba(217, 217, 217, 0.95);
background-color: $ThemeGrey;
}
}
+
+.legend-item {
+ display: inline-block;
+ margin-right: 10px;
+ position: relative;
+ padding-left: 20px; /* Adjust padding for spacing between text and rectangle */
+}
+
+.legend-item::before {
+ content: '';
+ display: inline-block;
+ width: 15px;
+ height: 10px;
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+}
</style>