Skip to content
Snippets Groups Projects
Commit 836a39e6 authored by Cee Nell's avatar Cee Nell
Browse files

add legend keys to caption text

parent 7dcdf4f5
No related branches found
No related tags found
1 merge request!25Add tooltip
Hide whitespace changes
Inline Side-by-side
src/components/BeeswarmChart.vue
+ 67
− 46
View file @ 836a39e6
...@@ -51,8 +51,8 @@ ...@@ -51,8 +51,8 @@
</div> </div>
<!-- <div id="legend-container"></div> --> <!-- <div id="legend-container"></div> -->
<div id="text2" class="text-container tooltip-width"> <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> <div id="tooltip" class="tooltip">Interact with the chart to explore evidence<br>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> <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> </div>
</section> </section>
</template> </template>
...@@ -104,35 +104,47 @@ const legendData = [ ...@@ -104,35 +104,47 @@ const legendData = [
{ name: 'Negative', color: 'white', stroke: dimensionColors['Demographiccharacteristics'] }, { name: 'Negative', color: 'white', stroke: dimensionColors['Demographiccharacteristics'] },
{ name: 'Unknown', pattern: true, color: `url(#pattern-stripe)`, stroke: dimensionColors['Demographiccharacteristics'] } { name: 'Unknown', pattern: true, color: `url(#pattern-stripe)`, stroke: dimensionColors['Demographiccharacteristics'] }
]; ];
function createLegend() { function createLegend() {
const legend = d3.select('#legend-container') const keyW = 65;
const keyH = 12;
const svgDefs = d3.select('#text2')
.append('svg') .append('svg')
.attr('width', width) .attr('width', 0)
.attr('height', 50) .attr('height', 0)
.attr('class', 'legend'); .append('defs');
const legendGroup = legend.selectAll('g') const pattern = svgDefs.append('pattern')
.data(legendData) .attr('id', 'pattern-stripe')
.enter() .attr('patternUnits', 'userSpaceOnUse')
.append('g') .attr('width', 8)
.attr('transform', (d, i) => `translate(${i * 100}, 0)`); .attr('height', 8);
legendGroup.append('rect') pattern.append('rect')
.attr('x', 15) .attr('width', 8)
.attr('y', 17) .attr('height', 8)
.attr('width', 15) .attr('fill', 'white');
.attr('height', 15)
.attr('class', d => d.name.toLowerCase() + '-key') pattern.append('path')
.style('fill', d => d.pattern ? d.color : d.color) .attr('d', 'M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4')
.style('stroke', d => d.stroke ? d.stroke : 'none') .attr('stroke', dimensionColors['Demographiccharacteristics'])
.style('stroke-width', d => d.stroke ? 2 : 0); .attr('stroke-width', 3);
legendGroup.append('text') legendData.forEach(d => {
.attr('x', 35) const legend = d3.select(`.${d.name.toLowerCase()}`)
.attr('y', 25) .append('svg')
.attr('dy', '0.35em') .attr('width', keyW + 5)
.text(d => d.name); .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 // Load data and then make chart
...@@ -310,7 +322,7 @@ function handleMouseOver(event, d) { ...@@ -310,7 +322,7 @@ function handleMouseOver(event, d) {
const tooltip = d3.select('#tooltip'); const tooltip = d3.select('#tooltip');
tooltip.html('') tooltip.html('')
.append('div') .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 // Add stacked bar chart
const barData = [ const barData = [
...@@ -320,8 +332,8 @@ function handleMouseOver(event, d) { ...@@ -320,8 +332,8 @@ function handleMouseOver(event, d) {
]; ];
// Set dimensions for the bar chart // Set dimensions for the bar chart
const barWidth = 160; const barWidth = 200;
const barHeight = 10; const barHeight = 15;
// Create an SVG element for the bar chart // Create an SVG element for the bar chart
const svgBar = tooltip.append('svg') const svgBar = tooltip.append('svg')
...@@ -344,7 +356,7 @@ function handleMouseOver(event, d) { ...@@ -344,7 +356,7 @@ function handleMouseOver(event, d) {
pattern.append('path') pattern.append('path')
.attr('d', 'M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4') .attr('d', 'M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4')
.attr('stroke', dimensionColors[d.dimension.replace(' ', '')]) .attr('stroke', dimensionColors[d.dimension.replace(' ', '')])
.attr('stroke-width', 3); .attr('stroke-width', 4);
const g = svgBar.append('g') const g = svgBar.append('g')
.attr('transform', 'translate(8, 8)'); .attr('transform', 'translate(8, 8)');
...@@ -369,31 +381,24 @@ function handleMouseOver(event, d) { ...@@ -369,31 +381,24 @@ function handleMouseOver(event, d) {
.style('fill', d => d.pattern ? `url(#${patternId})` : d.fill) .style('fill', d => d.pattern ? `url(#${patternId})` : d.fill)
.style('stroke', d => d.stroke ? d.stroke : 'none'); .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 // Highlight the circle
d3.select(this) d3.select(this)
.attr('stroke', dimensionColors[d.dimension.replace(' ', '')]) .attr('stroke', dimensionColors[d.dimension.replace(' ', '')])
.attr('stroke-width', 8); .attr('stroke-width', 8);
d3.select('#legend-container').select('.positive-key') d3.select('.positive')
.style('fill', dimensionColors[d.dimension.replace(' ', '')]); .style('fill', dimensionColors[d.dimension.replace(' ', '')]);
d3.select('#legend-container').select('.negative-key') d3.select('#text2').select('.negative')
.style('stroke', dimensionColors[d.dimension.replace(' ', '')]); .style('stroke', dimensionColors[d.dimension.replace(' ', '')]);
d3.select('#legend-container').select('.unknown-key') d3.select('#text2').select('.unknown')
.style('stroke', dimensionColors[d.dimension.replace(' ', '')]); .style('stroke', dimensionColors[d.dimension.replace(' ', '')]);
} }
function handleMouseOut() { function handleMouseOut() {
const tooltip = d3.select('#tooltip'); 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) d3.select(this)
.attr('stroke', null) .attr('stroke', null)
.attr('stroke-width', null); .attr('stroke-width', null);
...@@ -435,7 +440,6 @@ $ThemeGrey: rgba(217, 217, 217, 0.95); ...@@ -435,7 +440,6 @@ $ThemeGrey: rgba(217, 217, 217, 0.95);
} }
.tooltip { .tooltip {
//position: absolute;
opacity: 1; opacity: 1;
background: $ThemeGrey; background: $ThemeGrey;
padding: 8px; padding: 8px;
...@@ -443,8 +447,7 @@ $ThemeGrey: rgba(217, 217, 217, 0.95); ...@@ -443,8 +447,7 @@ $ThemeGrey: rgba(217, 217, 217, 0.95);
pointer-events: none; pointer-events: none;
width: 100%; width: 100%;
text-align: center; text-align: center;
//transform: translateX(-50%);
//top: 100%;
} }
.hidden { .hidden {
...@@ -493,6 +496,24 @@ $ThemeGrey: rgba(217, 217, 217, 0.95); ...@@ -493,6 +496,24 @@ $ThemeGrey: rgba(217, 217, 217, 0.95);
background-color: $ThemeGrey; 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> </style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment